Web Design Process at RubyGarage in 4 Simple Steps

To design websites your users will love, it’s essential to know what every phase of web design entails. A properly structured web design process can not only help you create intuitive products but can improve collaboration between you and your design team. In this blog post, we take you behind the scenes to see the web design process at RubyGarage.

So, the web design process at RubyGarage includes four major phases: project discovery, ideation and information architecture, user interface design, and testing and evaluation after launch. Let’s go deeper into what each phase includes and what deliverables you’ll get. 

Phase 1: Project Discovery

Project Discovery starts with defining the project. At this phase, our design team and business analyst conduct a kick-off meeting and other activities to find existing problems and solutions in your particular niche or industry, define your product’s unique value proposition, and learn about your customer segments. Based on this information, our business analyst creates a Lean Canvas to validate your business idea and avoid risks. 

Evaluating a business idea is vital both for a business owner and development team. It allows to get a full vision of a startup idea, create proper design and development strategies, and deliver a product the market really needs.

Dmytro Valchuk, RubyGarage Business Analyst

At this phase, we also conduct competitor analysis to find any basic and desirable features for your product. Data gathered during this phase helps us set project goals and define the project strategy. After that, our team proceeds to the Design Discovery stage. 

Design Discovery is a service that helps businesses and the design team clearly define project requirements and major technological drivers to achieve particular business goals. The main goal of the Design Discovery stage is to establish key project priorities that will guide the team through the entire design and development life cycle. Design Discovery usually involves the product owner, UX lead, business analyst, and technical lead.

At RubyGarage, we believe that the perfect product design can’t be achieved without preliminary research. That’s why we pay a lot of attention to Design Discovery. We start this process with this stage, getting a deep understanding of your business idea, values, and goals. We conduct a series of workshops within our team to define the main project requirements and create a project plan based on business goals and needs. After we’ve approved a project plan and other documentation with all stakeholders, our team moves to the Analysis & Research stage. At this stage, our business analyst together with a UX designer take the following actions to ensure your product is viable and has a competitive advantage:

  • Analyze project requirements
  • Define the target audience
  • Analyze the market and competitors 
  • Conduct UX research on competitors
  • Research design best practices
Web design process in action
Capturing a moment during research

Why is Design Discovery important?

You might have wondered why you can’t skip this stage and move directly to design. Poor design planning and choices can cost your business much more time and resources than conducting Design Discovery. This stage can prevent some drastic mistakes in the design of the product by:

  • Helping you understand the core problem a design has to solve
  • Aligning project goals and the needs of all stakeholders
  • Facilitating development
  • Building trust within the team
  • Learning major risks and assumptions

A deep understanding of a project’s goals is key to successful design and development. That’s why Design Discovery is a must before deciding on product design solutions.

Ivan Martynenko, RubyGarage Design Lead

What do you get?

By conducting Design Discovery, you get the following deliverables:

  • Established communication plan
  • Defined value chain
  • User personas
  • Feature breakdown list
  • Audit of existing functionality

Phase 2: Ideation, information architecture, and prototyping

What is it?

By this phase, designers are ready to generate ideas and turn them into prototypes. Based on our research findings, we generate as many design ideas as possible to decide on the best one. 

After that, our UX designer creates an Information Architecture (IA). An IA efficiently defines the structure of the product. The main idea behind this process is to arrange product components so users can understand how to use the product at a glance. At this phase, we create navigation labels, build a site map, and define a clear taxonomy of design. Based on the site map, our designer creates wireframes and prototypes. Wireframes are visual guides that show the organization of a website or app pages. A prototype demonstrates the design of the product itself. Wireframes and prototypes are major components of any website, allowing you to see how it’s organized and how it will function

Website design planning session
Brainstorming in action.

Information Architecture is important since it makes complex products clear. Our actionable insights and recommendations at the IA stage help clients meet business and user needs and maintain product consistency.

Valery Nasikan, RubyGarage UI/UX Designer

Why is Information Architecture important?

The importance of Information Architecture can hardly be overstated. Proper IA helps you avoid navigation and usability issues and maintain product consistency. A properly structured and search engine optimized IA guarantees a product’s long-term success. Here are other benefits of IA for businesses:

  • Better knowledge of the context of existing content
  • Lower production costs due to increased content reusability
  • Simplified web design processes
  • More options to expand to new markets

What do you get?

You’ll get the following deliverables from our Information Architecture service:

  • Content inventory
  • Recommended site map
  • User flows
  • Wireframes and prototype

Phase 3: User interface design

What is it?

User interface (UI) design is about creating visual components of a website. Solid UI design is not only about visual appeal; it also has a great impact on user acquisition and retention. Our UI design solutions establish your brand identity, making your product stand out. The process of UI design at RubyGarage looks like this:

  • We start the UI design process by defining the visual direction and layout. Our UI/UX designer decides on a preliminary product structure and considers what guidelines to follow. 
  • After that, we conduct a series of interviews with you to establish a visual language according to your business needs. 
  • Based on this information, our designer will create mockups and any other graphics (icons, banners, illustrations, animations, etc.) required for the visual language. The UI designer will also create a reference guide and comprehensive style for the project, which allows us to increase the speed of development and maintain visual consistency.
UI design is one of the key design process steps
Just a glimpse of how we create our Dribbble shots

Why is UI design important?

User interface design is important for any digital product since the UI draws visitors’ attention and keeps them engaged with your website or app. Besides being aesthetically pleasing, a great UI should be responsive and efficient. 

If a product has an attractive interface, it has a much better chance to turn visitors into customers. At RubyGarage, we believe the perfect UI is a blend of information architecture, visual design, and interaction design. 

What do you get?

At the UI design phase, we deliver the following:

  • Moodboard
  • Mockups for all resolutions 
  • Interactive prototypes
  • UI assets (icons, banners, patterns)
  • Illustrations
  • Animation and interaction assets
  • Design specification (style guide, UI kit)

Want to make your product’s design stand out? Check out our web design workflow and services.

Phase 4: Testing and evaluation

At the last phase of the web design process, we pay maximum attention to various tests. When the whole design of the product is ready, that means it’s time to make sure the product works as intended and properly. 

At this phase, a UI/UX designer and QA specialist test the product to find any inconsistencies or bugs and provide feedback. In addition, we conduct user testing and gather data from these tests to learn how users interact with the product. If there are any inconsistencies in user behavior, we use this data to start new iterations and make the required fixes. 

Our website design process
Our QA Engineers and UX Designers work closely to deliver the products that work as expected

Summing up

Now you know what’s under the hood of our outstanding design solutions. Our approach, with thorough preliminary research and continuous testing, allows us to build complex products that cover all business and user needs. 

Skills Every Successful Web Designer Needs — And How To Learn Them

If you’re a beginner in tech, it can be tough to figure out where to start. There are so many paths available to you — from web development to web design to digital marketing, and every specialization under the sun. Web design is often a great place to dive in if you’re new to the scene, but the question is: how to become a web designer?

Like many roles in tech, becoming a web designer requires both the creative and analytical sides of your mind. Web design is a versatile career with lots of opportunities to niche down or course-correct once you discover exactly what you love.

How to Learn Web Design: What Are The Tech Skills You Need to Know to Become a Web Designer?

First, let’s go over the technical side of becoming a web designer.

1. VISUAL DESIGN

What Does a Web Designer Do?

It might seem obvious that you need design knowledge to be a web designer, but what exactly does that mean? Well, web design is actually a subset of the larger field of visual design, so it makes sense to start there.

At Skillcrush, we teach visual design because it focuses on digital products and sets you up to succeed across design careers, including web design. When you learn visual design, you learn the fundamental design principles you need to be a web designer.

📌 Related: What is Visual Design? Graphic Design, UI Design, Web Design — What’s the Difference?

Design principles are what determine the look and feel of a site, and are one of the most important concepts for web designers to know. They can range from proportions, to typography, to grid systems, to color theory. Learning visual design means creating mood boards and type hierarchy and experimenting with web fonts and color palettes.

2. UX

UX stands for user experience, or how people feel (calm, frustrated, etc.) when they use a website. Above all else, UX design is about approaching your designs from a user-friendly and user-first perspective — how can you produce a website design that helps them get exactly what they need?

To do that, you’ll research your users and create “personas” (profiles of imaginary ideal users). You’ll lay out the pages and content with a site map. You’ll figure out the path users take on your site in user flows. For example, do they always click straight through to social media? Or are they just looking for contact information? You’ll use responsive design to account for different screen sizes and improve functionality for all users, regardless of device.

As a UX designer, you’ll build wireframes and use prototyping and templates to sketch out the key parts of each webpage, including the user interface. All of these components are essential to practicing user experience design.

Note: Skillcrush also has a UX add-on course that you can purchase with our Break Into Tech course.

3. GRAPHIC DESIGN AND WEB DESIGN SOFTWARE

Like any craftsperson, as a web designer, to do your work, you need the right tools. Knowing your way around web design and graphic design industry standards will be helpful in every case and critical in many. While designing a website can be done right in a web browser, tools like Adobe Photoshop, Adobe Illustrator, and Sketch are used in graphic design and web design for important job functions: creating mockups, designing assets (think logos and images), and of course, modifying and enhancing photos.

You should learn how to use them (although, if you’re just getting started, consider trying out a few free Adobe Photoshop alternatives instead).

4. HTML

Wait, to become a web designer, do you need to know how to code? You might not have imagined that web designers would need to know any code, but some amount of technical skills is necessary — a little familiarity with HTML and CSS is expected for most design jobs nowadays. HTML stands for HyperText Markup Language, which is the programming language used to put content on a web page and give it structure on the front end. That means it’s how you turn a bunch of words into headlines, paragraphs, and footers. And it’s also how you get the “cool” content like photos, videos, and graphics on a website.

5. CSS

And then there’s HTML’s partner, CSS or Cascading Style Sheets. CSS is a coding language that tells browsers how to format and style HTML for a web page. In other words, it’s what makes all the text and other content look good and have a design. With CSS, you can adjust the colors, change the fonts, or add a stunning background — and so much more! This is where your eye for design really shines and how you can put your creative stamp on every site you create.

Pro tip: If you want to start learning web design for free, HTML & CSS are great skills to start with. We’ve got our free coding camp if you’re ready right here and now. Otherwise, take a look at our roundup of free resources for learning to code.

📌 Related: These Are the Jobs You Can Get with Just HTML and CSS

BONUS! JAVASCRIPT

While you can code up your designs using just HTML and CSS, if you can also program using JavaScript, you’ll have a huge leg up against the competition. JavaScript, which is both a front end and back end programming language, allows you to take static elements on your site and make them interactive. With JavaScript, you can make Twitter feeds that update automatically, websites that look different when you’re logged in, image sliders, and more!

(Back to top)

Soft Skills Every Web Designer Needs

Now that you have the design and tech parts down, you only need to add some soft skills to keep yourself organized and effective in your web design work. These are the skills most web designers swear by, so save yourself some time by learning them now rather than later.

6. TIME MANAGEMENT

Whether you’re interested in learning web design to go freelance or to work for a company, you’ll need to stay on top of your schedule and your projects to be a successful web designer. This can mean getting to know productivity apps like task lists or calendars or, especially if you’re in a large organization, learning project tracking tools like Trello or JIRA. Whatever the tools, mastering the art of prioritizing and tracking your work will be essential for your success (and sanity!) in the busy world of web design.

7. COMMUNICATION SKILLS

Staying in touch and getting your point across are also must-have skills for a designer. You can’t make a living from building websites without great communication. You’ll need to keep clients up-to-date on the progress of their projects, plus pitch ideas and explain your creations. You might even be called on to do some copywriting or editing for sites, especially if you’re running your own one person shop. So buckle down on your writing and your presentation skills, and you’ll be sure to get your point across with clients and coworkers.

8. SEO / DIGITAL MARKETING / SOCIAL MEDIA

The skillset of SEO (search engine optimization), digital marketing, and social media might seem like it’s meant more for a marketer or salesperson than web designers. But, since the Internet is the way so many companies sell today, you should wrap your head around them too. Even knowing the basics of each and keeping them in mind for both clients and your own sites will get you a long way in your web designer journey.

9. BUSINESS / CLIENT MANAGEMENT

And, as an employee or as a freelancer, understanding the bottom line will help you make sure you or your company is profitable and sustainable. You don’t have to go back for your MBA, but you should have an idea about the goals and finances of your employer or your own business so you can use them to guide your work. And, if you’re designing directly for clients, you should have a plan for making sure that your cash flow and project backlog are both healthy and doable in the short and long term.

(Back to top)

How to Learn Web Design Online

Working with a Website Designer: 5 Tips for Effectively Collaborating

As you can see, there’s nothing mysterious or mind-blowing about the skills you need to be a web designer, but then there is the question of where and how to learn them. A foundation in the tech side and a good handle on the organizational parts will both get you going and be there for you as you build your knowledge and your career in web design.

You can learn ALL the skills we talked about above in Skillcrush’s Break Into Tech program, a comprehensive, entirely online course of study designed to take you from zero to working in web development or as a web designer in months. It includes fast tracks for getting you into your dream career quickly, over a dozen courses, plus optional course add-ons to help you niche down and find your path in tech.

We’ve also got a more specific Visual Designer course that covers everything from color theory and typography to becoming a Photoshop master. It’s the perfect digital course for creative types obsessed with colors, fonts, and all things visual.

Our courses are fully online and include 24/7 access to materials, as well as lots of support from friendly instructors and your fellow budding web designers in the online student community. You’ll even learn how to find, land, and complete your first paying web design project within months

Pro tip: You don’t need any design or coding experience to get started for any of our courses. So, join us now to get that exciting and fascinating career in web design you’ve been dreaming of.

12 essential tips for improving your web design in 2021

12 essential tips for improving your web design in 2021

How to improve my website

  1. Have a Plan
  2. Remove stocky images and ambiguous terminology
  3. Include social share and follow buttons
  4. Implement calls-to-action
  5. Use the right imagery that works for your audience
  6. Create a navigation that guides users through your site
  7. Let your visitors scroll on your homepage
  8. Don’t be afraid of white space
  9. Stay mobile friendly
  10. Focus on SEO
  11. Never stop testing
  12. Find and fix 404s
  13. Create unique offerings
  14. Create content for your persona

Within five seconds of landing on your website, can your visitors determine what your company does? Could users easily navigate to the blog if they need to? Is the layout of your pricing easy to understand? Does your website have a low bounce rate? 

If you’re finding yourself answering ‘no’ to these questions, it might be time to take a hard look at the way you’ve been designing and optimizing your website.

A website truly excels when it has a design that feeds into your website’s user experience, functionality, and appropriately complements your content.

It can be super easy to neglect these things, thinking these updates are the lowest thing to worry about on your totem pole of website priorities, but a successful website that has both high-performing content and an exceptional user experience needs to have balance. 

The last thing you want is to be spending time writing some amazing content on your blog or service pages, only for it to go unnoticed due to design flaws, navigation issues, or confusing layouts, or missed conversion opportunities. 

But the umbrella of website user experience has a lot under it, and it can be challenging to understand all that’s under it while figuring out the most important things to tackle.

So, what do you need to know to start improving your web design?

To answer that, here are 12 website tips to ensure that you’re going in the right direction in your redesign and are assuring you aren’t turning visitors away.

1. Have a plan

Now that you’ve acknowledged that your site likely needs some improvements, it’s time to work your way backward and create a plan detailing how you’ll tackle them. 

Start by mapping out your customer journey from the first time someone visits your website to the moment they become a customer.

When doing this, think about which pages are they going to view, what content are they going to read, and what offers are they going to convert on. Understanding this will help you design a site that actually helps nurture leads through the sales funnel.

I’ve always liked Leadfeeder’s customer journey map as a great example. You don’t need to make it as graphical as they did, but it gets the point across. It illustrates what users do when visiting their website and what commonalities occur between those who do and do not become customers. 

If you are struggling to compile this data, or, lack a CRM that would make researching this easier, you can always interview your customers. Ask if you could have 15-30 minutes of their time to ask them a few questions (you can even compensate them with a $10 Starbucks or Amazon gift card). Interview as many people as you can, but no need to go overboard. 

Then, use this data to map out your strategy. This will help you identify the key touch points of your website or the areas your users interact with. 

Throughout these touch points, you should be able to map out the emotion, thoughts, goals, pain points, and opportunities each touchpoint needs to evoke.

Answering these questions will help you direct your design. Is their imagery that will help best address these areas in the way you want? What about a particular color palette? Getting started on your customer journey map will help create answers to these questions and better reinforce your design. 

2. Remove distractions and reduce friction

Certain elements on your website are going to detract from the value and message you’re trying to convey. Complicated animations, content that’s too long, and “stocky” website images are just a few examples. 

With an audience that only has an attention span of eight seconds, you need to make it abundantly clear what your user will learn on the page they’re viewing and your design must not detract from this. 

This starts with making sure you have consistent brand guidelines you can work off of. 

This should detail your font styles, colors, imagery, iconography, and logo usage. Without this, it’s easy for brands to struggle when designing pages. You’ll likely start to see arbitrary colors and varying font styles and sizes used, which in turn, can distract from your message or create visual confusion for people trying to convert. 

It’s also important to avoid too many on-page animations or interactions. If you’re scrolling through a page and see every button pulsing or a section of icons each with their own animation, it can  feel overwhelming and distract them from reading what’s on the page.

Let’s take a look at the website below as an example. Note, since I’m treating this as more of a critique, I’m removing the brand’s logo from the image so they can remain more anonymous.

remove distraction and friction 1

When looking at this site, the first thing I noticed was the colors. 

For one thing, the way they are used makes it hard for the user to decide where their eye is supposed to go. Should it be one of the two red buttons? What about the hello bar? Or maybe the top of the navigation? 

You need to figure out where you want users’ attention to go when they arrive on the page and what order it needs to flow naturally. This current color arrangement creates friction in accomplishing this.

Second, there are some areas of inconsistent spacing. The hanger in the hello bar (‘you!’) creates a second line that could easily be fixed if the width of the container around the text was increased. The H1 also isn’t exactly vertically centered in the white area, drawing your eye to “issue” rather than the bulk of the message. 

In the grey section below the header, they lead with a button (which doesn’t have much context) and feels sandwiched on top of an image. As a user, I’m left to wonder if it’s supposed to have space below, or, if it’s supposed to directly relate to the image. Did the site just load incorrectly? This internal debate creates friction and confusion.

Let’s look at a page that offers a better user experience and abides by brand guidelines.

Remove distractions and reduce friction 2

Above we have Communication Square, another company in the IT space. At first glance, this website utilizes a much cleaner look and feel with less bold colors and more white space. 

When it comes to colors, I like how Communication Square has two buttons colors, one for the lower priority top or middle-of-the-funnel actions (blue) and one for the bottom-of-the-funnel action (orange). As a result, my eye immediately goes to the orange, the more important action they want me to take.

Their fonts also feel much more cohesive.There looks to only be one font family, used in either a light, medium, or bolded weight. This creates uniformity and makes everything work together nicely.  

The hero image overall offers little room for distraction. The fact that the hero image itself isn’t too detailed and is masked with a white overlay allows the content to stand out, rather than it disappearing into the image. 

Details like this really help make or break your overall website experience and help your users better understand what you want them to do, leaving less room for confusion.

3. Add social proof

If you shop like most people when you’re on Amazon, chances are you gravitate towards products that contain mostly four to five-star reviews from people who wrote out their experiences with a product.

In looking at these reviews, we gain trust in the product that it will do what it promises and we need it to do, which in turn, pushes us to purchase it. 

The same effect is applied to your product or service and website. If users see impactful testimonials from real people, studies show your prospects are 58% more likely to buy your product.

But how should your testimonials visually look so they effectively create that trust with your users when they see them?

Well, there are a few strategies you can take. But first, you need to think about what format of testimonial you want, text or video. Historically, video testimonials have been found to be the best. This is because the medium naturally keeps your user’s attention for longer and also builds a stronger human connection being able to hear voices and see faces of real people. 

You also have the option of text testimonials, however, which, when designed and incorporated properly, will still help build trust with your users. 

Upland Adestra is an enterprise email and marketing automation software company in the United Kingdom. They have four videos on their testimonial page that each are contained in their own sections. 

video social proof

Rather than arbitrarily place all the videos next to each other, Upland separated them and accompanied them with a header and sentence detailing the result or benefit the client had working with them. Now, users have context to what they will hear about in the videos. 

I also like how a few of the videos show thumbnails of someone talking, which visually reassures the user that they will likely be hearing from the client themselves, as opposed to watching a text-based video.  

If you’re aren’t yet equipped with video testimonials like Upland, then you’ll likely have a case studies page, where you can talk in detail about everything you did to help your clients. 

Zenefits has done a great job of this on their website.

zenefits case studies

Each card is designed with an image that showcases members of that company, which is way more trustworthy than if they were to use stock photos, or just a picture of their logo. 

And because they have five pages of testimonials, they’ve added a filter at the top of the page that allows users to segment what types of industries or solutions to look for. Now, users can find the types of case studies they want faster. 

zenefits filtering

Finally, if your site only has text testimonials without case studies, there are aspects you need to be mindful about when designing them out. 

For instance, you can’t just put a set of text testimonials and a name alone. It’s less likely these will be taken as truth since it will leave users wondering what company they work for, what their job title is, and visibly what this person looks like (for visual confirmation that this person is likely real). 

Take a look at this testimonial section on Drift’s website. 

drift testimonials

In their case, they use tweeted reviews, but you can easily supplement this layout with something not using a Twitter feed.

Regardless of them coming from Twitter, this section gets a bunch of things right. One, there’s a large number of reviews that can be seen at once thanks to the interest-styled layout. 

Secondly, the testimonials include photos and people/company names, making the reviews are that much more legitimate.   

When it comes to places to include testimonials on your website, I always recommend your homepage, service pages, and/or on a dedicated testimonial page that you include in your navigation. Each of these pages is the best touchpoint for people who are either learning about your company and considering buying. 

So long as they are genuine, testimonials will better your website’s experience and build trust with your prospects before they become clients.

4. Implement calls-to-action

Once your visitors land on your site (likely through the blog or home page), you need to guide them to places on your website that will help nurture them to conversion. People are lazy, so make this easy for them. Point them in the right direction so they don’t have to struggle to find what they are looking for. 

One of the best ways to improve your web design with this in mind to use strategically placed call-to-actions in areas such as the top right of your navigation, below sections that require action, and at the bottom of your website pages. 

But don’t lose sight of your buyer’s journey. The easy thing to do on your website is to inundate users with the most bottom-of-the-funnel (BOFU) call-to-action wherever they go, but if someone is not ready to buy, then they likely will take no action at all.

Instead, you should meet your user where they are based on the page they’re viewing. 

For example, if they’re on a website, learning about a material used to build a custom closet, this person is more likely still educating themselves and becoming aware of their problem. Rather than smacking them with a ‘contact us’ call-to-action, give them one to view a comprehensive guide on custom closet building materials. They’ll be more likely to convert as it’s their current concern.

Take a look at a real-life example of this.

The title of it is ‘8 Obvious Reasons You Need a Website Redesign (But Are Still Ignoring)’. Readers who land on this article are likely thinking about a website redesign and are trying to confirm if it’s the best decision for them. So, it only makes sense to show them a call-to-action that will help them learn more about it. 

The offer we present to them is an ultimate guide to redesigning your website, where they can hopefully find the answers to almost all they are looking for in one place. 

cta

These types of offers also have the benefit of building trust with your users. If these work to educate them, they will begin seeing your company as a thought leader, leading them to feel more comfortable researching your services.

5. Use the right stock images

We always recommend using original photography on your website, but if that’s not an option, there are techniques you can use to help pick out the right type of stock photo

While stock photos save you the time of producing your own imagery, many websites have imagery that falls into cliche. You’ll also find a lot of other websites may be showcasing the same imagery, which certainly doesn’t help for your credibility. 

Users will “subconsciously project their negative experiences onto these stock photos, reducing trust and adding friction to the process” of converting. 

So, when choosing stock photos, try to stay away from these cheesy images. These are the photos of people high-fiving with over-exaggerated smiles, groups looking at the camera, executives in superhero costumes, groups of suited people jumping in the air.

When was the last time you saw people in these scenarios in real life?  

Look instead for photos that depict realistic scenes in well-lit environments. This could be people in an office talking over a meeting table in business casual clothing, over the shoulder shots of people typing on a laptop, people drawing on a whiteboard in an open room. These are the types of scenes others will start to recognize as legitimate. Look for candid images and ones in real-life settings rather than studios. 

So, rather than using photos like this:

bad stock image-min
Bad Stock Photo-min
bad stock photo 2-min

Which feel unrealistic for the reasons mentioned above, try going to photos like this:

good stock image 3
good stock image
Good stock image 2

Once you find photos like this that you like, you should run them through TinEye to get an idea of how many people are using that photo on their website. If the numbers are in the thousands, it might be best to use a more uncommon photo. 

tineye

This will aid in bringing more realism to your brand and making sure the images match who you are and what your content is explaining.

You can also check out this article for some awesome stock photo website suggestions if you find yourself struggling with getting more realistic photography on your website. 

Being more mindful with your photography will help better represent your brand and how you want others to perceive it. 

6. Organized navigation

When designing your website, navigation is key. It’s essentially the map that displays the core places users can visit. It’s how users can easily dive deeper into areas such as your services, products, blog, etc. 

There’s nothing worse than a site with a disorganized or confusing navigation interface. Poor design practices such as overstuffing your navigation, using vague or confusing hypertext, and lack or organization can make it hard for your visitors to find where they want to go.

If users cannot find what they’re looking for, they have no reason to stay on your site. Instead, they will certainly bounce and find a competitor that offers a better user experience. 

When improving your website’s navigation, it’s important to ensure that your visitors can easily find what they’re looking for. This would include streamlined content, navigation hierarchy, and responsive design, so the experience doesn’t drastically change on mobile.

Take Zendesk’s navigation for example, which includes the most important pieces of information you’d likely want to visit on their website. Products, pricing (this is a must), services, and resources. 

zendesk navigation

Each nav item has ample space so it’s clear where the separation is. 

In some cases, like in the image above, the menu item will even have a descriptive line to provide more context to the purpose of that page. The hover effect also makes it clear to the user that these are links that will result in them going to another page. 

With one click, users can get to these places with ease, so make sure you’re enacting a similar strategy (without overloading your navigation).

Clean and specifically organized navigations like this let the user know that you want them to have an easy time moving around your website and that there’s nothing to hide. As a result, your users are more likely to visit higher numbers of pages during their session, increasing their time spent on your website. 

7. Let your visitors scroll on your homepage

There was a time where we were wary about making our website pages too long, especially your homepage. This was out of fear of users not scrolling, so it forced folks to try and cram what they could into the most common screen size people view their website with. 

But those days are long gone. In a 2018 study by the Nielsen Norman Group, 74% of the viewing time on a website page was spent in the first two screenfuls, up to 2160px horizontally. So there’s no need to be afraid of creating a more robust below-the-fold experience. 

Use your homepage real estate to your advantage. 

A good rule-of-thumb is to include three to five sections that help direct new and recurring users to the key areas of your site.

What should these sections be? This list could go on forever, but a quick hit-list of some of the more crucial elements includes:

Each nav item has ample space so it’s clear where the separation is. 

In some cases, like in the image above, the menu item will even have a descriptive line to provide more context to the purpose of that page. The hover effect also makes it clear to the user that these are links that will result in them going to another page. 

With one click, users can get to these places with ease, so make sure you’re enacting a similar strategy (without overloading your navigation).

Clean and specifically organized navigations like this let the user know that you want them to have an easy time moving around your website and that there’s nothing to hide. As a result, your users are more likely to visit higher numbers of pages during their session, increasing their time spent on your website. 

7. Let your visitors scroll on your homepage

There was a time where we were wary about making our website pages too long, especially your homepage. This was out of fear of users not scrolling, so it forced folks to try and cram what they could into the most common screen size people view their website with. 

But those days are long gone. In a 2018 study by the Nielsen Norman Group, 74% of the viewing time on a website page was spent in the first two screenfuls, up to 2160px horizontally. So there’s no need to be afraid of creating a more robust below-the-fold experience. 

Use your homepage real estate to your advantage. 

A good rule-of-thumb is to include three to five sections that help direct new and recurring users to the key areas of your site.

What should these sections be? This list could go on forever, but a quick hit-list of some of the more crucial elements includes:

Zenefits does a killer job at hitting many of these points.

Zenefits 2

heir homepage offers an experience that walks you through a brief overview of the tool, features of their platform, testimonials, and ending with a call-to-action for a demo. 

By the end of the page, users have a great well-rounded idea of what Zenefits can do for them and how clients have liked using the platform. 

If you want to go deeper into the anatomy of the best homepage, check out this awesome infographic or this comprehensive article revealing other important homepage elements not mentioned here.

8. Don’t be afraid of white space

Whitespace is an essential design element that helps you break up the page and increase readability. Also called “negative space,” white space refers to the areas around elements on a page that are empty and lacking content or visual items.

Whitespace also plays an important role in the design process and positioning of website elements. While more whitespace can dictate what sections are separate and guide the eye, less whitespace can dictate which elements are supposed to be related to one another due to their proximity. 

Vidyard has consistently done a great job with this. Their sections are always separated generously so they fit nicely within your viewport, without too much crowding from any sections above or below.  

vidyard whitespace

This enables users to focus on each part of a website page piece by piece and instantly lets them know where each section begins and ends. This can do wonders for helping guide your user’s eye to important information such as a call-to-action or value proposition. 

If you need further examples of the website doing this well, check out these all-stars to help aid you in your improvements.

9. Mobile optimization is a must

These days, it is critical that you take the time to optimize your site for mobile.

If you don’t already know, 80% of internet users own a smartphone, and “Google says 61% of users are unlikely to return to a mobile site they had trouble accessing and 40% visit a competitor’s site instead.”

I’d be a little concerned if I were you.

But it’s more than just being responsive visually. It’s a necessity to tailor your site to fit the needs and wants of your visitors. Ask yourself, why would someone access my site on mobile? What things would they look for? Does my experience currently allow them to do those things easily?

Using Chili’s website as an example, you can visibly see how the desktop and mobile websites are extremely similar. So when users go back and forth between the two for orders over time, there are similarities between the two that make using the website familiar.

They also make it easy to do the core thing on their website, ordering food. The button needed for this is always on screen on the mobile website, so you can order whenever you’re ready without having to go to an entirely different page.

chilis mobile

If your website is lagging on its mobile optimization, check out some of these awesome mobile websites to understand how they have created seamless mobile experiences for their users.

10. Make pricing easy to find

Tell me if this situation sounds familiar to you.

You’re currently looking for a new SaaS product online to solve an issue you’re having. For this story, let’s say a project management tool.

You’ve spent the past hour vetting a couple of pieces of software, and think you’ve finally found one that looks promising. With that in mind, you now try to find pricing.

So you click on the pricing page only to arrive at a page that looks something like this:

pricing table without pricing

At this point, you’re likely a little frustrated. You might even be wondering if this means it’s too expensive. What are they trying to hide anyway? Why bother calling and asking? 

So now you decide to leave the site and look at the competitors. 

If your site follows a similar pattern, or worse, lacks a pricing page at all, you’re going to find your users following this same mindset.

I can’t stress enough how important including pricing is on your website. Including it “enables visitors to complete their research (as any modern buyer wants) and ultimately, qualify or disqualify themselves, preventing your sales team from wasting time on someone who isn’t a good match.”

You may worry that competitors will just try to undercut you, or that your pricing is too complicated to show on your website, but in reality, you should worry more about properly educating your prospects on why your pricing is the way it is and the value you offer. 

If someone’s simply looking for the cheapest price possible, regardless, they are likely not a good fit for you anyway.

With this in mind, let’s look at a website that does make pricing stand out on their website. Trello makes it extremely easy for users to figure out what pricing tier they best fit in to and what it will cost the user. 

trello pricing page

The pricing table has the features included below each tier, so comparing each is as simple as reading left to right. The green buttons utilized in the last to tiers also help draw the eye to those being more desirable options. 

To get started on a great pricing strategy, take a look at these sure-fire tips to help guide you. 

11. Create a self-selection experience

As someone who finds themselves overwhelmed when it comes to shopping on e-commerce websites, I can’t tell you how happy I am when I find tools that can help select the right things for me.

These tools, called self-selection tools, bring users through a series of questions to arrive at a specific type of result. These results could be a customized quote, product, or an answer to a very high level question (ex. ‘What is my personality type?’).   

Tools like this can make it immensely easier for people to understand what the best products or services are for them without them having to navigate through your website to find the answer.

My favorite, seemingly simple tool is Amazon’s product recommendation selector below certain items on the site. Whenever you thumbs up or down on anything shown, the tool instantly changes other products shown in the feed that it believes are closer to what you’re looking for. 

amazon recommendationsNeedless to say, this made finding the perfect vase a lot easier for me!

A less intimidating recommendation tool to checkout is IMPACT client Yale Appliance’s product configurator for the best range oven. This essentially just matches whatever inputs you select and filters through products.

pro range configuator

Using detailed iconography, users are able to select which options work best for their situation which results in them being served the best product. This saves users countless hours searching the website and the trouble of calling a sales representative.

Also, the quicker you get what your prospects to what they are looking for, the quicker they might be to purchase it. 

While this might be more of a later project, it’s a worthwhile tool that will ultimately help differentiate your company from your competitors and offer a unique experience in your business vertical.

12. Test and iterate

Your website needs to be a living, evolving piece of your company, not static. There is likely always room for improvement. Improving certain areas of your website can aid in improving conversions, time on page, and pages per session, but knowing what solution might work best in improving your website is the tough part. 

This is where running A/B tests comes in. Taking two variations of a page and testing them against each other can reveal if certain areas are creating issues for your users.  

In some cases, your pages may be performing quite well, but contain outdated information. A/B testing the page can show you how much of an effect the page’s content has on session duration or possibly conversions.

In other cases, you may want to see if design updates could affect a page’s performance. Simple changes such as button colors, headers, or refining copy could make incredible differences in conversion rate.  

All that said, other than taking a set-it-and-forget-it approach, especially if you don’t know what to change, you can use tools to create A/B tests for them, multivariate tests, or even set up heat maps to see what users are doing. 

Each test can reveal a variety of data that identifies why users are interacting with pages in particular ways.

From here, I would monitor these tests and tools on a weekly, or bi-weekly basis to see how changes you’ve made are affecting your page performance. Checking frequently also allows you to adjust sooner rather than later if things are headed in the wrong direction. 

I recommend checking out tools such as Lucky Orange or Hotjar for heat mapping, and A/B test tools like VWOOmniconvert, or A/B Tasty.

Key takeaways

Taking the time to implement these tips on your website can bring dramatic change that can help improve the performance, experience, and customer conversion rates of your website, but once you get some of these tips in place, you may be thinking that the greater project at hand is to refresh your website with a redesign. 

Although this is certainly the more intimidating project to concur, you’re not alone in this thought. So, whether you’re not sure if a website redesign is something you should do, or, you just want to get an idea of what it entails, I recommend downloading this ultimate guide to keep in your back pocket

This way, you’ll be that much more ahead of the game when a website redesign conversation comes up in your organization and you’ll feel more confident with what needs to be done. 

Contact us for more information.

Beginner’s Guide: How to Learn Web Designing at Home

HTML Responsive Web Design

Web design is quite complex and daunting, but with the development of the Internet and technology, web design overflow than ever before nowadays. Hence, becoming a web designer has become the main trend among young designers. Today, I will guide you about how to learn web design at home briefly.

1. First, you should know about what is web design?

Visual+interaction=web design core

Many young designers often misunderstand the concept of web design, web design is about design, not about coding and front-end development. Of course, it would be great if you know some coding language (HTML, CSS, Java), but you can’t get yourself deep into front-end development, that’s not the core of web design. Web design is to solve the communication problems between users and web page information.

2. 9 web design skills young designer should master

Master the basic rules of visual design

To learn the layout design

To learn the color principles

To master the basic knowledge of interaction design

Have to master the PS and other web UI mockup tool

Understand the basic coding language(HTML, CSS)

Familiar with the company product and the user group

At least, master one of the front-end coding edit software, I would like to recommend the Dreamweaver

Know about the SEO

3. Five elements of web design

Layout, color, graphics, font, content

4. How to learn web design at home

One post can’t include all the information, so here I’m going to introduce some learning websites to guide you step and step.

Web design learning books:

1. HTML and CSS: Design and Build Websites

2. Learning Web Design: A Beginner’s Guide

3. Don’t Make Me Think: A Common Sense Approach to Web Usability

4. Learning How to Make Web Pages Functional

5. Designing with Web Standards

Web design online learning courses:

Treehouse

Lynda

Udemy

Web design blogs:

1. Smashing Magazine

2. Mockplus blog

3. Webdesigner Depot

4. Webdesignledger

5. WEB DESIGN LIBRARY

6. Hacking UI

7. 1stwebdesigner

8. WEBAPPERS

Coding:

1. W3Schools

To learn the basic coding language, it includes HTML and CSS with simple language to teach you.

2. Google Code University

Another coding learning website which is created by a Google developer.

3. Code Avengers

I like this learning website because it’s just like a big adventure that allows you to participate in their coding challenge program and bug hunting.

HTML and CSS:

30 Days to Learn HTML and CSS

A Beginner’s Guide to HTML & CSS

Don’t Fear the Internet

Conclusion:

No matter what position you are in, learning is the only way to achieve your goal. If you want to know how to learn web design at home, above is all you have to know. Stop wasting your time on Facebook or Twitter to look for answers. You can build your design circle in there, but you can’t be a web designer by tooling around. Wish you good luck. Contact us for more information.

5 Web Design Tips for an Outstanding Site

This post was last updated on May 5, 2020.

When it comes to website design, there are so many different styles and directions in which your website can go: it can be anywhere from classy to minimalistic, from playful and vibrant to sleek and modern.

While your final look-and-feel should exude your personal style, line of work, and brand identity, there are a few ground rules that are always applicable.

Great web design feeds into your user experience and functionality, while being easy to understand at first glance. Below we’ve gathered five simple website design tips to help make your site effective and compelling:

Web design tips for an outstanding website

  1. Keep your homepage minimalistic and free of clutter
  2. Design with visual hierarchy in mind
  3. Create easy to read website content
  4. Ensure your site is easy to navigate
  5. Stay mobile friendly

01. Keep your homepage minimalistic and free of clutter

Your website’s homepage should communicate your core message instantaneously. After all, we rarely read every word on a website. Instead, we quickly scan the page, picking out key words, sentences and images. With these known behaviors in mind, it’s better to appeal to emotions rather than word count.

The less site visitors have to read, click on, or remember, the better they’ll be able to process and evaluate your content. By designing for decreasing attention spans, it’s more likely that users will do what you intend them to do.

When learning how to design a website, these simple website design tips will help you break up your content and make for a presentable and inviting homepage design:

  • Keep important content above the fold: Visitors should understand what your website is all about as soon as possible, without having to scroll or click anywhere.
  • Space out your content: Employ whitespace in between elements. By leaving some areas blank, you’ll give the design a much more spacious, well-balanced feel. As for your text, write in bite-sized, legible paragraphs.
  • Add imagery: High-quality media features such as beautiful photographs, vector art or icons, will do wonders as alternative ways to communicate your point.
  • Include a call-to-action: From making a purchase to signing up, encourage site visitors to perform the action you intended by placing a call-to-action (CTA) button on your site’s homepage.

02. Design with visual hierarchy in mind

Hierarchy is an important principle of design that helps display your content in a clear and effective manner. Through the correct use of hierarchy, you’ll be able to lead site visitors’ attention to certain page elements in order of priority, starting with the most significant piece.

The main components of visual hierarchy are:

  • Size and weight: Highlight your top assets, such as your business name and logo, by making them larger and more visually prominent. Readers tend to naturally gravitate towards large and bold titles first, and only then move on to smaller paragraph text.
  • Element placement: Use the right website layout to steer your visitors’ eyes in the right direction. For instance, you can place an important call-to-action button at the very center of the screen, or position your logo at the header.

Once you establish a clear hierarchy for your information, readers can’t help but unconsciously follow the breadcrumbs you have left for them. Then, apply color, contrast, and spacing for further accentuation, remaining mindful of what is drawing the most attention and making sure that it’s always intentional.

Some powerful web design elements to help you achieve a strong visual hierarchy are strips or grid layouts, such as that of the Wix Pro Gallery. For more ideas and inspiration, check out our designer-made website templates.

10 Things Every Web Designer Just Starting Out Should Know

There are many aspects of creating a website design. Web designers often have to play multiple roles and be very knowledgeable about building effective and usable site layouts. Most of the lessons you’ll learn in web design come from work experience; learning is an iterative process and there is no better way to gain knowledge than to make mistakes (and then and learning from them).

In this article, we discuss  10 essential and general tips that every novice web designer should know.

1. Optimize Web Graphics for Better Page Load Times

Learn how to optimize your web graphics by selecting the proper format and making sure that it’s as small as it can possibly be. Even though people are advancing to broadband connections, there are still quite a few who use dial-up internet connections. Additionally, with the emergence of mobile device technologies that don’t necessarily have broadband-like speeds, having slow page load times due to image file sizes can turn users off.

Here is a general rule of thumb for picking the right file format: images that have solid colors are best saved as PNGs and GIFs, while images with continuous colors (such as photographs) are best saved as JPGs.

Optimize Web Graphics for Better Page Load Times

There are plenty of tools available at your disposal that will help you further optimize your images and lower their file sizes, check out this list of tools for optimizing your images.

By limiting the number of images you use to the bare minimum, being smart about using images and reducing file sizes as best as you can, you will significantly cut down page response times of a web page and improve your web page performance.

2. Keep it Clean and Simple

A good web design is not just one that looks visually appealing, but also one that is user-friendly. A clean and simple web design typically ends up being a high-usability web design that is not confusing to interact with.

By having too many site features and components on a page, you risk the chance of distracting website viewers from the purpose of the website. Make sure each page element has a purpose and ask yourself the following questions:

  • Does the design really need this?
  • What does this element do and how does it help the user?
  • If I remove this element all of a sudden, will most people want it back?
  • How does this element tie into the goalmessage, and purpose of the site?

Additionally, though it may be super awesome to come up with a new concept or interface design pattern for your website, make sure that the design is still accessible and intuitive to your users. People are accustomed to common interaction patterns, site features, and web interfaces – and if your design is truly unique, make sure it’s not too obscure and puzzling. Be creative, but also keep it simple.

3. Navigation is the Most Important Thing You Will Design

The most essential site feature is the website’s navigation — without it, users are stuck whatever page they happen to land on. With that obvious fact out of the way, we’ll talk about some important points to consider when constructing a navigation scheme.

First, it’s very important to put enough time and a lot of planning on a site’s navigation structure. This is common sense, but it’s still surprising how many web designs take site navigation for granted.

Placement, style, technology (will it use JavaScript or just CSS?), usability, and web accessibility are just some of the things you need to consider when creating the navigation design.

Your navigation design should work without CSS because of text-based browsers. Poke fun of text browsers all you want, but they are still prevalent in many mobile devices. Perhaps more importantly, navigation that works with CSS disabled is accessible (99.99% of the time) via screen readers.

CSS disabled.

Navigation should be accessible and usable without the need for client-side technologies such as JavaScript or Flash, which users may not have enabled or installed for various reasons such as security or company policy.

It is imperative that you have a good navigation system in place that is located at a highly-visible location. A good navigation is detectable as soon as the web page loads without having to scroll down the web page. This is where keeping it clean and simple plays a major role: a complex and unconventional design can lead to user confusion.

Users must never wonder, even for a split second, “Where is the site navigation?”

For sites organized in a hierarchical, multi-level manner, make sure that it is easy to navigate from between parent and child web pages. In addition, it should be easy to reach top-level pages (such as the site’s front page) from any webpage.

The main goal of your site navigation is to allow users to get to their desired content with as few actions and with as little effort on their behalf as possible.

4. Use Fonts Wisely and Methodically

Though there are thousands of fonts out there, you can really only use a handful (at least until CSS3 is fully supported by major browsers). Make it a point to stick to web-safe fonts. If you don’t like web-safe fonts, consider a progressively-enhanced web design that leverages sIFR or Cufon.

Keep font usage consistent. Make sure that headings are visually-different from paragraph text. Use white space, tweak line-height, font-size, and letter-spacing properties to make content pleasant to read and effortlessly scannable.

Perhaps one of the things that web designers often get wrong is font-sizes. Because we want to fit as much text as we can in a web page, we sometimes set font sizes to uncomfortably small sizes. Try to keep font sizes at and above 12px if possible, especially for paragraph text. While many people face no difficulty reading small text sizes, think about older users and persons with low-vision and other types of vision impairment.

5. Understand Color Accessibility

After talking about fonts, we also need to point out the importance of using the right colors.

You  need to consider color contrast of background and foreground colors for readability and for users with low-vision. For instance, black text on white background has a high-contrast, while orange text on red background will make you strain your eyes.

Color contrast.

Also, use colors that are accessible to users with particular forms of color-blindness (check out a tool called Vischeck that will help you test for certain types of color-blindness).

Some color combinations work well only when the color is used as a foreground color instead of a background color. Take for example, dark blue text on a pink background versus but pink text on blue background, same colors but different levels of readability and reading comfort. It is important not only to get a good color combination but also to apply it to the right elements on the page.

Color combinations.

6. You Need to Know How to Write Code Yourself

With various WYSIWYG editors flooding the market, it has become as simple as 1-2-3 to design a site. However, most of these editors insert unnecessarily code junk, making your HTML structure poorly designed, harder to maintain and update, and causing your file sizes to bloat.

By writing the code yourself, you come out with clean, crisp, and terse code that’s a pleasure to read and maintain; code that you can be proud to call your own.

Knowing how to use a WYSIWYG or an IDE with a visual preview does not excuse you from learning HTML and CSS. You have to know what’s going on in order to create effective, semantic, and highly-optimized web designs.

7. Don’t Forget Search Engine Optimization

A good designer should always remember to keep the basics of SEO in mind when designing a site. For example, structuring web content so that important text are represented as headings (i.e. page title and logo). This is where learning how to code properly comes in handy. Knowing correct, semantic, and standards-based HTML/CSS – you will quickly realize that divs are better than tables for web layouts not only for accurate representation of site content, but also for search engine rankings; you will also know that CSS background text image replacement is a good idea.

8. Understand that People are Impatient

People on an average spend only a few seconds before deciding whether they want to read more or navigate away to another site. Therefore, you as a web designer have to device a way for encouraging users to choose the former option within those precious seconds.

Know that not many visitors will scroll down to view the entire contents of the page if what they see at the top does not interest them. Remember to keep your important elements on the top where they are easily visible, but also do not overcrowd the top half of the page which can intimidate users and turn them off from reading further down the page. Consider the top half of a web design a selling point: be a salesman, make people buy into the notion that they want to see what else is on your site.

9. Learn About (and Be Aware of) Browser Quirks

One of the things you must know as a web designer is that your work operates in a finicky and unpredictable environment: web browsers. It’s not enough that your designs work on a few web browsers, they need to work in as many browsing situations as you can possibly afford. Before production – test your prototypes using tools like Browsershots.

Browsershots

10. Make Designs that are Flexible and Maintainable

A good web designer makes sure that the site can easily be updated or modified in the future. Designing websites that are malleable and easy to maintain is a sign of a great web designer. Make your work as modular as possible by separating style from structure.

Know that our industry is dynamic and still young – things change in a very short amount of time. Keeping this thought in mind will promote the creation of flexible web designs.

What are your web design tips?

If you have more tips to share to beginning web designers – kindly share them in the comments.

11 powerful examples of responsive web design

Back in 2010, Ethan Marcotte urged designers and developers to practice “responsive web design” (RWD):

“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can [make our] designs […] more adaptive to the media that renders them.”

TIPS

Designing with developers in mind: guides, grids, and frameworks

By designing websites that adapt to any device, designers and developers could future-proof their work, he argued.

Related: 9 examples of clever, creative 404 pages

Eight years later, responsive web design has reached critical mass. It’s now standard practice to create a consistent, yet tailored, experience across every device—including those that have yet to be released.

But what is responsive web design? And what are the best examples of mobile responsive web design in practice?

“Mobile phones and tablets are responsible for 56.74% of global internet usage.”

Twitter Logo

What is a responsive website?

Strictly speaking, responsive websites have three defining features:

1. Media queries

“A media query allows us to target not only certain device classes but to actually inspect the physical characteristics of the device rendering our work,” Marcotte explains.

Media queries thus allow developers to use condition checks to alter web designs based on the properties of the user’s device. This is superior to simply defining breakpoints in the HTML/CSS, as it’s a more tailored experience for the user.

2. Fluid grids

When flexible grids are created using CSS, the columns automatically rearrange themselves to fit the size of the screen or browser window, whether the user is on a 21-inch desktop computer, a 13-inch laptop, a 9.7-inch tablet, or a 5.5-inch mobile phone.

“Fluid layouts [….] put control of our designs firmly in the hands of our users and their browsing habits,” Marcotte explains.

This enables designers to maintain a consistent look and feel across multiple devices. Plus, it saves everyone time and money by allowing designers to update one version of the website versus many.

3. Flexible visuals

Marcotte refers here to using code that prevents rich media files from exceeding the dimensions of their containers, as well as viewports. As the “flexible container resizes itself,” he explains, so does the visual within it.

Given that there are over 8.48B unique devices in existence today, this functionality allow teams to create timeless designs capable of adapting to any device, regardless of its size or shape.

Together, these three types of functionality allow designers to craft responsive websites.

Related: Typography and creating grids for screens

But, Marcotte explains, that’s just the beginning:

“Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts.”

Below, we’ve included 11 examples that go beyond the fundamental criteria for responsive web design. Each website offers an experience that’s tailored to the user’s unique context.

Responsive web design examples

1. Dropbox

Responsive web design

Dropbox has done a great job of using a fluid grid and flexible visuals to design a standout responsive website. Not only does the font color change to accommodate the background color when shifting from desktop to handheld devices, but the image changes orientation as well.

Accounting for context, Dropbox offers a tailored experience across each device. For example, in an effort to prevent users from bouncing, a small arrow directs desktop users to scroll down to see more content. The same arrow is absent from handheld devices, since it’s assumed that users will naturally scroll on a device with touchscreen capabilities. Similarly, their signup form is visible on desktop devices, but it’s hidden behind a call-to-action button on tablets and mobile devices, where space is limited.

2. Dribbble

Responsive web design
TIPS

Try Freehand, the fast, flexible way to collaborate in real time.

Dribbble’s website features one of the hallmarks of responsive web design: a flexible grid, and it condenses from five columns on desktop and laptop computers to two columns on tablets and mobile phones.

To prevent their website from feeling cluttered on mobile devices, Dribbble has removed several items. For example, shots are no longer attributed to their maker and the view, comment, and like counts are no longer nested beneath each item. They’ve also hidden the menu behind a hamburger icon and removed the search bar.

3. GitHub

Responsive web design

GitHub’s website offers a consistent experience across every device. However, there were a few noticeable differences:

  • When shifting from desktop to tablet devices, the area above the fold changes from a two-column layout to a single-column layout, with the copy above the signup form instead of beside it.
  • Unlike on desktop and tablet devices, where their signup form is a central focus, GitHub presents only a call-to-action button on mobile. Users must click the call to action to surface the form.
  • Like Dribbble, GitHub has also removed the search bar and hidden the menu behind a hamburger icon on handheld devices. This is a pretty common practice, as it helps reduce clutter on mobile devices, where space is limited.

4. Klientboost

Responsive web design

This is another fantastic example of mobile responsive web design. Their website loads remarkably fast at four seconds using 3G connections. More importantly, the look and feel of Klientboost’s website stays consistent across all devices, yet they’ve managed to tailor their user experience to each device.

While the full menu, including a “Get Proposal” call-to-action button and “We’re hiring!” callout, is viewable from desktop and laptop computers, tablet and mobile devices reveal condensed versions of the menu. Users visiting their website from tablet devices are shown a hamburger menu icon and callout, whereas those visiting from mobile phones are shown the menu icon and call-to-action button.

5. Magic Leap

Responsive web design

Magic Leap has designed a simple, mobile-first website with parallax scrolling that brings their stunning illustrations to life. Given that mobile phones and tablets are now responsible for 56.74% of global internet usage, their approach makes sense.

Magic Leap’s user experience is consistent across all devices, with one exception: the microcopy that directs users to scroll, which is included on desktop computers and tablets, but excluded from mobile devices, where it’s natural for users to scroll.

Even with a 3G connection, their website loads in seven seconds—well below the global average of 22 seconds. For a website featuring responsive animation, that’s not too shabby.

6. Shopify

Responsive web design

Shopify’s user experience is consistent across all devices. Only the call-to-action button and illustrations changed between desktop to mobile devices.

On personal computers and tablets, the call-to-action button is to the right of the form field. On mobile devices, it’s beneath.

Similarly, the illustrations are to the right of the copy on personal computers and tablets, whereas they’re placed beneath the copy on mobile devices.

Like most websites, Shopify’s menu is also replaced by a hamburger icon on handheld devices.

Despite using image carousels to show off their customers, they’ve managed to keep their page load speed below five seconds, which is pretty impressive.

7. Smashing Magazine

Responsive web design

Smashing Magazine goes above and beyond, offering a tailored experience across every device. Their website features a two-column layout, full menu, and combination mark on desktop, which converts to a one-column layout and condensed menu with lettermark on tablets and mobile devices.

Smashing Magazine’s website is also a shining example of inclusive design. The menu shown to desktop users features both labels and icons. And I love how, instead of using a run-of-the-mill menu icon, they’ve opted for a call-to-action button with the word “menu” and a search icon. Digital natives have no problem navigating websites from handheld devices, but other generations don’t necessarily know what hamburger icons represent.

Their website also loads in just 2 seconds on devices with 3G internet, which GSMA says will make up 70% of mobile connections through 2020. This keeps their bounce rate low and prevents users from getting frustrated.

8. Slack

Responsive web design

Slack’s brand is known for being simple and human. It’s no surprise that their website follows the same guidelines.

Their flexible grid easily adapts to viewports of all sizes and shapes. For example, while customer logos are presented in a three-column layout on desktop and laptop computers, they’re shown in a single-column layout on handheld devices.

Related: Download 25 free Slack emojis your design team had no idea they needed

Slack’s website is also designed to be easy to use. For example, their call-to-action buttons span the entire column on tablets and mobile phones, which helps users avoid clicking the “Sign in” hyperlink below.

9. Treehouse

Responsive web design

Treehouse offers a seamless experience across all platforms. Their menu gets progressively smaller across devices—desktop and laptop computers feature a four-item menu, tablets feature a two-item menu and hamburger icon, and mobile phones offer a one-item menu and icon.

Their form fields experience the same change. They’re presented in two columns on desktop and laptop computers and one column on tablets and mobile phones.

10. WillowTree

Responsive web design

Like other companies, WillowTree includes a full menu on desktop devices and a condensed menu on handheld devices. But unlike others, they’ve introduced a static navigation bar at the top of the page, which creates a more delightful experience for users with handheld devices. They’ve also added a text-based call to action on the mobile version of their website for added convenience.

Like other responsive websites, the grid they’ve constructed to present customer logos is extremely flexible. It collapses from five columns on desktop computers to four columns on tablets to two columns on mobile phones.

Similar to Treehouse, the area above the fold converts from two columns on desktop to one column on mobile, with the call-to-action button shifting from beside the copy to beneath it.

11. WIRED

Responsive web design

WIRED’s website has a dynamic layout featuring several columns and a sidebar on desktop devices, which converts to a single column on handheld devices.

When shifting from tablet to mobile devices, their menu shrinks to include only their logo, a menu icon, and a link to subscribe. In an effort to keep things simple, search functionality and the ability to filter WIRED’s newsfeed by section isn’t available on mobile.

One area where WIRED shines is using flexible images. The crop on their feature images changes across platforms. On desktop and laptop computers, images vary between squares and rectangles, giving users plenty to explore with their eyes. Yet, on handheld devices, all feature images are cropped using a 16:9 ratio.

What’s your favorite responsive website?

Let us know and we might include it in a future post about responsive design.

9 Guidelines & Best Practices for Exceptional Web Design and Usability

When it comes to designing or redesigning a website, it’s easy to get hung up on the aesthetics. Does that shade of blue look right? Should the logo be on the right side of the screen, or left? What if we put a giant animated GIF in the middle of the page?

However, in a world where folks have more than 1.8 billion websites they can potentially land on, you need to make sure yours is not just a pretty face. It should be designed for usability, how easy your website is to use, and user experience (UX), how enjoyable it is to interact with your website.

Now, you could spend years studying the ins and outs of these disciplines But for the sake of giving you a jumping-off point, we’ve assembled a list of the fundamental guidelines and best practices you can apply to your next website redesign or website launch. Then, we’ll review 10 features you’ll need on your site to put these recommendations into practice. Let’s dive in.

Free Workbook: How to Plan a Successful Website Redesign

  1. Website Design Guidelines
  2. Website Design Best Practices
  3. Website Design Requirements

Website Design Guidelines

  1. Simplicity
  2. Visual Hierarchy
  3. Navigability
  4. Consistency
  5. Responsivity
  6. Accessibility
  7. Conventionality
  8. Credibility
  9. User-Centricity

1. Simplicity

While the appearance of your website is certainly important, most people aren’t coming to your site to evaluate how slick the design is. They want to complete some action, or to find some specific piece of information.

Therefore, unnecessary design elements (i.e., those which serve no functional purpose) will only overwhelm and make it more difficult for visitors to accomplish what they’re trying to accomplish.

From a usability and UX perspective, simplicity is your best friend. If you have all the necessary page elements, it’s hard to get too simple. You can employ this principle in a variety of different forms, such as:

  • Colors: Basically, don’t use a lot. The Handbook of Computer-Human Interaction recommends using a maximum of five (plus or minus two) different colors in your design.
  • Typefaces: The typefaces you choose should be highly legible, so nothing too artsy and very minimal script fonts, if any. For text color, again, keep it minimal and always make sure it contrasts with the background color.A common recommendation is to use a maximum of three different typefaces in a maximum of three different sizes.
  • Graphics: Only use graphics if they help a user complete a task or perform a specific function (don’t just add graphics willy-nilly).

Here’s a great example of a simple but effective homepage design from HERoines Inc:

examble of website design on the website for HERoines Inc

Image Source

2. Visual Hierarchy

Closely tied to the principle of simplicity, visual hierarchy means arranging and organizing website elements so that visitors naturally gravitate toward the most important elements first.

Remember, when it comes to optimizing for usability and UX, the goal is to lead visitors to complete a desired action, but in a way that feels natural and enjoyable. By adjusting the position, color, or size of certain elements, you can structure your site in such a way that viewers will be drawn to those elements first.

In the example below from Spotify, you can see that the main heading “Get 3 months of Premium for free” sits atop the visual hierarchy with its size and page position. It draws your eye to their mission before anything else. This is followed by the “Get 3 Months Free” CTA, which prompts action. Users can click this CTA, or scan the menu items above for more actions.

a web design example on Spotify.com

Image Source

3. Navigability

Planning out intuitive navigation on your site is crucial to help visitors find what they’re looking for. Ideally, a visitor should land on your site and not have to think extensively about where to click next. Moving from point A to point B should be as frictionless as possible.

Here are a few tips for optimizing your site’s navigation:

  • Keep the structure of your primary navigation simple (and near the top of your page).
  • Include navigation in the footer of your site.
  • Consider using breadcrumbs on every page (except your homepage) so users remember their navigation trail.
  • Include a search bar near the top of your site so visitors can search by keywords.
  • Don’t offer too many navigation options per page. Again, simplicity!
  • Include links within your page copy, and make it clear where those links go.
  • Don’t make users dig too deep. Try making a basic wireframe map of all your site pages arranged like a pyramid: Your homepage is at the top, and each linked page from the previous forms the next layer. In most cases, it’s best to keep your map no more than three levels deep. Take HubSpot’s site map, for example.
site map for HubSpot.com

Image Source

One more pointer: Once you’ve settled on what your site’s main (top) navigation will be, keep it consistent. The labels and location of your navigation should remain the same on every page.

This leads us nicely into our next principle…

4. Consistency

In addition to keeping your navigation consistent, the overall look and feel of your site should be similar across all of your site’s pages. Backgrounds, color schemes, typefaces, and even the tone of your writing are all areas where consistency has a positive impact on usability and UX.

That’s not to say every page should follow the same layout. Instead, create different layouts for specific types of pages (e.g., landing pages, informational pages, etc.). By using those layouts consistently, you’ll make it easier for visitors to understand what type of information they’re likely to find on a given page.

In the example below, you can see thatAirbnb uses the same layout for all of its “Help” pages, a common practice. Imagine what it would be like from a visitor’s perspective if every “Help” page had its own, unique layout. There would probably be a lot of shoulder shrugging.

a help page on Airbnb.com

Image Source

5. Responsivity

According to Statista, 48% of page global views were from mobile devices like smartphones and tablets. And according to our research, 93% of people have left a website because it didn’t display properly on their device.

The takeaway here: To provide a truly great user experience, your site has to be compatible with the many different devices that your visitors are using. In the tech world, this is known as responsive design.

Responsive design means investing in a highly flexible website structure. On a responsive site, content is automatically resized and reshuffled to fit the dimensions of whichever device a visitor happens to be using. This can be accomplished with mobile-friendly HTML templates, or by creating a special mobile site.

Ultimately, it’s more important to provide a great experience across different devices than look identical across those devices.

an illustration of a responsive web page on different devices

Image Source

Alongside mobile-friendliness, it’s worth your while to test your website’s cross-cross browser compatibility. In all likelihood, you’ve only viewed your site on one web browser, be it Google Chrome, Safari, Firefox, or something else.

Now is the time to open your pages on each of these browsers and evaluate how your elements appear. Ideally, there won’t be much difference in presentation, but you can’t know for sure until you see for yourself.

6. Accessibility

The goal of web accessibility is to make a website that anyone can use, including people with disabilities or limitations that affect their browsing experience. As a website designer, it’s your job to think of these users in your UX plan.

Like responsiveness, accessibility applies to your entire site: structure, page format, visuals, and both written and visual content. The Web Content Accessibility Guidelines (WCAG), developed by the Web Accessibility Initiative and the World Wide Web Consortium, set the guidelines for web accessibility. In a broad sense, these guidelines state that websites must be:

  • Perceivable: Visitors are aware of the content on your site.
  • Operable: The functionality of your website should be possible in different ways.
  • Understandable: All content and alerts can be easily understood.
  • Robust: Your website is usable across different assistive technologies, devices, and browsers.

For a deeper dive into this topic, see our Ultimate Guide to Web Accessibility.

7. Conventionality

A big challenge in web design is balancing originality with your expectations. Most of us are expert internet users, and there are specific conventions we’ve grown accustomed to over time. Such conventions include:

  • Placing the main navigation at the top (or left side) of a page.
  • Placing a logo at the top left (or center) of a page.
  • Making the logo clickable, so it always brings a visitor back to the homepage.
  • Having links and buttons that change color/appearance when you hover over them.
  • Using a shopping cart icon on an ecommerce site. The icon also has a number badge signifying the number of items in the cart.
  • Ensuring image sliders have buttons users can click to manually rotate slides.

While some might opt to throw these out the window for the sake of uniqueness, this is a mistake. There’s still plenty of room for creativity within the constraints of web conventionality.

Let’s briefly consider another field of design, architecture. Building codes are put in place so that folks can easily and safely inhabit spaces. An architect doesn’t complain about these codes or violate them because, aside from legal repercussions, they assure safety and comfort of guests. It doesn’t matter how dazzling the building looks — if you trip on uneven stairs or you can’t get out in a fire, you might prefer to stay outside.

In the same way, you can craft a memorable experience while meeting user expectations. If you violate what users anticipate, they may feel uncomfortable or even frustrated with your site.

8. Credibility

Sticking to web conventions lends your site credibility. In other words, it increases the level of trust your site conveys. And if you’re striving to build a site that provides the best user experience possible, credibility goes a long way.

One of the best methods to improve your credibility is to be clear and honest about the product or service you’re selling. Don’t make visitors dig through dozens of pages to find what it is you do. Be up-front on your homepage, and dedicate some real estate to explaining the value behind what you do.

Another credibility tip: Have a pricing page, also linked on the homepage. Rather than force people to contact you to learn more about pricing, list your prices clearly on your site. This makes your business appear more trustworthy and legitimate.

Here’s an example of an effective pricing page from the Box website:

pricing page for Box.com

Image Source

9. User-Centricity

At the end of the day, usability and user experience hinge on the preferences of the end-users. After all, if you’re not designing for them, who are you designing for?

So, while the principles detailed in this list are a great starting point, the final key to improving the design of your site is to conduct user testing, gather feedback, and implement changes based on what you’ve learned.

And don’t bother testing usability by yourself. You’ve already invested a lot of time into your design, which brings your own biases into the equation. Get testers who have never seen your site before, the same as any first-time visitor.

Here are a few user testing tools to get you started:

  • Website Grader: Our free tool evaluates your website based on several factors: mobile, design, performance, SEO, and security. It then offers tailored suggestions for improvement. You can learn more about Website Grader in our dedicated blog post.
  • Crazy Egg: Track multiple domains under one account and uncover insights about your site’s performance using four different intelligence tools — heat map, scroll map, overlay, and confetti.
  • Loop11: Use this tool to easily create usability tests — even if you don’t have any HTML experience.
  • The User Is Drunk: Pay Richard Littauer to get drunk and review your site. Don’t believe me? We tried it.

For even more helpful options, see our list of the best user testing tools.

Hopefully, these guidelines are useful in informing the structure of your web pages and website as a whole. But, how does one put these guidelines into practice? Let’s take a look at some actionable best practices you can follow during the design process. 

Website Design Best Practices

  1. Select a typography that’s easy to read and skim.
  2. Choose a color scheme that suits your brand.
  3. Use white space to break up text and other elements.
  4. Use texture to add personality and depth.
  5. Add images to engage and inform readers.
  6. Simplify your navigation.
  7. Make your CTAs stand out.
  8. Optimize for mobile.
  9. Limit the options presented to users.

1. Select a typography that’s easy to read and skim.

Typography refers to how type — meaning letters and characters — are arranged and presented on the page. Since website typography affects not only how we read but how we feel about text on a web page, it’s important to pick carefully. 

Ideally, you want a typeface that is:

  • easy to read
  • easy to skim
  • accessible to all users
  • legible across multiple devices and screen sizes

You also want it to match the look and feel of your brand. For example, the luxury fashion brand Burberry refreshed its logo for the first time in 20 years in 2018. It replaced the old serif typeface with a bold, all-caps, sans serif typeface and dropped the knight emblem. The result is a simpler and more modern-looking logo that’s easier to read on any screen — and that reflects changes in the company to become more transparent and appeal to a younger generation. 

Side by side comparison of Burberrys old and new logo, which uses all caps sans serif font

Image Source

2. Choose a color scheme that suits your brand.

Like typography, color can affect not only how we understand and interact with content, but how we feel about it. Your color scheme should therefore check off the same boxes as your website typography. It should:

  • reinforce your brand identity
  • make your site easy to read and navigate
  • evoke emotion
  • look good

Buzzfeed, for examples, uses the primary colors yellow and red to grab users’ attention and get them excited about the content. It reserves the use of the primary color blue — which is associated with trust — exclusively for links and CTA buttons. Both emotions are ideal to evoke for a media site. 

Following website design best practices, Buzzfeed color palette evokes excitement and trust

Image Source

3. Use white space to break up text and other elements.

Whitespace refers to the negative areas in any composition. Whitespace provides users with visual breaks as they process a website’s design or content, which is not only aesthetically pleasing. By minimizing distractions, whitespace makes it easier for users to focus, process information, and understand what it’s important. 

That means you can use whitespace to avoid causing information overload or analysis paralysis — and to emphasize important elements on the page. This might help persuade users to take a specific action, like sign up for a newsletter, shop your latest collection, and more.

For example, Eb & flow Yoga Studio uses whitespace to lead users toward a specific action: to sign up for three weeks of classes. Notice that whitespace doesn’t mean the absence of color or imagery. Instead, it means that every element on the page is positioned strategically, with lots of space in between, to avoid overwhelming or confusing visitors. 

Eb & flow Yoga Studio follows the website design best practice of using whitespace to lead users to click on a CTA

Image Source

4. Use texture to add personality and depth.

Resembling a three-dimensional, tactile surface, web textures aim to replicate the physical sensation of touch with another sensation — sight. They’re a great design alternative to solid color backgrounds, particularly if you want to add personality and depth to your site. 

Take a look at the texture on the homepage for the Santa Barbara-based restaurant Mony’s Tacos below. It looks like chalk drawn on a blackboard, doesn’t it? I don’t know about you but I can almost feel the chalk on my fingers just from looking at it. It’s the perfect look for a restaurant that aims to be California’s preferred Funk Zone choice for Mexican delights.

Monys homepage follows the website design best practice of using web texture to resemble chalk drawn on a blackboard

Image Source

5. Add images to engage and inform readers.

Striking a balance between text and images is essential in website design. Incorporating visuals can make your content more informative, engaging, and memorable. You’ve probably heard the statistics that people remember only 20% of what they read, but 80% of what they see? While the exact percentages are debated, the basic idea isn’t. It’s easier for some people to learn and process information visually.

Here’s a unique example of breaking up text with images from a cosmetic company’s website. This shows how endless the possibilities of incorporating imagery into your website design are. 

Maggie Rose breaks up text with images in a masterful example of the website design best practice

Image Source

6. Simplify your navigation.

Navigation is one of the most important design elements on a website. It impacts whether visitors arrive on your homepage and browse, or click the “Back” button. That’s why it’s important to keep it as simple as possible. 

Many websites opt for a horizontal navigation bar. This navigation style lists the major pages side by side and is placed in the website header

Take the navigation bar on Blavity as an example. The sections featured include three content categories — “News,” “Op-Eds,” and “Lifestyle” — as well as links to their submission page and sign-up page. This provides visitors with easy access to the pages they’re likely looking for. Other nav items are placed in a dropdown menu labelled “More” so they’re still easy to find but not cluttered into the top-level navigation. Finally, the navigation bar is sticky so visitors won’t have to scroll up and down the page to browse the site. 

Sticky horizontal navigation bar on Blavity offers an example of a website design best practice

Image Source

7. Make your CTAs stand out.

CTAs are elements on a web page, advertisement, or another piece of content that encourages the audience to do something. The call to action could be to sign up, subscribe, start a free trial, or learn more, among many others.

You want your CTAs to pop in your website design. To make that happen, consider how you’re using color as well as other elements like background color, surrounding images, and surrounding text.

Square provides an excellent call-to-action example. Using a single image to showcase the simplicity of using their product, Square uses bold typography to also show how unique and future-oriented their product is. Against this dramatic backdrop, the blue “Get Started” CTA awaits your click.

Square uses color and unique posititioning to make their CTA pop in their website designImage Source

8. Optimize for mobile.

We’ve already discussed how important it is for your website to be responsive. But since mobile devices accounted for 59% of organic search engine visits in 2021, we’re doubling down on how important it is to design your website to be mobile-friendly. That might mean altering or removing some elements that would clutter smaller screen sizes or negatively impact load time. 

For an example of one of the best mobile website designs, compare Etsy’s homepage on desktop vs mobile. On desktop, you’ll see a navbar with categories. Hovering over each category will reveal a dropdown menu.

Etsy homepage on desktop

Image Source

On mobile, this collapses behind a hamburger button, which improves the appearance and performance of the mobile site. You’ll also notice that the images are larger — perfect for tapping with your finger on a mobile screen.

image0

9. Limit the options presented to users.

According to Hick’s Law, increasing the number and complexity of choices will increase the time it takes for a person to make a decision. This is bad news in website design. If a website visitor is presented with too many options, they might get frustrated and bounce — or they might pick an option you don’t want, like abandoning their cart. That’s why it’s important to limit the number of options presented to a user. 

For example, a visitor landing on the homepage of Shawn Michelle’s Ice Cream will have three options: to learn more about the company, the flavors, or the ingredients. But instead of presenting all three options at the same time, they are presented one at a time in a slider. This is a great example of implementing Hick’s Law in UX design. Shawn Michelles Ice Cream homepage uses an image slider to present CTAs one at a time

Image Source

Now we understand the principles and best practices that should guide you throughout the design process. In the next section, let’s run down the essential page elements that you should strongly consider including in your design plan.

Website Design Requirements

  1. Header and Footer
  2. Menu Navigation
  3. Search Bar
  4. Branding
  5. Color Palette
  6. Headers
  7. Clear Labels
  8. Visuals and Media
  9. Calls to Action (CTAs)
  10. Whitespace

1. Header and Footer

The header and footer are a staple of just about every modern website. Try to include them on most of your pages, from your homepage, to your blog posts, and even your “No results found” page.

Your header should contain your branding in the form of a logo and organization name, menu navigation, and maybe a CTA, and/or a search bar if well-spaced and minimal. On the other end, your footer is where many users will instinctively scroll for essential information. In your footer, place contact information, a signup form, links to your common pages, legal and privacy policies, links to translated versions of your site, and social media links.

2. Menu Navigation

Whether it’s a list of links across the header or a tidy and compact hamburger button in the corner, every website needs a guide for navigation positioned at the top of at least your homepage and other important pages. A good menu limits the number of clicks to reach any part of your website to just a few.

To reduce clutter, you might consider making some or all menu options a dropdown menu with links within it, as can be seen on HubSpot’s homepage.

homepage for hubspot.com

3. Search Bar

In addition to menu navigation, strongly consider placing a search bar at the top of your pages, so users can browse your site for content by keyword. If incorporating this functionality, make sure your results are relevant, forgiving of typos, and capable of approximate keyword matching. Most of us use a high-quality search engine every day, be it Google, Amazon, YouTube, or elsewhere. These all set the standard for your own site search.

4. Branding

Remember the conventions we’ve discussed? One that you see practically everywhere is a logo in the top left corner. On first landing, many visitors’ eyes will instinctively shift to this region to check they’re in the right place. Don’t leave them hanging.

To reinforce this notion, incorporate your company branding into every element you add, piece of content you post, and color scheme you create. That’s why we recommend establishing brand guidelines if you haven’t already — check out our style guide for a reference.

5. Color Palette

Color choice plays a major role in your site’s usability and UX as well. This decision tends to be more subjective than other requirements in this list. But, like everything else we’ve discussed, try to simplify — limit your color selection to 3-4 prominent colors at most.

Starting a color palette from scratch can be surprisingly difficult the first time. We seem to intuitively pick up on which colors work well together and which don’t, but we stumble when trying to pick from the infinite combinations available.

The solution? Try a color palette that’s been shown to work on other websites. Take influence from your favorite sites, and see our list of our favorite website color schemes to get started.

6. Headings

Headings are key to establishing the visual hierarchy we discussed earlier, especially on text-heavy pages. As users skim your pages what you need, a clear and to-the-point heading alerts readers to stop scrolling after finding what they want. Use only as many headings as there are distinct sections of your page, as too much blown-up and bolded text will dampen this effect.

7. Clear Labels

Whenever a user takes an action on your website, it must be obvious exactly what they’re doing and/or where they’re going. All buttons should have clear text or an icon to precisely and concisely signal their purpose. The same goes for in-text links and widgets (simple interactive elements, like dropdowns and text forms).

For example, a button linking to a pricing page should just read “Pricing” — anything beyond that (e.g., “See our prices”, “Check out the pricing page for a deal”) is superfluous. A search bar/button only needs a search glass icon (🔍), and perhaps also the word “Search”, to denote its purpose.

User testing can be a major help here. While you yourself know what all of your interactive page elements do, the same can’t be said for a new user. Testing will give valuable insight into what users think your labels mean beyond your own perspective.

8. Visuals and Media

When incorporating static images, gifs, videos, and other media into your pages, remember to be consistent and intentional in your choices. These elements will draw attention over most other text and will likely stay in users’ minds, so choose wisely.

Here’s just one example of effective media on a homepage. Notice how every image complements the page aesthetic and supports the offer of personalized fitness training with results.

an example of web design guidelines used on a web page for a personal training gym-min

Image Source

Also, all images and videos should be optimized for search engines and include descriptive alt text for accessibility.

9. Calls to Action (CTAs)

Having a pleasing website is great, but how do you know whether your visitors are actually doing what you want? Are they engaging with your content? This is where CTAs come into play.

A CTA is any page element that prompts user action. The action could be adding a product to a card, downloading a content offer, or signing up for an email list. Make your CTA elements prominent in the visual hierarchy (remember our Spotify example), but not intrusive or distracting like many click-through ads tend to be.

If you need ideas for sleek CTAs that drive more conversions, see our CTA examples list.

10. Whitespace

As mentioned above, sometimes it’s about the elements you don’t include. After reading these guidelines and requirements, you may feel tempted to stuff your pages with all the bits and bobs needed for a flawless UX. Don’t forget that your viewers need room to digest all this new info, so give your elements room to breathe.

But, how much whitespace should you have? That’s another personal call, and varies from site to site. So, user testing is handy here as well. What are people focusing on? Do they feel overwhelmed with the density of content? Once again, it all ties back to our first guideline, simplicity.

Design that Puts Users First

Indeed, web design is largely subjective — your website’s look and experience isn’t going to please everyone. However, there are also tried-and-true UX principles that, when carefully considered and incorporated, help visitors feel more at home.

According to Amazon Web Services, 88% of website visitors are less likely to return to a website after a poor experience. And how could you blame them? We’ve surely all been there.

So, as a final bit of usability/UX wisdom, start caring more! Imagine yourself into the shoes (or, more accurately, browser windows) of your visitors, and keep them in mind every step of the design process.

Contact us for more information.

Beginner’s Guide: How to Learn Web Designing at Home

Web design is quite complex and daunting, but with the development of Internet and technology, web design overflow than ever before nowadays. Hence, becoming a web designer has become the main trend among young designers. Today, I will guide you about how to learn web design at home briefly.

1. First, you should know about what is web design?

Visual+interaction=web design core

Many young designers often misunderstand the concept of web design, web design is about design, not about coding and front-end development. Of course, it would be great if you know some coding language (HTML, CSS, Java), but you can’t get yourself deep into front-end development, that’s not the core of web design. Web design is to solve the communication problems between users and web page information.

2. 9 web design skills young designer should master

Master the basic rules of visual design

To learn the layout design

To learn the color principles

To master the basic knowledge of interaction design

Have to master the PS and other web UI mockup tool

Understand the basic coding language(HTML, CSS)

Familiar with the company product and the user group

At least, master one of the front-end coding edit software, I would like to recommend the Dreamweaver

Know about the SEO

3. Five elements of web design

Layout, color, graphics, font, content

4. How to learn web design at home

One post can’t include all the information, so here I’m going to introduce some learning website to guide you step and step.

Web design learning books:

1. HTML and CSS: Design and Build Websites

2. Learning Web Design: A Beginner’s Guide

3. Don’t Make Me Think: A Common Sense Approach to Web Usability

4. Learning How to Make Web Pages Functional

5. Designing with Web Standards

Web design online learning courses:

Treehouse

Lynda

Udemy

Web design blogs:

1. Smashing Magazine

2. Mockplus blog

3. Webdesigner Depot

4. Webdesignledger

5. WEB DESIGN LIBRARY

6. Hacking UI

7. 1stwebdesigner

8. WEBAPPERS

Coding:

1. W3Schools

To learn the basic coding language, it includes:HTML and CSS with simple language to teach you.

2. Google Code University

Another coding learning website which is created by Google developer.

3.Code Avengers

I like this learning website, because of it’s just like big adventure that allow you to participate in their coding challenge programme and bug hunting.

HTML and CSS:

30 Days to Learn HTML and CSS

A Beginner’s Guide to HTML & CSS

Don’t Fear the Internet

Conclusion:

No matter what position you are in, learning is the only way to achieve your goal. If you want to know about how to learn the web design at home, above is all you have to know. Stop wasting your time on Facebook or Twitter to look for answers. You can build your design circle in there, but you can’t be a web designer by tooling around. Wish you good luck.

20 web design principles to follow

20 web design principles to follow featured image

Download this image from Canva’s photo library

Web design is a highly individual process. In order to create truly unique and impactful compositions, designers must let go of their preconceived ideas of what a website should look like. Instead, they must let their brand values, audience, and point of difference be their ‘true north’, guiding them through the design process.

But while the design is all about breaking the ‘rules and creating your own, there are a few failsafe web design principles all designers should keep in mind. These tried-and-tested guidelines are essential for creating polished and functional websites that engage your audience. Read on for 20 essential web design principles to inform your next creations.

01. Use readable and web-friendly fonts

The role of typography in web design can’t be understated. Using the right fonts exemplifies your brand personality and immediately grabs your audience’s attention. However, it’s not just about looking good. The typefaces you use in your web design also need to be functional and readable. After all, if the user has to squint just to see your text, they’re likely going to struggle to connect with your message. Arial, Helvetica, Times New Roman, and Courier New are all examples of web-friendly fonts. This means they maintain legibility at any size and work well across both mobile and desktop.

Matt Steel via Design Bombs

Typography takes centre stage in this website design for writer and designer Matt Steel. He has used a versatile serif font that remains eye-catching when used small and lightweight, or big and bold.

Want to let your typography do the talking in your next web design project? Canva’s Red Geometric Shapes Sale Website Ad template provides the perfect starting point for a text-focused website header.

02. Utilise the ‘F’ pattern

Humans are creatures of habit—and the way we consume content is no exception. A Nielsen Norman Group study into eye-tracking revealed that when we scan the information on a website, the majority of us do so in an F-shaped pattern. This means we first read important headlines along the top of the page, then scan down the left side of the page at any numerals, bullet points or sidebars, then across the page again at any bolded text or sub-headings. In web design, using an ‘F’ pattern involves mimicking the eye’s natural path so as to not disrupt the visual flow. This is especially important on the landing and sales pages, where conversion is the ultimate goal.

via Big Commerce

You can see this in action on BigCommerce’s homepage. They have expertly crafted an F-shaped layout to prompt the user to take the desired action—which in this case, is taking the product tour. The eyes go straight to the header (aided by the bold typography and colorful underline) then across to the diagram that demonstrates how their product works, then back down to the supplementary info and call-to-action.

03. Or the ‘Z’ pattern

While the ‘F’ pattern is a common eye-scanning pattern, it’s not the only one. The ‘Z’ layout is another important design principle. This is when the eye scans from left to the top right, forming an imaginary horizontal line. Them, it goes down to the left side of the page, creating an imaginary diagonal line. Lastly, it trails back across to the right again, forming a second horizontal line.

So, when would you use a ‘Z’ layout over an ‘F’ one? While the ‘Z’ layout tends to perform best for landing pages, the Z-pattern is generally better suited for pages with very minimal information where the main takeaway is the call-to-action.

via UX Planet

Chances are, you’ve seen this pattern in action before—because it’s used on the login page for Facebook! The eye naturally goes directly to the logo, but the Z pattern guides the users through the two calls-to-action—signing in or joining up.

04. Use negative space

Sometimes, you can turn a negative into a positive! This is certainly the case with using negative space in your website design. Also known as blank space or white space, this is the empty areas between the visual elements in your design (for example, the photos, text and icons)

This principle has been around as long as art itself, but it plays a particularly important role in web design. Overly cluttered and complex websites tend to overwhelm your user and prevent them from taking action—which is the exact opposite of what you want! Meanwhile, using negative space draws their attention to the most important content, increases text readability and creates a seamless user experience.

via Apple

You can see that working here. Apple’s focus has always been on their products, as they don’t need to rely on bells and whistles to sell to their audience. This is reflected in their use of negative space in this minimalistic layout, where they keep the spotlight on their new product—the iPhone X.

Want to incorporate this ‘less-is-more approach into your own web design? Try using a Canva template like the Pink Flower Wedding Events Website, which already has plenty of negative space built into it.

05. Keep your design consistent

You already know that consistency is key in web design. But it’s important to note that this means more than just keeping your fonts, colors and icons uniform across your branding. It also means keeping the spacing consistent in your layouts, too. This helps give your website a polished and professional feel, which boosts brand credibility.

Book Worm website design by Halo Lab via Dribbble

This is evident in this website design for electronic library company, Bookworm. While they have used a range of different font sizes and different image dimensions, the spacing between the different visual elements remains consistent. This helps to create a sense of order and harmony in an otherwise busy composition.

Canva’s built-in alignment features make it easy to make sure your text and paragraph spacing is consistent in your design.

06. Simple and logical page navigation

A website without clear navigation is like a maze without a map. It makes perusing your website unnecessarily difficult and confusing for your visitors. On the other hand, a well-designed website navigation makes for a streamlined and relaxing user experience. This can take many forms—whether it’s a drop-down menu, sidebar or sticky navigation. The key is that it’s easy to locate, works well across all devices and isn’t overloaded with different options.

via Equus Design

In this example from web design company Equus, the navigation is simple yet effective. They have opted for a monochrome menu bar with a clean, sans-serif font, which stands out against the colorful header. They have also kept their menu options to one word, which helps creates consistency and ensure it doesn’t take up too much space.

07. Use a complementary color palette

The color palette you use sets the mood of your web design. For example, using lots of dark browns and blacks can create a rustic, moody feel, while pastel colors can look quite playful and modern. Whatever vibe you go for, it’s important to make sure the colors you use work well together. Sometimes, this means sticking to similar shades but opposites can also attract (for example, orange and teal) Whether you go for colors that are opposite or next to each other on the color wheel, they need to be complementary.

via Liebe Quark

You can use many different colors and still create a visually appealing website, as evident in this web design for yoghurt company Liebe Quark. They have used a combination of warm and cool, light and dark colors to create a contrasting and eye-catching header. The chequered, grid design prevents it from looking too chaotic, while using little pops of the colors across the tiles helps to tie it all together.

Prefer to keep your color scheme simple? The Blue Fashion Blogger template in Canva is perfect for customizing with two of your own complementary brand colors.

08. Keep the audience in mind

Good designers know that it’s not just about creating a website that they think looks good. To really create a website that cuts through the noise online, they must speak directly to their audience through design. Put yourself in your audience’s shoes and ask yourself what their biggest needs, desires, and fears are. This should dictate your design choices, from the fonts and colors you use, to your button text and website navigation.

Wearism website design by Cuberto via Dribbble

In this concept for a young women’s online fashion boutique, the designer has clearly designed the target audience in mind. The bright and feminine color scheme, iconography and bold bubbly text all work together to create a fun and modern feel that is likely to appeal to teen girls.

Want to achieve a similar aesthetic for your own website design? The Pink And Blue Rad Facebook Ad Template in Canva is an excellent jumping off point for you to personalize with your own branding.

09. Optimize buttons and calls-to-action

While buttons are often the last thing to be added to a web design, they play an indispensable role. They can be the deciding factor as to whether the user continues to navigate your website or closes the window. The buttons on your website should shout, not whisper. That is, they should stand out against the other visual elements on the page and be easy to find and click.

Huemor via Hubspot

This website from design studio Huemor is a great example of how creative use of buttons can really elevate your overall website. The use of illustration and cheeky reverse psychology in their call-to-action ‘launch, do not press’ works together to create a truly memorable user experience.

10. Maintain a visual hierarchy

We touched on visual hierarchy when we mentioned eye-scanning patterns and navigation. However, it’s such an important principle that it deserves a point of its own! While website design should be aesthetically-pleasing and innovative, it also needs to be logical. That is, you need to deliberately structure your content in a way that makes sense to the user—even if it’s only on a subconscious level.

Bitcoin website design by Mike | Creative Mints via Dribbble

This website for bitcoin mining company CTSO is a great example. The header text is clearly at the top of the designer’s visual hierarchy, followed by the navigation sidebar. However, rather than taking them away from the homepage, this is used to guide them through the various anchor points on the single-page homepage.

11. Pay attention to the details

The big picture is undoubtedly important when it comes to web design. After all, it’s how all the visual elements come together that dictates the overall look and feel of your website. However, it’s important not to overlook the little things. Paying attention to the finer details like your footer icons, text spacing, and micro-interactions really helps to set your website apart.

via Carbon Beauty

This website footer for natural cosmetics company Carbon Beauty is an excellent example. Not only does it compliment the brand’s sleek and minimalistic website, but it’s a work of art in itself. They have combined symmetry, lines, buttons and icons to help keep the audience on the page for longer and encourage them to engage with the brand in different ways.

12. Use Fitt’s Law

Coined by psychologist Paul Fitts in 1954, Fitt’s Law states that the amount of time it takes to move to a target directly corresponds with not only its distance but the size of the target, too. Although this theory originally related to the human motor system, it’s now a central principle of UX (user experience) design. Often used in relation to buttons, the idea is that the elements you want to be easily selectable (for example, your primary calls-to-action) should be large and positioned close to users.

Very Good Copy via Hubspot

You can see this in play with this website for copywriting studio, Very Good Copy. Presuming the user’s cursor will be somewhere near the top of the screen, the designer has placed the large button smack bang in the middle of the screen to encourage them to click. Of course, the fact that the button is bright yellow doesn’t hurt, either!

13. Choose your images wisely

They say a picture paints a thousand words and this is certainly the case in website design. Imagery can serve so many purposes in web design, whether it’s telling a story, demonstrating how a product works, evoking emotion or creating atmosphere. However, it’s important to keep in mind that not all photos are created equal. Be sure to thoughtfully select the photos you use in your web design. They should not only be of professional quality and high resolution, but they should fit your overall aesthetic and have a clear objective.

Subaru website via Dribbble

Take, for example, this website design for car company for Subaru. The landscape photography serves a very specific purpose—to evoke a sense of adventure and help the user imagine how they might use their new vehicle. After all—they’re not selling a car, they’re selling a lifestyle! This is far more effective than if they had used a simple product image of the car without context.

Like the idea of using an image background in your website design? Canva’s Jewelry And Accessories Online Store Website template can be easily swapped out with your own imagery. It’s a particularly effective option for businesses or e-commerce brands who want to showcase their products.

14. Prioritize the user experience

User experience isn’t just for UX designers. Anyone who wants their audience to take action on their website (whether it’s subscribing to a mailing list or buying something) should pay attention to the customer journey. The good news is, this doesn’t necessarily have to be a complex or highly technical process. It’s simply about making it as easy as possible for your audience to take the desired steps.

Book and Travel website design by tubik via Dribbble

This website for Book & Travel showcases simple UX design at its finest. They know exactly what their audience is there for—to search for and book flights and accommodation—so they have built this functionality straight into their homepage. This isn’t an overly complicated device, but it’s certainly an effective one!

15. Consider using grid systems

Using a grid layout is a foolproof way to make your website look neat, organized and professional. Essentially, these are intersecting horizontal and vertical lines that serve as guides to place and align the elements in your composition. This is a powerful visual tool that creates consistency and order in your design—which can be particularly useful when there’s a lot going on!

The Hilgart Blog website design by Ruslan Siiz via Dribbble

In this blog concept for The Hilgart, designer Ruslan Siiz has used a grid-based layout to form the basis of his layout. While there are some asymmetrical elements and different columns throughout this homepage, this makes it feel tidy and structured.

You can achieve a similar effect with Canva’s Pink Advocacy Portfolio template. Its ready-made grid layout will help you create visual balance in your own website design.

16. Avoid big chunks of text

You only get one chance to make a great first impression on a new website visitor. This is why it’s so important to make your brand offering immediately clear to your audience. While this partly comes down to your copywriting (the written content), your website design plays an important role, too. For this reason, using big chunks of text on your website is a definite no-no— especially on your homepage. Not only can it dilute your brand message, but it can make your website look cluttered and messy.

via Alpha Ocean Blue

This website for finance company Alpha Blue Ocean shows how that you don’t need a lot of text to make a serious impact. They have immediately showcased their brand purpose in just a few words (using a crisp white typeface that stands out against the vibrant blue background) However, they also give the user the option to reveal more information about them by using the navigation on the left.

Canva’s Teal Books and Publishers Online Store Website template has all the visual elements you need to simply and effectively communicate your brand message. Simply change out the heading and sub-heading with your own!

17. Use invariance

The principle of invariance is when you put one different option amongst an otherwise homogenous group. This can be an indispensable tool when designing pricing tables on your website.

Code Canyon Website

This pricing table from the Envato website theme Modern Bootstrap 4 is a great example of this principle in action. While most of the options feature a white box with black text and a red button, the coloring is inverted for the ‘corporate’ package. Naturally, the human eye goes straight to the one that is different—which can work in your favor when you’re trying to draw attention to a particular option or special offer! Invariance can also be used in navigation menus, when you’re trying to encourage the user to take a particular action.

18. Hick’s Law

Outside the design world, this principle is generally referred to as ‘decision fatigue.’ Named after British and American psychologists William Edmund Hick and Ray Hyman, it’s the idea that ‘with every additional choice increases the time required to take a decision.‘ So, the more you overload your user with too many different options (whether that’s buttons or menu options) the longer it’s going to take to entice them to take action. And as you generally only have a very narrow window of opportunity to make an impression, this is not a good thing! This is why it’s so important to limit your calls-to-action, and make the ones you do use as effective as possible.

Green Mountain Energy via CrazyEgg

This website for electricity company Green Mountain Energy has clearly been designed with Hick’s Law in mind. The user is given only two main calls-to-action (which clearly stand out, thanks to the orange button) which serve the very important purpose of identifying whether they’re a home or a business. The takeaway? Don’t include more calls-to-action than you absolutely need to.

19. Use symmetry

While there’s a time and place for more abstract, asymmetrical designs, you can’t go wrong with symmetry. Referring to when two halves of a whole perfectly mirror each other, it’s an easy way to immediately make your website design look more balanced, neat and professional.

Backpacks website design by Gabe Becker via Dribbble

This design concept for a backpack company proves that symmetry doesn’t have to be boring. Designer Gabe Becker has achieved both vertical and horizontal symmetry by placing the image of the girl in the middle of the header. This is mirrored by the perfectly aligned row of bags below. This effective visual technique gives a structured feel to an otherwise vibrant and ‘loud’ design.

Want to achieve symmetry in your own website design? Canva’s Orange Black Advertising and Marketing Business Website template have done all the heavy lifting for you! All you need to do is add in your brand colors, fonts, and text to make it your own.

20. Design for both web and mobile

If you pay heed to only one website design principle, make it this one! Smartphones aren’t going anywhere—in fact, they’re increasingly becoming the most popular way we consume content. This is why it’s so crucial to design with both desktop and mobile in mind. This means ensuring your headers and paragraphs work well across both devices, that no images or other visual elements have been cut off and that your buttons are easy to use on a small screen. It also involves making sure your website loads quickly on both devices.

Backpacks mobile design by Gabe Becker via Dribbble

Optimizing your website for mobile sometimes mean using different layouts to desktop. You can see this in action in the mobile-friendly version of the above example. Here, they have used a full-screen image and grid-design specifically to enhance the mobile experience. This shows why it’s so crucial to treat design for mobile and web as two separate entities.

Taking these design principles on board doesn’t make you a stickler to the rules. It simply ensures you have a strong foundation down pat, so you can take risks and experiment where it counts.