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

portfolio website: full case study

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

portfolio website: site map

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.

portfolio website: project statement

  Create a list of all users that may visit your site (not from the WWW but those you’d invite).

•  Creative Directors
• Art Directors
• PR Personnel
• Clients
• Students
• Teachers
• Friends
• Family

What will each of those users want to see in order to enjoy their visit to your site? Name your intended audience (the person(s) you need to persuade.)

• Creative Directors and Art Directors:
  Images of projects that are easily accessible and quick to navigate through. Easily found and downloadable or selectable resume and obvious contact information. Probably a safe bet that less is more- showcase your work, less clutter.
• PR Personnel:
  Resume that is easy to download or select. Obvious contact button.
• Clients:
  Beautiful work and easy navigation with a seriously easy to find call to action! Hire me or contact me button should probably be on every page. 
• Students:
  Inspiration! Students are more interested in picking apart your coding, finding how things work and looking at your work to get ideas for their art. 
• Teachers:
  Easy and quick navigation. Concept driven work with explanation of work.
• Friends:
  Work that looks "realistic" and makes sense conceptually. Fully functional page that is not hard to understand but that really showcases my work.
• Family:
  Any work posted by their awesome daughter/cousin/niece/relative that they can be impressed by. Must be VERY easy to understand with anything that has an image clickable (basically).

Describe what you need to inform and persuade them of:

Promote my: designs! I need things to show that are WORTH promoting.
Goals of the site are: showcase my work in a way that is easy to understand and navigate, without overwhelming the viewer but still keeping interest. 

My ultimate message/philosophy (about who you are): "Design is so simple, that's why it is so complicated." -Paul Rand
I believe that the most promising and beautiful work is the most simple, and conceptual. A picture can say a thousand words, and I want to prove that to you with my designs.

What is the story you are telling? Simple is beautiful. 

List the assets you need to persuade the user: Which 7 (minimum) projects? scans of what?, photos of what objects? images from what computer graphics program? what descriptive text? list them.

•  Backdoor at Roxy's Identity System and Collateral
  Logo
  Letterhead, Business Card, Envelope
  Direct Mailer
  Menu
  Signage
• Bathtub Gin & CO Identity System and Collateral
  Logo
  Letterhead, Business Card, Envelope
  Menu
  Table Tent
  Style Guide
• Roq La Rue Gallery Illustration
  Pen Illustration
  Full color pencil illustration
  Flyer
• GQ Magazine We The Living Dead Article
  Splash page
  Pull quote
  Spread 1
  Spread 2
• TWIF Beard & Stache Fest
  News paper ads
  Billboard
  Teeshirt
• Nintendo Super Princess Daisy
  Logo
  Process Book
  Game Cover
  Splash cover design
• Trader Joes Newsletter
  Cover
  Spread
  Folded Newsletter

 For the purpose of structuring your website portfolio pages, list the categories of work you will show. (for a Photographer, or example, it may be portrait, product, sports photography categories).

 Potential subcategories

• Print Work
• Web Work
• Photography and Retouching
• Hand-drawn work

Concept Statement:

The main purpose of my website is to show my work to future employers and potential customers. My work should be the focus and star of the website, so I don't want it to get lost in a messy or cluttered homepage. I want the website to have very intuitive and easy to understand navigation, with the aid of thumbnails and directional arrows to drive users to change projects. In order to grab attention and keep attention on my page I will use variety and show my best projects as well as include large, high quality images. As a designer, and a person, I rely and use humor in my work and my life. It is important to me to reflect who I am to my audience but also to keep my humor aside from my professionalism. 

In order to show the best possible me, and best possible projects, I want to hand pick the designs I showcase. My personal logo or name will be a stationary position on the website along with the navigation to create a feeling of consistency and ease. I will utilize arrows to toggle through projects as well as have click-able links so a user can always easily change what they are seeing. My main goal is create a website that people can browse without fuss or hassle that has an obvious call to action: hire me!

unit one reading and inspiration: graphic design portfolio

READING SUMMARY
These first two chapters were about going back to basics. Just like most design classes have taught me, keep it simple! Successful web design is web design that can be navigated and understood easily from the users perspective. When things get overcomplicated on a website it becomes hard to navigate and frustrating. The second chapter really talks about how users are more-or-less, rapid clickers. Tunnel vision sets in when there is a goal in mind (and honestly, how often are we NOT looking for something) and people tend to just click whatever strikes their fancy first, even if there is a more straightforward way to find what they are looking for. We are habitual creatures that tend to do things the way that we know how, even if it's not the most efficient way.

While I felt like the things that were covered were relatively common sense, I think it is really very important to take into consideration our habit-forming nature. Personally, I have used Adobe Photoshop for years- probably since about 2004. I do things the way I taught myself to do them if I wasn't sure the correct way. I am currently learning hot keys and shortcuts and my mind is blown. I initially turn on autopilot and try to do things the old way, but the more I learn and utilize these shortcuts, the more time I devote to what I'm doing and the less time I have clicking around. I feel like web users are very similar. Once something works, they will do it that way until they train themselves otherwise. Our job as designers is to not only make things work beautifully, but quickly and comprehensibly, in a way that might aid our visitors to learn! That sounds like a big responsibility!

Why Mood Boards Matter was a very interesting article explaining the importance of mood boards. As a designer I am always looking at pictures of ANYTHING to get inspiration. A mood board is just a collection of inspirations that give the vibe of the direction you want to take your project in. They are a great source to refer back to when designing as well as a great option to show clients. In the design world we always want to SHOW and not TELL. A mood board really does just that. Now if only I could settle on one style...



INSPIRATION

These are some really beautiful graphic design portfolios and websites!

Cymetriq

Charlotte Tang (don't forget to check out the awesome color hover effect!)

Olly Gibs (love the type and the hover- also check out the about me page, love how it opens to the right)
 
Paul Currah (so, basically I am obsessed with hover effects)

Ben Barry

Kendra Schaefer (sassy and sarcastic. I can dig it)

Cast Iron

Moreten Claussen (you're welcome for the mind explosion)

M1 (it's not in English, but it is so fun!)

Ben Hulse

Ryan Scherf

Scribble Tone