Web design is a crucial component of the web development process. If you're interested in web design, we're guessing you have a creative streak. And how could you not be excited about jumping in and making your first website? Web design is about crafting a functional piece of art — but where do you start? If you're wondering what you need to know before you begin, this guide will help you out.
- Design Trend: How To Use Blurred Images On Your Website Url
- Design Trend: How To Use Blurred Images On Your Website Without
- Design Trend: How To Use Blurred Images On Your Website Page
Choose something basic for your first site design
You need to find the largest image size your site scales a blurry image to and re-upload the image at that size, then use HTML to set a width percentage so it will scale automatically. Or better yet, use Picturefill or Adaptive images, which will take some knowledge of coding. Retina displays are not your fault, and you’re not going crazy. Blurred placeholder image on Medium website High-res, lazy loaded image on Medium website You can lazy load images with this interesting blurring effect in a number of ways. My favorite technique.
This seems like a no brainer, right? But sometimes we can get overly ambitious and end up discouraged. For your first project, it’s a good idea to choose something simple and fun. An ecommerce site is more complicated and would be better to tackle once you have more experience.
A blog is a great place to start. It will be a good design exercise and you’ll learn how a Content Management System (CMS) works, which will be important to know for future site designs. Best of all — you don’t have to start from scratch. There are plenty of blog templates that make it easy to put one together.
Templates are a valuable learning tool. Watching how HTML, CSS, and Javascript elements are styled and come together will give you deeper insight into what makes a design work. You can use templates as a foundation to make changes and customizations.
Maybe you don't want to start a blog — try pulling from your creative pursuits or hobbies. How about building a showcase for your photography skills or for your collection of short stories? Creating a design to feature a passion of yours makes for an enjoyable first project.
Find inspiration from other designers
You've no doubt come across websites that have wowed you with their stunning design.
Create an inspiration doc with links to sites you love, or bookmark them as you go. Pinterest is a great place to find great site design — you can find and pins illustrations, book covers, posters, blogs, and other types of design work to refer to. Designers use the term 'mood board' for these collections. Mood boards are a quick reference resource if you find yourself stuck. Which you will.
Outside the discoveries you make on your own, there are some curated collections you should check out.
- Awwwards always has new and fresh work and a variety of themed collections
- Behance is a fantastic compilation of website design work, where the focus is on quality and creativity
- Dribbble focuses on individual designers, providing a forum to get feedback and communicate with others about their work
And of course, head over to the Webflow showcase to see the variety of ways people are using our design platform. There’s so much cool stuff to check out and so many templates available to clone as your very own.
Look outside the web for sources of inspiration
Web design is informed by a visual language that can be found anywhere, like the cover of a graphic novel or the digital kiosk at your bank. Develop an eye for recognizing good design and start analyzing why something works or doesn’t work, whatever the medium.
Pay attention to typography
We often read without even being aware of typefaces. Pay attention to the effect type has on as you consume content. Is that font on the menu readable? What makes that hand-lettered sign for the local business work so well? Letters are everywhere. Make note of both good and bad uses of typography.
Typewolf is an excellent resource to keep tabs on popular fonts. It has plenty of lists to explore, a featured site of the day, and lookbooks that have spectacular font combinations. It’s helpful to see actual examples of typography being used, and websites like Typewolf are a great place to see their practical applications. Getting familiar with different fonts will help you pick the right type for your first site design.
Let the fine arts influence you
Oh, did we mention there’s an entire history of art to draw from? So many movements and artists still shape the work of creatives today — especially web designers. Take a stroll through our Web design and art history piece to discover many monumental artistic achievements. Not only is filled with valuable information, it’s an excellent example of how content and artistry can come together to tell a story.
Research different types of design
There are so many disciplines of design to be familiar with. A knowledge of product design, illustration, and even branding can further develop your creative senses.
For inspiration that goes beyond web design, Abduzeedo offers brilliant examples. Whether it’s poster art, luggage, or furniture, you’ll see fantastic examples of design done right. Be open to different types of design and actively seek out inspiration. The more knowledge you have, the easier it will be to design your first website. Education informs intuition.
Have content ready before you start
Putting content first means having content ready to work with before you start designing your first website.
It doesn’t have to be perfect. You can always edit and optimize for Google SEO (search engine optimization) later. But having at least a rough draft of what will go live will help make sure the design is laid out to accommodate it. Designing with real content gives you a better representation of how the website will look and function. It also gives you the opportunity to make changes earlier in the design process.
For blogs, you’ll need to have a post ready to test in the CMS. Having a couple posts written before you launch will save scrambling to write something after the fact.
Keep your design simple and intuitive
Whether it's writing, navigation, or CTAs, no one wants to struggle with your design.
Your design approach should be rooted in simplicity and order. Logic should guide someone through the site with ease. And since we’re talking about those people who will interact with what you’ve created, this is a good place to introduce UX.
Understand user experience (UX) basics
A website is more than just floating text in space. The color scheme, content, typography, layout, and imagery all come together to serve your audience and stir emotion. Someone wandering through the digital space you’ve created should have a clear path free from obstacles.
UX focuses on understanding your audience. What are they looking for — and how will your design make finding it easy? UX is about getting into the heads of your audience and seeing your design through their eyes.
When building your first website, keep these guiding UX principles in mind:
- Make things simple and intuitive
- Communicate concepts in a logical succession
- Meet your audience’s needs and resist the temptation to showboat your skills at the expense of usability
Learning about your audience will help you craft a design that’s tailored to their wants and needs. Check out our Beginner’s guide to user research for more insights on how to do this.
Understand user interface (UI) basics
If you’re new to web design, you might be confused by the difference between UI and UX. Most of us were. Know this — they’re two distinct concepts.
Where UX is concerned with the overall feel of a design, UI is about the specifics. If you were in an elevator, UI would be the size and arrangement of the floor buttons, while UX would encompass the colors, textures, and other interior design choices of the elevator space. UI is about giving someone the tools they need to experience your website free from complications.
When constructing your first website, keep these UI principles in mind:
- Functionality of interactive elements should be obvious
- Uniformity must guide usability — actions should follow logical patterns
- Design choices should be made with a clear purpose
Take a look at 10 essential UI design tips for a deeper dive into UI.
Introducing The Freelancer’s Journey: a free course that teaches you how to succeed as a freelance web designer — from getting clients to launching their websites.
Use the principles of design to guide your beginner web design process
Effective design is guided by certain rules and it’s important to understand essential web design skills before you start. There are standard practices that will simplify the process and make for a more refined final product.
Layout
If you want to design and build websites, understanding good layout is key. We suggest keeping things minimal and working with only a few elements to focus on the perfect placement.
When you first start designing, think grids. Grids align elements, like div blocks and images on a web page, in a way that creates order.
The structure of a layout should follow a visual hierarchy. What are the important ideas you want people to see and in what order? Visual hierarchy needs to adhere to the common patterns people use when reading. There are two paths people’s eyes generally follow on the web: the F-pattern and the Z-pattern. Being familiar with how these patterns work will help you organize your own content.
The F-pattern is more common for designs with dense blocks of content. People’s eyes will scan down the left side of a layout until things catch their attention and then read from left to right. Imagine looking through the menu at a restaurant — you may skip over the bold names of dishes aligned on the left until you come to something that grabs you, which will prompt you to read the supporting details explaining that specific dish.
Most people will read through something like a blog post in this F-pattern. With left-aligned text and bulleted sentences, Nelson Abalos takes advantage of this design technique, making his posts easy to navigate and follow.
The Z-pattern is associated with less text-heavy design. Many landing pages conform to this pattern. All the major elements on the Conservation Guide site adhere to the Z-pattern. If you’re a beginner web designer, this is a simple layout trick to help usability.
Color
You have the colors of the rainbow and beyond available to you. And we all know that 'with great power comes great responsibility.' The power of the color picker can be wielded for good or evil.
Here are a couple straightforward approaches in choosing a color scheme for your first website.
Monochrome
Design Trend: How To Use Blurred Images On Your Website Url
Use a single color as the base, vary the amount of saturation, include lights and darks, and play with various hues for a uniform color scheme. Regardless of your niche, a monochrome site is a smart design choice. And remember, whatever color you choose for the text, make sure you’re thoughtful about readability.
In this example from Unique, each section is delineated by a monochromatic color scheme. You don’t have to get this fancy in your beginner designs, but it’s nice to see their use of different monochromatic color variations. Notice how each section is made of colors related to the featured bags? This is a nice design trick that makes for a harmonious color scheme.
Complementary
Take colors that are opposite on the color wheel and combine them. Easy enough, right?
Use complementary colors with care. In this design below from the Ignisis website, the designer used blue and orange in different combinations along with whitespace and greys for a layout that never tires the eyes. The contrast feels crisp and refreshing.
Typography
Typography is two-dimensional architecture, based on experience and imagination, and guided by rules and readability.
-Hermann Zapf
So what are the rules that you, the neophyte designer, need to know?
Typography informs tone
Think of a wedding invitation or a funeral announcement. Both are profound life events — one a joyful celebration and the other typically more somber. Where an ornate flowery typeface works well for a wedding, it’s not well-suited for a funeral.
When designing your first website, keep tone in mind. If you’re going for a lighthearted vibe, like a food blog, weaving in playful fonts makes sense. But if you’re crafting a website for a law firm, stick to more professional typefaces.
Serifs versus non-serifs
A common mistake of new designers is to mix up serif and non-serif fonts. You can tell them apart because the ends of serif letters have an extra line or stroke added vertically or horizontally.
Check out the differences between PT Serif and PT Sans (without the serif).
Here’s PT Serif:
And here’s PT Sans:
Serifs are an artifact from the time of printing presses when most of the words we read were printed with ink on paper. Serifs anchored words onto the page and made them easier to read. In the earlier days of the web, serifs were shunned by web designers because lower screen resolutions diluted them. Now that screens are better optimized for typography with serifs, they’ve made a comeback.
Those small lines make a huge difference. You’ll notice the above PT Serif typeface feels more formal and the sans-serif version seems lighter and looser.
Since serif fonts are more complicated, they’re best used in moderation. Headers are an ideal place for serif fonts, and larger blocks of content benefit from a more simplified font without serifs.
Ornamentation versus practicality
The loops and whorls of a flourished font will add personality and elegance to a design, but don’t overuse frilly fonts. A website is about communicating to an audience through content. As Hermann Zapf said, readability is one of a font’s most important characteristics.
Typography technicalities
There’s a lot to learn with typography. As you progress as a designer, you’ll need to know how to use line height, kerning, and different weights in your typography. But don’t get too caught up in tweaking all the intricacies for your first site. Focus on making sure everything is readable — you can experiment fine-tuning the details later.
Check out “Web Typography 101” to learn more about typography and how it can be styled.
Start designing
Tutorials and research are invaluable to your learning, but you’ll eventually just need to dig in and get designing. Even if you create something no one will ever see, it's still an exercise problem solving and applying what you've learned. Don't worry if it's not amazing. But be proud of crossing that threshold from aspiring designer to actually being one — you’re on your way!
Get feedback
You finished your first design — congratulations! You worked hard and you’re ready to show it to the world. But before you hit publish, get some outside perspective on what you made.
Getting constructive criticism can be uncomfortable. Creating something, whether it’s an essay, a painting, or a website is an act of vulnerability. The things you put into the world are an extension of who you are and what you’re capable of. To be told what you made could be better or is wrong might feel like a personal attack.
In web design, feedback is a normal and necessary part of the process. Learn how to set your ego aside and separate the feedback from your self-worth. As you gain experience, you’ll be able to identify and implement practical, useful feedback and let go of the rest. You’ll find that more experienced designers know what it’s like to be a beginner — they’re excited to see less-experienced designers succeed.
If you’re designing with Webflow, share your work in the Webflow Showcase or request help in the Webflow design forum. As you progress, you’ll want to submit to places like Dribbble and Behance to get more eyes on your work. Not only will you get constructive criticism, you’ll get feedback on what you’re doing well — which always feels great.
Webflow makes web design for beginners accessible
Gone are the days of having to learn complex front-end code to build a website. In the past, you had to depend on a developer to bring your designs to life. Today, you can design, build, and launch complex websites in just a few hours using Webflow.
Knowing a few key concepts, and being able to know the difference between good and bad design will give you the confidence and skills to craft your first website. Webflow frees you up from having to code, opens up your creative bandwidth, and let’s you start designing immediately.
If you’ve got questions before you dive into your first project, post them in the comments below. We're here to help.
Web design is responsible for nearly 95% of a visitor’s first impression of your business, and great design can help you improve sales numbers.
That’s why it’s more important than ever to incorporate modern web design into your marketing strategy.
But what modern web design trends are on the horizon for 2020 — and how can you use them to freshen up your site?
Just keep reading for 10 modern web design trends you can steal for inspiration this year!
Need more modern web design inspiration? Contact WebFX or call us at 888-601-5359!
1. White space
Modern website design is heading back to minimalism with a tide of purposeful white space, much like in print magazines.
Like natural currents, white space helps move visitors through your site pages, flowing from one element to the next — and it creates a visual hierarchy where no element distracts from the whole.
The breathing room white space provides allows viewers’ eyes to rest. It also aids comprehension by defining relationships between page elements.
When two elements are close together with little white space in between, human eyes will view them as one unit. On the other hand, if two elements are further apart, your eyes will view them separately.
White space allows visitors to identify your site’s hierarchy. And they use white space to find the most important information on pages, so knowing how to use white space on your website will help improve your site’s user experience (UX).
Example: Take a look at the white space in Myles Nguyen’s digital portfolio as a web and interaction designer.
See how it leads you right to all the important bits? The amount of white space he leaves his modern site design lets your eyes travel comfortably, giving you lots of places to rest.
This modern web design example redefines minimalism with thoughtful use of white space.
2. Full-page headers
Full-page headers are the way to go for modern web design in 2020.
Web designers can implement header variations, but a popular set up involves adding key text or call-to-action (CTA) buttons to the left of the header with eye-catching images on the right.
This is because readers tend to focus most of their attention on the top-left of your page.
Example:Discord’s website providing a voice and text chat app for gamers is a good example.
Discord exhibits a fun and quirky image to the right of their header and highlights the benefits of their paid service to the left. Their CTA buttons are clearly marked and tell viewers exactly what they need to do to get the added experiences.
Scrolling down, you’ll find that Discord groups site elements into cards, making their information sleek, easy-to-find, and easy-to-read, while keeping the fun element. You can see how websites like this one generate a feeling of playful sophistication.
3. Playful cursors
Modern websites often feature cursors that make viewing pages a new experience.
Implementing playful cursors on your site in 2020 can be as simple as changing the cursor shape or as complex as coding cursor-triggered animations. Either way, your visitors will have a great time engaging with unique cursors.
Example:Paolo Fornasier has an awesome cursor set up on his online portfolio. The cursor displays different photos with a rippling animation and a piano tone when scrolling over the vertically-aligned text of the navigation menu.
Because of the playfulness of the animation, users easily spend a couple of minutes floating their cursor over the navigation menu.
Your cursor doesn’t have to be as complex as this one, but adding a unique element to your cursor is sure to add some spice to your website.
4. Dynamic scrolling
Dynamic scrolling is another modern web design trend for 2020.
One version of dynamic scrolling sets different scrolling speeds for your site’s foreground and background to give visitors a 3D effect.
Example: Take a quick peek at Crypton’s site to see how amusing dynamic scrolling makes a site.
Background video can also incorporate into dynamic scrolling, where the video only plays when users scroll — and with dynamic scrolling, you can trigger animations and make your images appear like magic.
5. Custom illustrations
Illustrations breathe life into your brand and website.
When it comes to illustrations, modern web design for 2020 pulls inspiration from print publishing and other traditional art formats.
Gone are the days of cookie-cutter stock images, with websites incorporating custom illustrations into their modern web design in 2020.
Example: Take a look at the art of renowned illustrator Alice Lee, for example. She’s designed custom illustrations for popular brands like Macy’s and The Washington Post. Here’s one that she created for Airbnb.
Her art has helped spark a growing trend of custom illustrations for brands that look like they came straight out of a storybook.
And with increased coding capabilities, illustrations continue to evolve beyond 2D design.
Even now, digital designs pull in 3D illusions that add another layer of depth to the Internet.
For example:
- The slow change from one color to another with gradient shading
- Digital cut-out styles that mimic designs cut out of layers of paper
- 3D cursor interaction that users can’t help engaging with on your site
6. Grid design
Modern web designers will continue to play with grids in 2020 — and an asymmetric layout likely will become even more popular.
Example:Jingqi Fan’s online portfolio displays how functional an asymmetric layout can be. His site exhibits plenty of white space and a minimalist style that highlights his project images, while the asymmetric design keeps his site fresh, exciting, and engaging.
Many top designers use CSS Grid Layout to bring all the capabilities of print layout to the web.
Also known as Grid, CSS Grid Layout is a 2D grid layout system for Cascading Styles Sheet, a coding language that describes the layout of an HTML site page. Grid allows web designers to create layouts for complex responsive web design more easily and consistently across browsers.
CSS grid layout still has a way to go before it becomes compatible with all interfaces, but it continues to gain momentum as a top web design trend for 2020.
7. Color trends in 2020
Modern website design explores color pallets, and every year there’s a new color for the web. In 2018, it was yellow, 2019, blue, and in 2020, the WGSN trend forecasting community predicts mint.
Overall, Venngage predicts that online color pallets will become more muted in 2020 vs. 2019.
Gradients are a trend continuing from 2019 into 2020, and designers will likely continue exploring the depths to which they can take design with gradients. And because gradients cover a range of colors, they’re perfect for targeting a broad audience.
Psychology of color will also play a significant role in web design trends for 2020. Make sure that you research the psychology behind colors before generating a new color palette for your company. It’s important that your colors match your brand.
Some smaller trends within colors will likely continue from 2019 into 2020. It seems that:
- Soft, cool colors (blues, teals, and greys) = Information and backgrounds
- Bold, warm colors (reds, oranges, even greens) = Calls to action (CTAs)
Example: Check out Trello’s website for project collaboration and organization software.
This website is a great example of incorporating muted color pallets and gradients into a smooth, illustrative design. They even highlight their CTA in a bright color!
8. Bold fonts
Modern web design will play even more with fonts in 2020 vs. 2019. San-serif and serif fonts are as popular as ever, and vintage type is surprisingly making a comeback in branding.
Outlined type and bold type are also showing their faces in many places — from brand names to landing page headings, where the most prominent type trend of all is screen dominating text.
Example: Take a look at how Startup Lab plays with bold type cut out of images. Those give the site a bold, chunky feel, while still coming off as professional.
Fun, right?
See also how they incorporated stenciled letters into their brand name? It ads a bit of a grungy effect, which is nicely contrasted by the bubblegum pink of the page. A bold choice, but they pulled it off well.
Make sure to choose a typeface that matches your brand, your audience, and the goal that you have for your company.
Make sure to also choose an easy-to-read typeface for the body text of any content you have on your site. The readability of your text is one of the essential factors in improving your site’s UX. A simple, unassuming sans-serif like Arial is a great choice.
9. Increased focus on UX/UI
Modern web design focuses on humans in 2019, and it will become even more important in 2020.
Your site’s UX must be smooth, uninterrupted, and engaging in 2020. This means:
- Little clutter (use that white space!)
- Multimedia
Web designers wrap functionality with creativity to create a great UX, leaning into clean design while still being creative and unique in all the right ways. The top web designers throw a bit of untidiness into the white, sterile world of technology, much like a bit of chocolate sauce on the kitchen counter.
Hand in hand with UX, your site’s user interface (UI) must be intuitive in 2020. This means:
- Voice-enabled interfaces
- Image captions
- Video transcriptions
- No distracting elements
- Balanced motion design
Level up your site’s UX/UI by:
- Providing visitors with easy-to-read content and easy-to-use interfaces
- Hitting their aesthetic sweet tooth
It’s also important to note that mobile surfing will get bigger in 2020 vs. 2019. More than 50% of Internet traffic comes from mobile devices, and that number is expected to rise.
For a website to have a successful modern web design in 2020, all of its elements need to translate flawlessly to both desktop and mobile. Mobile responsive animation and videography will become increasingly important for modern web design.
Example: Take a peek at Chobani’s sleek mobile design.
Chobani provides mobile users with a sleek, fully-responsive design that makes full use of white space. Their content is easily scannable with eye-catching, mouth-watering pictures of their products.
With an easy-to-click CTA banner across the bottom of the screen, Chobani sure knows how to pull in their mobile audiences.
Design Trend: How To Use Blurred Images On Your Website Without
10. Impactful, engaging stories
Finally, modern websites in 2020 will shine at telling stories.
For your site to evolve into a genuine modern website, learn how to tell compelling stories in your content and advertising campaigns.
With classy website design and a compelling story, your site is sure to engage and convert your target audience.
Example: Sustainable food brand Zume’s website is a good example of using your website to tell a story.
Zume spotted a problem, set out to fix it, and they’re telling the world how they’re doing it by making meal preparation more efficient one meal at a time.
The site is clean, scannable, and has plenty of images, infographics, and a very engaging video explaining who they are and their goal.
Hungry for more modern web design inspiration?
Here are some of our favorite modern website design examples to inspire you.
Want help transforming your site into modern web design in 2020? We’ve got an award-winning portfolio of web designs for over 1000 businesses!
Design Trend: How To Use Blurred Images On Your Website Page
Give us a ring at 888-601-5359 or contact us online to see how our web design services can turn you into a modern web design guru!