Ivy's 10 Rules of Web Design!

WEB DESIGN! What does it mean?! What is it for?! How do we use it?! These are tools and guidelines we follow as web developers in order to ensure our sites created repeated visits/use by surfers, or clients.

For this blog post, when asked what 10 rules to follow for web design would involve, this was a no-brainer for me because of my history in web design and computer science as a minor. Instead of scour the internet for these concepts, I decided to post what I, personally, keep in mind when creating web pages.

1. User Friendly!
Pages should be embarrassingly simply in instruction. Too often, we visit pages or online stores that make it really hard to add items to a cart, navigate back to the home page, etc. To make pages user friendly, I like to use elements that are repeated in more than one page of a site, things like search bars and browse menus, or even a header or footer with a link to the home page, or an 'about this page' link that is super easy to find.

Another way to implement a user friendly template,  is to add IMPLICIT instructions, like: "click on the link", or "click on the picture"! As silly as it sounds, some users cannot recognize a hyperlink, so instructions can help.

2. Navigation Ease!
This is somewhat of a continuation of the first principal, where you should be able to navigate a page easily, for example, go to the home page or back to a search result without having to hit 'back' on the web browser, ESPECIALLY if you are using cookies to store user information such as, contents of a shopping cart or an email address, as going 'back' on the browser can effect this.

3. MAKE IT PRETTY!
Users want to visit a site that is appealing to the eye! Pages that lack aesthetic qualities aren't super popular, unless its a government website... which brings me to my next point!

4. Know Your Audience!
 Your design and layout is 100% dependent upon who your target audience is. If you are making a website for your local DMV, the use of a lot of color, moving elements, and interactive elements is not really important. You're not trying to achieve repeat use from the website, people HAVE to use it, whether you make it look pretty or not.

An online store, however, or a blog, or site for a restaurant, HAS to use elements directed at its audience. Its not enough just to provide the information the customer needs. What does it mean to use concepts in elements directed at an audience?

5. Contrast!
Certain elements, links, or information bits REALLY need to catch the attention of a viewer. This is easy to implement, with bright colors, bold fonts, large fonts, and separate sections or elements for important elements. The use of interactive elements or hyperlinks helps here (when the mouse passes over a link, the creates a text bubble, for example).

6. Alignment!
Information that is repeated on each page needs to be in the same spot, on each page, and clearly separate from other elements. This is easy with the use of functions, and for example, using separate php pages with the repeated information, and using an 'include' function on each page, so that if you make an edit, you only have to do it ONCE and not on EACH PAGE the element is used on.

7. IT MUST BE MOBILE FRIENDLY!
Google says that over half of searches now are made from mobile devices, AND it is starting to show only mobile friendly sites in the search results first! There are many ways to make a site mobile friendly, but if you want your site to be seen, you better do it.

8. Make a Contact Page!
Its important for users to feel like the company or service is easy to reach. Contact info like a number isnt enough, make a form to submit a user message right on the page!

9. Easy on the Colors....
Contrast is GOOD. Colored text to get attention: GOOD. Too much color: BAD. No one wants to feel like they are on an acid trip when they visit your site, dont induce headaches.

10. IVY LIKES TO USE ANIMALS!
As a secret element to almost all my pages, I use or include hyperlinks to ANIMALS. Everyone likes animals, and I think they give the sites a little something extra that users will enjoy. Not a necessary part of web development by any means, but my favorite for sure. Bringing users joy is the best.

ONE MORE.....

11. USE YOUR OWN CODE. 
Dont be a cheater. Using someone elses code found on the internet is laaaaame, unless you give them credit.

What the C.R.A.P.?!

In our COMM 350 class, we learned the principles of C.R.A.P. to keep in mind when designing newsletters, web pages, and other visuals. These principles become exceedingly clear in importance through examples in class, and even in my own web experiences now, and it is clear that the success of a web page can rely entirely on the use of these C.R.A.P.

So what is C.R.A.P.? It is an acronym that represents using:
contrast, 
repetition, 
alignment, 
AND proximity!

Contrast refers to drawing attention to certain elements, phrases, or images by making them look different from the other elements on the page. Tools for contrast include size, shade, texture, hue, and orientation. 

I found an example of a website that has a good use of contrast: http://www.nixon.com/us/en/

Repetition refers to repeating images, elements, or phrases to draw attention. In this example, amazon.com uses repetition of an image to draw the viewers attention to a promotion:

Alignment, not unlike repetition, is a tool we use to pull structures together. As reminded in lecture, its important to "not place elements in your design arbitrarily", meaning without intention. 

This site uses alignment to catch viewers attention in a way that emphasizes each element differently, but equally, found at fightthenewdrug.org.

Finally, we use proximity to group related elements and separate unrelated ones. There is a great example from washingtonpost.com that separates elements with proximity to group topics together to keep the website from appearing cluttered. 

Using these principals will help me create web pages and visuals that are effectively organized, draw attention to the most important elements, and creates an aesthetic that creates repeated use from a customer or viewer. 

In searching for web pages that displayed the C.R.A.P. principals effectively, I also came across many that did not, and made me realize the importance in using them in order to ensure the effectiveness of my projects. This is a good thing to keep in mind as we advance in class with our news letters and group web site projects, and more importantly, our personal web site projects. I know I'll be able to do so, I just have to keep in mind what Ron Weibe wrote:

"The simple rules of basic design are:

• Capture your reader’s attention using emphasis.

• Keep your reader on the page using rhythm and harmony.

• Deliver your message through the design style, appropriate selection of type and sound textual information."