book promotional website: cover options

OPTIONS:

Locke & Key (they already have a pretty cool site, I would basically just spruce it up)

Confessions of an Ugly Stepsister (I love how Gregory Maguire takes on the other side of the story)

Asterios Polyp (this is a beautiful graphic novel that ties heavily into graphic design)

White Oleander (a story about a girl trying to find a home- full of drama and vivid imagery to pull from)

The Girl With The Dragon Tattoo




INSPIRATION:

Harry Potter
Kinsey And Me
No One Belongs Here More Than You
Lion Of War

Dark Places
The Brief Wondrous Life of Oscar Wao
Warm Bodies

unit eight reading

READING SUMMARY

Chapter ten really reiterated good design that functions on a level that we have come to know and expect. Usability as a common courtesy really made me think of my "annoying" web finds. For example, when paying on Seattle City Lights website, they have the "continue" button on the left and the "exit" button on the right. Since I am used to sequentially pressing the right button for "next" I often exit and have to re-enter my payment information. Enter immediate frustration.
Some ways that "diminish goodwill" or piss off users are: hiding information they want to see, punishing them for not doing something your way (ie- no spaces between credit card numbers vs having boxes that contain 4 numbers), asking for unnecessary information, using filler words (your time is valuable to us- yeah right), showing them an amateur looking site, and time consuming animation. I can think of a plethora of times I've gone through each of these issues. The problem with them, besides frustrating your user is that it might keep that user from coming back.
There are ways to "increase goodwill" as well, like: making the most desirable thing to do on your site easy, give users information they want to know, save steps (think use billing address as shipping address button), put effort into the site, know what questions the user might have and have readily available answers, printer friendly pages, recover from errors with ease, and APOLOGIZE! Let's be humans here and understand that we will make mistakes. But mistakes are (usually) easily forgiven when an apology takes place.

Chapter eleven really was eye opening to me. I can honestly say that I have never really thought about web accessibility. I'm going to go over the main things that can be done to make your page accessible to those who may have disabilities. First, you need to fix all usability problems that are typically effecting everyone. This means that if your tested group is continuously clicking on the end button instead of the next, maybe its time to switch those buttons locations. Seattle City Lights could save me a lot of time and frustration with moving one simple button. Secondly, it is good read about usability and accessibility. There are articles and books dedicated to the subject, and it wouldn't hurt to get more informed of good ways to get used to working through accessibility problems. Third: CSS- cascading style sheets. Now that I know about css I can't imagine coding page designs via html alone (think bold tag, color, etc). CSS gives formatting control, flexibility, and consistency. It also allows for easy text resizing and sequential order to your content. Finally, do the most important stuff: alt text for images, making forms work for screen readers, skip to main content link at the beginning of a page, keyboard accessible, use client side site maps, and avoid using javascript unless you have a great reason for it.

ADDITIONAL RESOURCES

Common Web Annoyances
10 Biggest Web Annoyances
Usability Accessibility
How To Conduct Usability Studies for Accessibility

unit seven reading

READING SUMMARY

What The Heck Is Responsive Design Anyway?
This was a really cool and informative website. What I love the most about it, though, was that it did what it was explaining. It pretty much follows the basic rule of graphic design, which is if you have to explain it, it has likely failed.
Before reading this website, I already knew what responsive design was. In taking my classes backwards, I have also already learned how to code for responsive design. It might not be pretty, but it actually makes a lot of sense. My best advice is to utilize your rusty math skills. The way that responsive websites are coded is through a system of percentages. One of the coolest parts about responsive design is that it's all coded in the same document, so stylistically you aren't changing much, just sizes.
Okay, back to the article. Responsive design literally responds to its environment. If you take a browser window and shrink it, a responsive site will rearrange items to fit better depending on the size of the browser. Why is this important? We have become the land of many sizes, from tablets, to phones, to computer screens. Wouldn't it be nice if your site looked just how you wanted it to from any of those platforms? Responsive design helps showcase your website the right way from many different platforms. It is important to consider time and money, browser support, performance  content and app versus website when thinking about responsive design. Responsive designing really is the future of web design. Don't shoot yourself in the foot by minimizing it's importance.

ADDITIONAL RESOURCES
The Importance Of Responsive Design
One Website to Serve Them All
2013- The Year Of Responsive Web Design
Responsive Tester *** Really cool way to check your own page
Awesome Examples of Responsive Design

unit six reading

READING SUMMARY

How To Create Your First iPhone App
This article really focused on the important, prerequisite steps for app development. It really reminds me of how we work in graphic design. Before you can have an awesome restaurant with red plates and mirrors everywhere, you need a concept.
The first step in designing an app is to realize your goal. This is not simply, "I want to make $1,000," but rather forces you to think beyond the scope of what you hope to make. You must think of all of the elements that your app will need, for example, someone to answer customer questions, someone to update the app, developers, etc. This is just a broad spectrum of the project for you, so you can have realistic expectations. Speaking of expectations, money is not promised. It depends on a variety of things, like production costs, popularity, and management.
As you might expect, another very important part of this process is to have your idea evaluated. You can and should have it evaluated by multiple sources, including marketing professionals, developers, and personal connections. Some things to question: does it solve a unique problem? Is it serving a niche crowd? Does it make people laugh? Are you improving on the wheel? Is it highly interactive? Knowing these things will help you put together your marketing plan.
Now that you have a better idea of what the app does, your goal, and what you need to keep it running, you can begin putting together a monetization and marketing plan. Thinking about how much you are willing and need to spend to get the app off the ground is very important. Next, you will have to sign up with an Apple Developer account for $99 annually. This ensures that your app goes under your name and brand. Now it's time for sketches. You don't need to have perfect sketches in order to get your idea across, but the more clear they are to other people, the better chances you will have with working with a developer and getting things right in the early stages. At least one sketch per page is necessary. The next step is to identify your outsourcing needs. This usually covers a designer, developer, and promotion and marketing person. Find out what you need specifically, and then find those people to work with and hire them.

I felt like this was a really interesting article because I never really thought that this much insight and background went into app design. If these steps help an app become successful, I can only imagine how many apps have been left on the chopping block. Some apps still make it, and I hardly believe they were approved (I have a knock on wood app- it's just a vector art screen that looks like wood that does nothing).


iPhone App Icon Design: Best Practices
This article focuses entirely on creating a successful app icon. This is imperative to understand, as you have a 57x57 pixel square to work with. To find great looking icons, I would suggest looking at the top downloads from the app store. You will find items like facebook, instagram, and google. I have found that the most unsuccessful app icons usually are for games; they are unsuccessful because they are doing the age-old ten pounds of shit in a five pound bag.
How can you avoid having a bad app icon? Keep these things in mind: don't use words, keep it simple, don't use Apple's standard gloss feature, consistency is key, and stand out! This might sound like a huge laundry list, but really there are great reasons for this.
Words tend to get pixelated, or are so small that they are rendered unreadable. Overcomplicated app designs also make it hard to understand what the point is. This is not always applicable to game apps, because if someone knows it is a game app, it probably doesn't need to get the "what does this do" idea across. Usually game apps use a character. Apple's gloss feature can change the readability of an app, but the purpose to is create a consistency in the look of multiple apps on a device. Since it is not necessary, it almost seems silly to add it if it may hinder your design. Below I've grabbed some examples from the app store to look at.

app as viewed in app store.

app as viewed icon size.

simple, clean, easy to understand app.

the app glare makes this app harder to see.

simple icon.

interesting icon.

ADDITIONAL RESOURCES

Apple App Guidelines
40 Inspiring App Icons
What Do Top App Icons Have In Common?
App Design Templates
How To Make A Top Selling App With Great Design
App Design Trends

unit five reading

READING SUMMARY

Chapter 8 is a pretty short chapter and it really just covers the uselessness of arguments about usability. We've all heard the saying, different strokes for different folks, and this is the primary focus of this chapter. Unfortunately, when it comes to making decisions between a group of people emotions and personal likes/dislikes come to the table. It is almost impossible to just have a bias-free discussion about why or why not something works. One of the solutions the book offers is instead of having the mindset "do users like this..." aim for a more productive question, "does this thing with these objects work in a way that makes visiting this page a good experience for most people who might use this website..." It might seem like it's more work, but in reality opinions are like assholes. Excuse my french.

So what should you do instead of  unproductively arguing endlessly? Two words: usability testing.
This bring us to chapter 9, Usability testing on 10 cents a day. Maybe you've seen the movie Kate and Leopold (don't worry if you haven't). In this movie, Meg Ryan plays a very successful market researcher. Her position focuses on testing viewing audiences and changing advertisements to please them. This is very similar to usability testing.

A focus group is not the same thing as a usability test, though. A focus group is usually a small group of people that react to different ideas and designs together. In a usability test only one person at a time is being tested, usually by an individual doing the testing, and they are usually physically working through a design. I know that sounds a bit confusing but I promise to clear that up a bit.

Usability testing does not have to be a big, expensive ordeal. In fact, the more simple and inexpensive you do it, the more times you can test! All you really need is a camera or some sort of software that records what is happening on the computer screen and what is being asked of the user. To set up a test, you should set up a computer at a desk. Bring the user in the room while the design is not visible. The lead will talk the user through the process, making sure it feels comfortable for the user. Comfort is VERY important here, mostly because you want the user to feel okay if they make a mistake or can't complete the task you've asked since this is the VERY reason why you are testing: to make your design better! After a short introduction of the project and background questions for the user, you may show the user the design. Before instructing the user to click around, you can ask questions like what do you think this design is for, is it obvious, what would you click on first, etc. This will get an initial feel if the user understands the point. The rest of the test can continue in a similar fashion, with you asking the user to complete a task, while observing how the user reacts with the design.

This sort of testing is not used to prove or disprove any part of a design, but rather to inform the designers of potential hiccups for users. Most people involved will have some sort of emotional tie to the project, and this really allows them to step back and see it through the eyes of their potential client. Testing is a HUGELY important part of a design process, and it should be done EARLY and OFTEN by really any users of the web, not necessarily only by your target audience.

These chapters were really eye opening for me. I have previously coded my own website, and have done my own version of testing without even knowing it. When I showed my site to an instructor, I watched as he clicked around to understand how my "simple" website worked. It was interesting to take notes on places he often clicked to navigate around the site, although they were not what I intended. I think this process really is as important as the book makes it out to be and should be done repeatedly.

ADDITIONAL RESOURCES
Usability 101
Usability Testing Demystified
5 Second Usability Testing
Introduction To Website Usability
Website Usability Tools
Usability Testing Myths

unit four reading

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

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