20 March 2015

Web Design as introduction to UX

Written by Valentín García,

Web Design as introduction to UX

There is a big misunderstanding about what really is web design. We may think is how cute or colorful a site can be, how many cool pictures can display, and even worst: how much content can a single page allow. I must confess I used to be one of those people who thought that was the point of design; imagine a lot of media elements and text everywhere. No control, just a site crowded of anything.

Web design is also about User Experience (UX).

The focus of Web Design should be how useful a website is. If the user enjoy, if the text is easy to read and the colors are polite with the eye. That is UX: how positive is the interaction of users with an specific website.

In the next paragraphs I list 5 terms that are relevant to the topic, be aware even when this post is about design I plan to show you ugly screenshots in cases when one of the design features are missing. In that way I can explain visually its importance.

But first take a look to how looks the design of Protostar, a great and easy to use core template:

1

This design cover very well the following aspects of design. Let's remove one by one some design aspects for experimental purposes.

 

Spacing

A website contain several pages, those pages contain images, video, text, etc. In order to keep every of these pieces in place, spacing takes special importance to define where a paragraph, a module, an image ends and where the next block of information start.

Let’s remove spacing to see how badly design may looks:

1

As you can see the spacing between modules, text and the main container is gone. All the paragraphs gives the impression there is only one set of text.

 

Font

Reading is what makes internet the “information highway”. When you visit a site, how hard or easy is to read the content? Imagine if the designer decided for a font not comfortable to read:

1

In this example, we show a wrong font choice for all the content; we use a Google Font that looks cute but is hard to read.

 

Color

Contrast is the key, use in text an opposite color to the background. Black and white are the popular combination but is not the only one.

What happens if we don’t care about the colors and just add random choices? See the next example to answer that question:

1

The contrast between gray text and a lighter gray background is not enough for a pleasant reading experience.

 

Responsive

In order to visit a website from a smartphone or a tablet to access the same content available from desktop, responsive is mandatory.

In the old days (in many cases still now) the developer used to create at least two websites: one for the people who visit from desktop screens, and another for mobile. This means 2 separate installations to maintain, which means double work.

Try visiting a non responsive website from your smartphone. The content will be so small that a big zoom would be required; a poor UX I may say.

 

CSS

CSS is the technology for design that makes possible the previous 4 terms, I share some  example properties from each one:

  • Spacing: margin and padding.
  • Font: font-family and font-size.
  • Color: background and color.
  • Responsive: media queries.


Conclusion

We may think design is done automatically and certainly the modern browsers take care of some default aspects, however there is a lot of work to cover the basics. A bit of makeup is needed to make it happen.

 

About the Author

Valentín García

Valentín García

Web developer and designer that love building sites with Joomla. Currently working at OSTraining as Director of Design.