Practical Web Design: Learn the fundamentals of web design with HTML5, CSS3, Bootstrap, jQuery, and Vue.js

If you remember, we talked about grids in the first chapter. Grids help a lot with Responsive design, but their use does not stop there. Designers have used grids since print design, for books, publications, and especially magazines. To simply define it, a grid system is a system that helps designers structure their design, content, and imagery, and make it more readable and manageable.

Understanding grids is very important because they will help you design in proportion, balancing between the elements in your design, organizing modules, and sections. And more importantly, it will help the user navigate with the consistency and familiarity of your design grid:

The Grid system website (http://thegridsystem.net/), is a very useful tool for every grid system, and is a must-know.

A Call to Action (CTA) is a marketing term to define a designed element that solicits and encourages an action from the user and which the end goal is to attempt a sale. You'll hear a lot of this term when you start working as a designer when designing websites, especially for marketing purposes. The goal of every designer is to maximize the click conversion on this button, which leads to a sale at the end. Here is some indication of good practice when designing your CTA.

Making it obvious

One piece of advice I'll give is not to be too creative when designing a CTA because it remains a button, and people are used to it. As users have become accustomed to the online experience, they know that CTAs come in the forms of buttons. They see a button; they know what to do. Simple. Make it big, obvious, and stand out from everything around it, and it's in the bag.

Here's an example of a bad CTA:

Image from Capgemini.com website 2017. All rights reserved to Capgemini

The area pointed by...

Breadcrumb (or breadcrumb trail) is a secondary navigation system that indicates where the user is on a site or web app. The term came from the Hansel and Gretel fairy-tale in which the main characters create a trail of breadcrumbs in order to track back to their house. Just like the tale, breadcrumb in web allows the user to find their way back from where they started. It's very useful for complex websites or applications, but not very for a single page website that has no logical hierarchy or grouping.

The following are some examples of breadcrumb.

An example here on Google Drive:

Here's an example of an e-commerce website. (mac-addict.com.au):

The search bar has become more crucial for heavy-content websites, such as YouTube, Facebook, and eBay. Users are now familiar with using a search bar and they're always looking for it when they are searching for something. However, not every website needs a search bar. If you have a simple and intuitive website, light in content, a search bar might be overkill.

The following are some quick tips of good practice when designing a search bar.

The submit button

Designers often denigrate the submit button when designing it, but there is always a reason behind it. Even though users can press the Enter button, it's not valuable enough to not display it. Users need to see that there is another action to trigger. It's always better to have different possibilities for your users to achieve their end goal:

Preceding is an example of a bad Search bar and a good Search bar.

Icons are everywhere now, you can find them on road signs, keyboards, interfaces, and so on. Icons help us to better understand and interpret information. It serves as an important visual aid in any graphical communication. As a designer, knowing where and when to use icons to serve your design is really important and crucial. The following are some quick tips to start with.

Describing in a nutshell  

It's interesting how icons can quickly summarize what your text is about. Web users have become more proficient at scanning pages for content that is relevant and interesting to them. So by just looking at the icons, they will quickly jump into the information they want. For example, in this example: 

(uber.com)

The icons quickly describe what the content is about with a beautiful effect. 

Modal boxes are generally pop-up windows that appear on the screen rather than opening a new tab/window. They usually darken the background to bring attention to the popup. In short, modal boxes are used to show information to the user on the same page without reloading the page and by that, improving the usability.

Modal boxes found their origins from Windows, Mac OSX, and Linux, but they quickly spread out to web applications and other usages.

There are five common usages when using a modal box:

Modal boxes are not to be confounded with modeless components such as sidebars, accordion menus, toolbars, and so on, as they allow users to interact with the parent windows.

The following are some examples of Modal boxes:

Modal boxes used when composing a...

I still remember when designing my first website, fonts in web design were very restrictive. A few default fonts were available and we had to stick within most cases with the super neutral Arial font. With the font-face roll-out from CSS3, it was now possible to add custom fonts, such a relief for designers! Typography is very important in design, it can alter the perception of your visitors. Using a serif and sans-serif font can literally change the feeling of a website. A study was shown in the New York Times (https://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye-people-hearken-o-earth/) comparing fonts by their truthfulness. Take a look at this first graph: 

Weighted Agreement

You can see that people tend to believe the information written in Baskerville more than any other fonts:

Weighted Disagreement

Typography can really play a role in your design. Unfortunately, I'm not here to do an entire course in typography, but here are some quick tips to choose the best typeface...

Colors have an enormous importance in web design. According to Kissmetrics, when you view a color, your eyes communicate with a region of the brain known as the hypothalamus, then, in turn, it will send a signal to the pituitary gland and finally to the thyroid gland. This signals the release of hormones that cause fluctuation in mood, emotion, and resulting in behavior. Interesting, isn't it?  

Also from Kissmetrics, research has shown that it takes just 90 seconds for a site visitor to form a judgment or opinion. Further to that, 62-90% of that interaction is determined by the color of a product alone.

You should now understand why colors are extremely important and why it's crucial to choose them in the right way, at the right time, with the right audience, and with the right purpose.

We talked earlier about how design has evolved into a user-centered design. This is exactly what we will be examining now, so what is usability you ask? Usability is simply the attribute that defines how easy the user interface is to use. It's generally measured with five components:

Over the past few years, users have gotten used to certain standards in web design and don't tolerate websites that load slowly, are ugly to look at, or difficult to navigate through anymore. If your website is not usable, there are plenty out...

After reviewing all these web design components, I'll finish with consistency and why it is important. Consistency is by far one of the key components of a good website. It will bring the last piece of your puzzle for a great website or application. Consider an example of when you want to find your keys, but you know they are always in the same place, you don't have to think. But if you don't find it, you'll start to stress out trying to find it. Websites are the same for users. You don't want them to learn each time they come to your website.

In this chapter, we've covered quite a few topics, but to summarize, every component in web design is important on its own, for your design, but most importantly for the end users. With all the tips given, you are now able to create and make a website look great and user-friendly. 

Before you start digging into creating your own design, I want to introduce you to the next chapter, which will be talking about Responsive and Adaptive design, something you need to know as a designer or developer. Let's get started!