Start a Profitable Blog in 5 Days

The steps that have helped my students grow their blog to $1,000 – $10,000 per month!

Today’s Hottest Web Design Trends

When it comes to your web design, you want to be cutting-edge, memorable and effective. But how do you do that? You do it by staying on top of the hottest design trends and knowing where web design is going in the future.

 

Web Design Trends: Responsive Design vs. Mobile-First Design vs. UX Design

You may hear that your site needs to have a Responsive Design or Mobile-First Design or User Experience (UX) Design. Which one is right for me and what do these mean? These are NOT competitors, you need all 3 in web design and I’ll show you how.

 

What is Responsive Design?

Responsive design is when a website responds to a device by changing the layout to accommodate the device width and height. For example, responsive websites use a grid (usually 12-column) and displays all 12 columns in a desktop/laptop view, 3-4 columns on tablets and 1-2 on a phone. The true number of columns displayed is determined by the template and size of the device.

In the illustration below, see on how the layout of the content changes and becomes stackable based on the device. See the grid?

WDiC - Web Design Responsive Graphic

 

How to design a responsive website?

It’s all about the framework (grid) when developing a responsive website. You can use an open source framework or create your own framework. These frameworks can be adaptive (multiple fixed-width layouts, measured in pixels) or fluid (multiple fluid-width layouts, measured in percentages).

For my first responsive site I used media queries to and created my own framework. It was very time intensive (I was learning too) and I’ve had to make a lot of changes to it since I created it in an adaptive format. Since then, I’ve used a lot of different frameworks and I prefer to use open source frameworks with fluid grids as it’s hard to keep up with all the new devices sizes. These frameworks save me so much time!

My favorite is Bootstrap!

In the last 2 years, responsive design has transformed from a trend to a standard in web design. If your site isn’t responsive, you are missing ½ of your audience!

 

What is Mobile-First Design?

It kind of speaks for itself! You design your website for mobile before browser. I’m not talking about apps, I’m talking about your website. Did you know that in the U.S., 25% of mobile web users are mobile-only, they rarely use a desktop to access the web.

I have worked with many clients when it comes to analyzing statistics on their site and even though they all have different audiences, 30-40% of their total traffic comes from mobile or tablets. Those are some big statistics for something that you wouldn’t have considered 10 years ago. Even though desktop view is still higher in statistics, mobile is rising at a much faster pace and now comes first.

WDiC - Web Design Mobile First

Mobile-first design has been a real switch in mindset for designers. You’ll see today’s hottest website designs showing off mobile-first design with clean, simple designs, large buttons, less photos, strategic headings and easy-to-use menus.

I remember meeting with clients talking about how “users don’t read…tell your message in a graphic” (and text, you need to do both for SEO). Actually, I still say that.

Now, I tell people to keep your awesome graphic for desktops and tablets, but it’s too small for phones so just show the text format. And, don’t show all your content; be selective of what you are showing, you need to consider load times and less time spent on your site as your users maybe on the road.

Focus on your services and how to contact you. Hide the fancy slider, use a simple mobile menu, don’t forget that your sidebars will be pushed to the bottom, so make sure your important content is in the body of the site and uh…flash doesn’t work on mobile/tablet too.

Despite the technical considerations of designing a mobile-first site, the results are worth it! It leads to higher convergence, quicker loading speeds and a better user experience.

 

What is User Experience (UX) Design?

UX design is designing systems that offer great experiences to users by the ease-of-use, user abilities and accessibility. You can’t predict user experiences, but you can design for them.

There are UX design principles that every website can follow. In addition, UX design can be specific for your audience. Going back to your brand strategy, who is your audience, how do they spend their time and how will they find you?

Websites that prioritize UX focus on these 5 principles:

  1. Easy to digest, creating a easy-to-follow hierarchy of information
  2. Clarity, explain how you would want it explained to you
  3. Trust, create honest and clear explanations
  4. Consistency, create a brand and stick to it
  5. Simplicity, the more simple a solution to a complex problem, the happier the user will be

 

What web design principles to you follow when creating a website? What do you think it the next hottest web design trend? Shoot me an email and let me know.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Share This Post

When it comes to your web design, you want to be cutting-edge, memorable and effective. But how do you do that? You do it by staying on top of the hottest design trends and knowing where web design is going in the future.

 

Web Design Trends: Responsive Design vs. Mobile-First Design vs. UX Design

You may hear that your site needs to have a Responsive Design or Mobile-First Design or User Experience (UX) Design. Which one is right for me and what do these mean? These are NOT competitors, you need all 3 in web design and I’ll show you how.

 

What is Responsive Design?

Responsive design is when a website responds to a device by changing the layout to accommodate the device width and height. For example, responsive websites use a grid (usually 12-column) and displays all 12 columns in a desktop/laptop view, 3-4 columns on tablets and 1-2 on a phone. The true number of columns displayed is determined by the template and size of the device.

In the illustration below, see on how the layout of the content changes and becomes stackable based on the device. See the grid?

WDiC - Web Design Responsive Graphic

 

How to design a responsive website?

It’s all about the framework (grid) when developing a responsive website. You can use an open source framework or create your own framework. These frameworks can be adaptive (multiple fixed-width layouts, measured in pixels) or fluid (multiple fluid-width layouts, measured in percentages).

For my first responsive site I used media queries to and created my own framework. It was very time intensive (I was learning too) and I’ve had to make a lot of changes to it since I created it in an adaptive format. Since then, I’ve used a lot of different frameworks and I prefer to use open source frameworks with fluid grids as it’s hard to keep up with all the new devices sizes. These frameworks save me so much time!

My favorite is Bootstrap!

In the last 2 years, responsive design has transformed from a trend to a standard in web design. If your site isn’t responsive, you are missing ½ of your audience!

 

What is Mobile-First Design?

It kind of speaks for itself! You design your website for mobile before browser. I’m not talking about apps, I’m talking about your website. Did you know that in the U.S., 25% of mobile web users are mobile-only, they rarely use a desktop to access the web.

I have worked with many clients when it comes to analyzing statistics on their site and even though they all have different audiences, 30-40% of their total traffic comes from mobile or tablets. Those are some big statistics for something that you wouldn’t have considered 10 years ago. Even though desktop view is still higher in statistics, mobile is rising at a much faster pace and now comes first.

WDiC - Web Design Mobile First

Mobile-first design has been a real switch in mindset for designers. You’ll see today’s hottest website designs showing off mobile-first design with clean, simple designs, large buttons, less photos, strategic headings and easy-to-use menus.

I remember meeting with clients talking about how “users don’t read…tell your message in a graphic” (and text, you need to do both for SEO). Actually, I still say that.

Now, I tell people to keep your awesome graphic for desktops and tablets, but it’s too small for phones so just show the text format. And, don’t show all your content; be selective of what you are showing, you need to consider load times and less time spent on your site as your users maybe on the road.

Focus on your services and how to contact you. Hide the fancy slider, use a simple mobile menu, don’t forget that your sidebars will be pushed to the bottom, so make sure your important content is in the body of the site and uh…flash doesn’t work on mobile/tablet too.

Despite the technical considerations of designing a mobile-first site, the results are worth it! It leads to higher convergence, quicker loading speeds and a better user experience.

 

What is User Experience (UX) Design?

UX design is designing systems that offer great experiences to users by the ease-of-use, user abilities and accessibility. You can’t predict user experiences, but you can design for them.

There are UX design principles that every website can follow. In addition, UX design can be specific for your audience. Going back to your brand strategy, who is your audience, how do they spend their time and how will they find you?

Websites that prioritize UX focus on these 5 principles:

  1. Easy to digest, creating a easy-to-follow hierarchy of information
  2. Clarity, explain how you would want it explained to you
  3. Trust, create honest and clear explanations
  4. Consistency, create a brand and stick to it
  5. Simplicity, the more simple a solution to a complex problem, the happier the user will be

 

What web design principles to you follow when creating a website? What do you think it the next hottest web design trend? Shoot me an email and let me know.