READING SUMMARY
Chapter 7 discusses the homepage even further in depth than we've gone previously. It begins by breaking down how a user feels when a homepage is landed upon. The four main questions they might be asking are: What is this, what do they have here, what can i do here, and why should I be here (instead of somewhere else). It is important for the designer to leave clues for the user to figure out the answers to these questions on the homepage. This can be achieved a number of ways including keeping the most important content above the fold, using a tagline, welcome blurb, and headings, as well as easy to understand navigation with a prominent logo.
Now let's break these ideas down a bit. Above the fold sounds strange for a website, since you can't fold your browser. Think about it in the sense of a newspaper. The most important story is on the fron page, in bold type, above where the paper gets folded. Other stories can also be shown, and we get the idea that they are important as well. Imagining the upper quarter of your webpage as above the fold can help you to place your most important content there. Obviously, one must be careful not to crowd it too much.
A tagline is the space near the site idea or logo and it usually is a phrase that helps the user understand what the site is about. For example, goodfuckingdesignadvice.com has a tagline that states, "serving the working class designer since 2010." While this is probably not the best example of a tagline, it is one nonetheless. A tagline should be short, think between 6 and 8 words and it should avoid being generic or cliche. This tagline feels a bit cliche, but the website title as well as address give a pretty good idea of what the site is.
Next we may or may not have a welcome blurb, depending on need. If you look at colourlovers.com you will find a nice welcome blurb, "Share your color ideas & inspiration. COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles... All in the spirit of love." This blurb really helps the user understand what the website is about. It also uses a technic of bolding important keywords, so a natural reader (skimmer) will pick on them even if they don't read the rest of the blurb.
I feel like at this point I've hit pretty hard on navigation and site id, so if you REALLY need more information on that you can just buy the book!
ADDITIONAL RESOURCES
Create a Rock Solid Tagline
Your Tagline: The Most Important Ad You'll Make
Website Taglines
Above The Fold (a whole website dedicated to UX and living life on the upper edge... of the page)
Life Below 600px
Some More Cool Navigation
1.30.2013
1.29.2013
unit three reading
READING SUMMARY
Chapter six really gets down to the nitty gritty of web-usability with navigation. When you design a site you should visualize it as a physical space, like a department store. You need to take into consideration how a person might get around to things that they desire. Signage is used in a store, and it can be used in web design as well. Links and drop down menus in navigation act as the large hanging signs over an aisle to tell you what you might find there. For example, a grocery store might have a sign for Baking. When you look closer, there is usually a smaller set of signs underneath that say things like "flour" "sugar" "spices" to help the customer find exactly what they are looking for. If your website cannot lead a user around, it can frustrate the user and make them leave.
Lets talk about menus. At a clothing website you might find options for Men, Women, and Children. When you click on one of the categories, let's say women, you will likely see another menu that offers blouses, skirts, dresses, undergarments, etc. It is helpful to somehow highlight where the customer is at a given time. For example, if I clicked on women the text might turn from blue (original link color) to red.
The importance of keeping consistency with layout is huge. Main navigation and site logo should almost always be in the same location (the only exception might be for a variance on home page and check out forms). Search boxes help the user looking for something specifically find it easily. Page names and headers are important to keep users where they need or want to be. Finally, it is nice to have a you are here indicator of sorts that shows a trail of where you've been. For example Home > Women > Shoes > Brand.
ADDITIONAL RESOURCES
The Importance Of The Home Button
Navigation Design
Planning & Implementing Website Navigation
Inspirational Navigation
Effective Web Navigation
Chapter six really gets down to the nitty gritty of web-usability with navigation. When you design a site you should visualize it as a physical space, like a department store. You need to take into consideration how a person might get around to things that they desire. Signage is used in a store, and it can be used in web design as well. Links and drop down menus in navigation act as the large hanging signs over an aisle to tell you what you might find there. For example, a grocery store might have a sign for Baking. When you look closer, there is usually a smaller set of signs underneath that say things like "flour" "sugar" "spices" to help the customer find exactly what they are looking for. If your website cannot lead a user around, it can frustrate the user and make them leave.
Lets talk about menus. At a clothing website you might find options for Men, Women, and Children. When you click on one of the categories, let's say women, you will likely see another menu that offers blouses, skirts, dresses, undergarments, etc. It is helpful to somehow highlight where the customer is at a given time. For example, if I clicked on women the text might turn from blue (original link color) to red.
The importance of keeping consistency with layout is huge. Main navigation and site logo should almost always be in the same location (the only exception might be for a variance on home page and check out forms). Search boxes help the user looking for something specifically find it easily. Page names and headers are important to keep users where they need or want to be. Finally, it is nice to have a you are here indicator of sorts that shows a trail of where you've been. For example Home > Women > Shoes > Brand.
ADDITIONAL RESOURCES
The Importance Of The Home Button
Navigation Design
Planning & Implementing Website Navigation
Inspirational Navigation
Effective Web Navigation
1.23.2013
unit two reading
READING SUMMARY
These three chapters reiterate the importance of keeping your website simple, easy to navigate, and to the point.
Chapter three explains visual hierarchy and how a user reads. It is very silly to think that anyone is going to read everything that is written on your page. I know it's sad, but really we are all skimmers. Most people don't read anything fully, let alone have the time to do so. Visual hierarchy is important for designers to show users what they are supposed to pay attention to. For example, on my blog I use BOLD CAPS to show a headline that I think might help someone navigate to a section that they want to read. It also talks about clickability. If something looks like a button, it should probably work like a button, right? A button, as you've certainly seen before, looks something like this:
You wanna click it, don't you?
It's a good thing if you do! This is a prime lesson... If you have a link that is clickable, it is very important to make it look like it is! Flat text doesn't look like a link, so how should someone know it takes you somewhere? (My easter egg attempt is likely failed because blogger won't let me turn off the hyperlink color change and underlining, but when you are coding yourself this can happen)
Chapter four reminds you to keep it simple when it comes to user options. Let me explain. When you are going to place an order on Amazon, you are prompted to fill out various "blanks" with things like your name, phone number, etc. Remember that drop down box you've seen since the beginning of the internet that lets you choose a state? That box is considered a mindless click box. It's nothing wild, or crazy and the user is used to seeing it. Now, imagine going to Adobe's website to search for troubleshooting. Chances are in the preliminary steps there will be a question of which program you have. You think, I've got Photoshop! That's easy. And then the dropdown lists version numbers. You scratch your head... Did I update last year? Or was it the year before that? Hmmm. This is what is considered a pause and think option. The less option likes this you have, the likelihood of easier navigation and usability.
Chapter five talks about the importance omitting words. Don't give instructions. Don't blabber on about yourself. If something won't take long tell the user (ie: survey). Keep it short.
ADDITIONAL RESOURCES
Visual Hierarchy
How to Use Visual Hierarchy
Power Structure & Gestalt
How to Check Your Site for Hierarchy
Clickability
Clickability & Search-Engine Friendly Websites
Why is Clickability Vital to Web Design?
Ease of Navigation
10 Principals of Effective Web Design (if you click any other site, click on THIS ONE!)
Improve Your Site Navigation
Omit Words
Omit Unnecessary Words
Compelling Web Copy
Avoid Killer Copy
These three chapters reiterate the importance of keeping your website simple, easy to navigate, and to the point.
Chapter three explains visual hierarchy and how a user reads. It is very silly to think that anyone is going to read everything that is written on your page. I know it's sad, but really we are all skimmers. Most people don't read anything fully, let alone have the time to do so. Visual hierarchy is important for designers to show users what they are supposed to pay attention to. For example, on my blog I use BOLD CAPS to show a headline that I think might help someone navigate to a section that they want to read. It also talks about clickability. If something looks like a button, it should probably work like a button, right? A button, as you've certainly seen before, looks something like this:
You wanna click it, don't you?
It's a good thing if you do! This is a prime lesson... If you have a link that is clickable, it is very important to make it look like it is! Flat text doesn't look like a link, so how should someone know it takes you somewhere? (My easter egg attempt is likely failed because blogger won't let me turn off the hyperlink color change and underlining, but when you are coding yourself this can happen)
Chapter four reminds you to keep it simple when it comes to user options. Let me explain. When you are going to place an order on Amazon, you are prompted to fill out various "blanks" with things like your name, phone number, etc. Remember that drop down box you've seen since the beginning of the internet that lets you choose a state? That box is considered a mindless click box. It's nothing wild, or crazy and the user is used to seeing it. Now, imagine going to Adobe's website to search for troubleshooting. Chances are in the preliminary steps there will be a question of which program you have. You think, I've got Photoshop! That's easy. And then the dropdown lists version numbers. You scratch your head... Did I update last year? Or was it the year before that? Hmmm. This is what is considered a pause and think option. The less option likes this you have, the likelihood of easier navigation and usability.
Chapter five talks about the importance omitting words. Don't give instructions. Don't blabber on about yourself. If something won't take long tell the user (ie: survey). Keep it short.
ADDITIONAL RESOURCES
Visual Hierarchy
How to Use Visual Hierarchy
Power Structure & Gestalt
How to Check Your Site for Hierarchy
Clickability
Clickability & Search-Engine Friendly Websites
Why is Clickability Vital to Web Design?
Ease of Navigation
10 Principals of Effective Web Design (if you click any other site, click on THIS ONE!)
Improve Your Site Navigation
Omit Words
Omit Unnecessary Words
Compelling Web Copy
Avoid Killer Copy
1.16.2013
portfolio website: wireframe sketches
 |
| Both of these designs allude to a traditional feel for the 360grid, utilizing different size relationships with images but a stationary navigation. |
 |
| Idea number three shows an interesting way of not opening a new page when a project is clicked, instead a sidebar with project photos and information slides out- I believe this would utilize javascript. Idea number four shows an different way of selecting another project when in a current project page by offering project thumbnails on the side instead of typical type navigation. |
 |
| Idea number five will be a cropped image style homepage with rectangular shapes that are echoed in the project page as well. |
 |
| Idea six is a slideshow style page that shows |
.jpg)
1.15.2013
portfolio website: moodboard
Color Scheme: I am interested in working with mainly black, or dark grey, lighter grey, and a color pop like a turquoise or red/orange.
Texture: I would like to create something that is typography based, with a nice flow and exciting hierarchy, so I've shown examples of chalk-board look-a-like pieces. I want it to feel hand made.
Typography: I love use of different type styles together, such as a script with a sans serif. I have a few favorite google fonts that I would like to incorporate.
My biggest challenge if that while I love the hand-made feel of chalkboards and the intricate designs, I feel like my aesthetic is more cubed, solid color, and simple. I would like to combine the two but using bits of the home-made feel style with a more simple and clean layout.
Subscribe to:
Posts (Atom)