If you’re a front-end web designer, odds are you fall into the long line of “creatives” that live for the artistic, the aesthetic, and the unique. Ironically, in the world of “Web Design,” this creativity can sometimes be an obstacle rather than an asset, when we’re forced to align what we’re doing with UX (user experience). Why? It’s because “creatives” often struggle with practicality and they are the minority, which in turn means that the majority of people using what we design need practicality. Here are some of the basic elements to web design in which, we, as designers, need to learn this balance between the artistic and the pragmatic called “user experience.”
#1 | LAYOUT
As designers, we seek to grab people's attention with something different, unique, and just plain awesome. Sometimes, it's tempting to turn a homepage into an elaborate art project or the front cover of a comic book. I have come across several such sites, who's design work is something to be admired in its fantastical, artistic elements. However, I have no idea what the site is about or how to navigate to the information that I need. They look wonderful and distract me from the important information on the site all at the same time. Unless you're building an online art portfolio or something similar, this isn't going to work well for the user that is just trying to find a phone number to call you at.
One key to designing aesthetically pleasing web layouts that are also user-friendly is the subtle use of shapes that not only dress-up your site, but also draw the user's attention towards the important information, rather than away from it.
// Example of a Distracting Layout
// Example of a Clean, Creative Layout
#2 | SPACE
Another thing to keep in mind with regards to layout is SPACE . I, personally, appreciate the clean, pointed look of a short, centered heading, paragraph, or logo, placed right in the middle of a neutral-background. As you scroll down, other information follows. It's almost like a bullet-point presentation with illustration and keywords, rather than a dissertation. However, the unfortunate reality that i've come to discover is that most web users see that and don't assume that there's something to scroll down to. All they see is one, brief piece of information and nowhere to go to find what they're looking for. the struggle...
When designing for user experience, we have to be careful and strategic with our use of blank space. It's important for a page to (very obviously) insist that there is more information below what they see, and it's even more important that the content is useful, and not just pleasing to the eye.
Visually Appealing, but NOT User-Friendly
Here are some suggestions for maintaining a creative use of space, while still being user-friendly:
A | Let the content on your homepage stop where the visible part of the screen ends, and make sure that there is clear, visible, and concise navigation to take them to the other pages.
B | Get creative with the links to your other site pages, making them the centerpiece.
C | Clever use of division leaves room for you to have both a clean, creative, minimalist design as well as important information on the visible part of the page, without hiding the important information below.
#3 | TYPOGRAPHY
Typography is a fascinating art style, whose web presence has drastically risen over recent years, due, in part, to the growing popularity of Adobe Illustrator, and other similar tools. Here’s the problem we run into on occasion—legibility. As far as user experience goes, it's takes precedence.
This is a fun font style, right?
Could you imagine trying to read entire paragraphs in this kind of font? I would bounce to the next site after a few seconds or scan the whole page only to realize by the end that I have no idea what I just read. Remember, web users are looking for information, so they need to be able to find it quickly and easily and fancy fonts take time and distract from the content.
It's simple—Don’t Overdo It! Logos and Headers are the saving grace for designers, when it comes to Typography. Feel free to get creative with those elements, because they are short, but important. Write the rest of your content in a font, whose simple elegance lends itself well to contrast with the logo or header.
One reason sans serif fonts have become so popular recently, is that their clean, minimalistic design is easy for readers to scan and works well as a clean contrast to art on the page.
Great Video Tutorial on Hand Lettering
Great Typography Resource
A More Affordable Option
#4 | COLOR
When it comes to web design, it’s best to think of colors as an architect or even a fashion designer would—meaning, a few, flat colors that blend well together is generally best, as opposed to gradients or illustrations with too many bright, distracting colors. That isn’t always the case, but unless you really know how to do it well, without distracting from the objective of the site and its content, color schemes are best. Adobe has a great tool to help with this that you should definitely check out:
A Note about Color and CTA Buttons:
Color can be an incredibly useful for drawing attention if done right. One web element in particular that you want to draw users attention to, is CTA (Call to Action) buttons. Once you've chosen your color scheme, set one of the brighter shades apart for your CTA buttons, so that they stand out to the user, and you can guide them exactly where you want them to go. By "stand out," I mean: choose a color that is more noticeable the the rest of your color scheme, but still complementary. Too much contrast just looks tacky.
In regards to CTAs, it's also helpful to know a bit about color psychology. Depending on your specific call to action, you might use different colors. Red, for example creates a sense of urgency, and would be helpful for marketing a time-sensitive offer. Blue, is trustworthy. Green, relaxes yet also stands for wealth. Orange is a popular color for Subscribe Buttons. Those are just a few examples. I found this article on the psychology of color to be incredibly helpful: https://blog.kissmetrics.com/color-psychology/
Color is not my strong suit, so I use all sorts of tools and other sources to glean information before deciding upon a color scheme for a site. Here’s a really great, helpful article that takes a more in-depth look at color and how to use it appropriately in web design: http://jonteaches.com/110/color-theory-for-the-web
#5 | MOTION
CAUTION: Use of this website is not recommended for users who are looking for information or for procrastinators, who are prone to distraction.
One HUGE pitfall the devil of design dug specifically for us in the web world, is motion graphics... They can be so useful in setting your site apart from others and drawing the users deeper into your content OR they can trap web users in an endless vortex of distraction and confusion until they can't remember what they were looking for in the first place because the need for information was just replaced by frustration or wonder. The train tracks of the web are slippery—use superglue.
Don't believe me? Google "bad website trends" or something similar. You'll find tons of blogs where motions and animations are listed as some of the major culprits of bad web design of late.
Blog: Web Design Trends to Avoid
Let's do a little case study here: 2 companies, same services, similar name...which do you think has the better use of motion. Which one draws you further into the site?
Overuse of Motion - Traps Users in a Vortex
Good Use of Motion - Draws Users In
Layout - Clean, subtle, but creative use of shapes and angles can set your site apart. Complex, detailed, augmented design can distract and confuse your user, even though it impresses you (the designer).
Space - Use it sparingly. Don't let it hide the important information from the web users.
Typography - Save the fancy fonts for your logo and headers. Use clean, easy to read, sans serif fonts for the bulk of your content.
Color - A few, well-chosen, flat colors work best. Stay away from gradients and textures unless you really know what you're doing.
Motion - Use with caution. Motion should draw your user in, not trap them with distraction or create a barrier between them and the information they're trying to get to.
NetteriaNET from Kostrzyn nad Odra, Poland on November 18, 2016:
tnx so much
Andrew Lowen (author) from Fallbrook, CA on August 17, 2016:
Thanks so much. I'm glad it was helpful. :)
CJ Kelly from the PNW on August 16, 2016:
Nice hub. I've designed several sites but I know they could be a lot better for the user. Good advice. Sharing everywhere.