Chapter 2 Notes: Web Design Principles

Nowadays, designing websites are more than just designing for the browser. You have to consider the design in mobile devices as well – smartphones and tablets. The buzzword is portability. Your site must be portable in a variety of monitor screens so that your design remains just as you want it to be. Test in various browsers, different operating systems, and device platforms. Think about monitor sizes/resolution and how this may affect the viewer’s experience with your website. Also of crucial interest is to test out your new site at various broadband speeds. It is easy to leave a visitor behind (or, rather, the visitor leaving your site) when your site takes forever to load because of slow connection speeds. When testing your pages, be wary of caches in your computer’s browser. Your computer will often reload a webpage based from information it stored in memory rather than download new information from the pages’ server because this is quicker to load. When testing a site, however, the cache can work against you, not showing the changes you’ve made because it is relying on old images/files from the cache.

Consider these two layout designs: fixed-width and flexible. The fixed-width design allows greater control for the designer to set how the page is to look. This kind of design works best for complex layouts that are heavier on media (images and video) rather than text. The flexible design will favor the viewer more. Based on the viewer’s device, the page is flexible to allow “stretching”, filling out the screen with flexible white space fillers. When viewing the site on a smaller screen, there will be less horizontal scrolling – always a plus in my book! This kind of layout is best suited for text-heavy and simpler layouts.

Design with the user in mind,” is a phrase I’ve seen a few times on various prints about web design and. To put this another way, BE the user and think of how you would actually use the site. The attitude should NOT be, “First the user will do this, and then they will do this. After clicking here, they will then read this.” A user is often less predictable than that. As a frequent web surfer, I know that I am constantly distracted by headlines, words in bold and larger fonts, and images. Once distracted, I will likely click on a link about the topic or image that first caught my attention. Once on the new page, I will get distracted by something else. Point is – users are often unpredictable and you cannot design your website with purely logical principles. There will (or should) be elements in your website that are catchy objects or text.

That said, though, there is SOME amount of predictability. Web users generally view a page in a few ways: a paper-based reading pattern, a landscape-based U, and an F-shaped pattern. A paper-based reading pattern is the pattern that forms when the web user treats the webpage like a book or newspaper. This is the most thorough kind of reading; the user reads left to right and then scan back to the beginning of the left side again. In the landscape-based U pattern, the reader starts scanning from the top left section, reads to the right, scans the rightmost items on the middle of the page, and then semi-loops back to the bottom leftmost section. (Think of this as a sideways letter U, with the opening to the left.) Finally, in the F-shaped pattern, users start at the top leftmost section, reads to the right, skips down a line or two to scan the second bit of the page, and then starts at the top leftmost section again and reads vertically downwards.

When designing your website, creativity is good when it is meshed in with some amount of convention particularly when it comes to navigation. A website with a good design will keep in mind that users come into a new site with certain expectations. We expect to find your company logo or blog branding somewhere on the top of the page, many times in the left corner at the top. We expect to be able to navigate through pages with a navigation panel of some sort. We generally find these on the left column, right column, or top of the page. If your site is a shopping site where users of your site also serves as consumers of your products, we would expect there to be a shopping cart icon or link to get to items we have toggled as interested in buying. We would first turn to look for this shopping cart on the top rightmost corner. If it isn’t there, we will be confused and frustrated if it remains nowhere to be found.

These expectations are just guidelines, of course. You can stay within the boundary of these guidelines or step out of them if you’d like. Just know that with these user tendencies, it is easy to point out which areas bolded text will work better than plain underlining to catch attention or which areas are best to insert some white space.

 

Citation:

Sklar, Joel. Principles of Web Design, Fifth Edition. Boston: Course Technology, Cengage Learning, 2012. Print.

Advertisements

One thought on “Chapter 2 Notes: Web Design Principles

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s