1
Write a post

Successful UX Design: Make Intuitive Decisions for Users

Published Feb 13, 2017Last updated Feb 14, 2017
Successful UX Design: Make Intuitive Decisions for Users

UI VS UX Designer

Intro

As we wait for the final version of Adobe Experience Design to roll out, we are left with two designing programs of choice — Photoshop or Illustrator. Throughout this post, I will give the gist of what you should be thinking about when designing your website's UI from a UX designer's standpoint. I use Photoshop CC 2017 as my editor of choice but you are free to use whatever program you would like as long as it has the same functionality as Photoshop. Throughout this article, you won't find many (if any) tips on the looks of website , i.e. colors, textures, animations, etc. This is because I am more focused on the UX side of your website's design. UX designers focus on the logistics of the website while UI design is more of the "oh, such fancy colors!". So don't expect that here.

Basic Page Layout

Before we begin, we must understand that your website's elements (divs) are just boxes; thus we must follow the HTML/CSS box concept. If you are unfamiliar with the box concept you can find a great explanation here.

Once you are familiar with the box concept you can move on to a paper design. As silly as it may sound, you should always put your ideas on paper first. You will gain a better idea of what you want to achieve and remember those great ideas that you want to implement.

Another goal of UX design is to ensure that your website is responsive. This means no fixed numbers in your styling. For example, if you are trying to resize a picture, use a percent value like shown below.

#img {
    width: 50%;
    height: 70%;
}

While this may not concern you directly if you are not coding the website, you still have to take this into consideration. Your monitor may be 1920 x 1080, but your smartphone is going to be different. A Pixel XL has a resolution of 1440 X 2560, which is a lot taller than it is long. Needless to say, it will have a big impact on how your visitors see your website — if your visitor doesn't like what they see, then you would've made a bad first impression. Furthermore, a Pixel XL is a lot larger than some phones. In fact, the average upgrade time period for smartphones are 3 years. That means at least 5 million people still use an iPhone 4, which packs a resolution of 960 x 640 (super small).

Screen Size

This means, in early 2017 we can only use 960 pixels for our website's width. Now does this mean it's all that you can use? No, you can still put objects as far as 1920 pixels wide (comfortably) but only put non-essential objects there. Leave the important text, photos, links, or whatever it might be in the first 960 pixels of the screen.

This is where the UX design of the website shines. The one thing I personally can't stand is not being able to find information fast and logically. I will use the following example of a website design I threw together with Photoshop in about 30 minutes. Does it look perfect? No, but it serves its purpose and I'll refer back to it for all points I make in this section.

Example

First, we have to identify the kind of website we are making. In this case, it is an ISP (internet service provider). The first thing that comes to mind when I think of ISP's is that people always have problems or issues to report — the help/customer service phone number should be at the top of the website in its own section. It is easy to spot and read; this makes the user happy and reduces the number of messages received asking what the company's phone number is.

Second, we have to consider the services we want to present to the visitors. While there will be a button on the home page body that links the visitors to the packages the company offers, some people don't want to have to dig through information they could care less about. In this case, we can simply make packages its own tab, making them accessible multiple times in frequented locations of the website.

Third, Let's talk more about menus. Today, there are a lot of menu designs such as dropdowns, hamburger, and even just arrows to navigate around the site. With that said there are some menus you should avoid. Do avoid drop-down menus — they are the most frustrating things to navigate and just take more time to code anyway. Hamburger menus look cool and set your site apart, but be sure the visor knows it's a menu. A lot of people will overlook 3 horizontal lines and think nothing of it. Try affixing the title "menu" beside the menu to attract more attention to it. I'm not even sure what you would refer to "menus" that are just arrows. They are impressive and definitely a way to show off your coding skills, but use them only in appropriate situations. Don't use it on a business website, but rather maybe a personal portfolio.

Conclusion

So what have we learned? Well, for starters we have refreshed ourselves with the HTML/CSS styling methods and concepts for responsive website design. We have explored the realm of navigation and what we should avoid.

This article really just scrapes the surface of UX design, but will no doubt get you off on the right foot. Here are two other posts that you may find helpful: 6 UX Web Design Best Practices for a Great Website and 7 User Experience Design Tips For Better Web Development.

And don't forget that you're on Codementor! You have experts at the tips of your finger to help you with whatever you need. Stay tuned for part 2 within the next month or so!

Discover and read more posts from Mathew Thomason
get started
Enjoy this post?

Leave a like and comment for Mathew

10
1
1Reply
sheriffderek
6 months ago

Interesting thoughts. “This means, in early 2017 we can only use 960 pixels for our website’s width,” I’m not really sure why why you would feel limited by any sizes when we have responsive layouts. Speaking of responsive layouts, the img example doesn’t really make sense, because the percentage height wouldn’t know what to be a percentage of. Better to use width: auto; http://codepen.io/sheriffde…

Get curated posts in your inbox

Learn programming by reading more posts like this