Blog Post #5 Single Web Page Designs

“What separates design from art is that design is meant to be… functional.”
―Cameron Moll

What site does use Single Web Page design effectively?

The band Ousback’s website (http://www.iamousback.com/) combines some very appealing imagery and an enticing layout. The single page website opens with a huge hero image with a simple brushed name of the band. Which captures the lonely but also beautiful feeling very similar to the music of the band. The hero has visual dominance but doesn’t distract away from the navigation, it leads you to the two sections of the website: Listen & Connect. The two sections do not make you work to find the content you are looking for, the listen section displays four songs available for you to listen to, and link to purchase the CD. The connect section displays are short clear list of links to contact or follow the artist.

The website’s simple navigation and easily distinguishable content divisions, make this a successful single page website. The utilization of the single page works for this site because it does not try to convey to much information, and the transitions between the content is clear to a visitor to the site.

What sites does use Single Web Page design ineffectively?

A site focusing on interactive design (http://www.reverenddanger.com/) has a beautifully designed website full of rich color and interesting graphics. But, I had one hell of a time navigating their site.While the site’s beautiful flat design is very engaging each scroll down its page has something new pop out which identifies the section. Again not a bad thing, but you have to wait for that to load in order to have good context of where you are, or what you are reading in their website. Take the image to the right for example. While it is well designed if you had scrolled down and seen this image without the pop-up information coming up, what the hell would you think this was about?

I think this site is a great example of how something can be very tasteful and artistic, but it is limited because it is somewhat impractical. And after all that’s for the most part what website is for, it has to look good but it must be useable and practical.

Exercise #4 Spoiler Alert: Vitamin String Quartet

One of my favorites bands to listen to when I need some inspiration: The Vitamin String Quartet (http://www.vitaminstringquartet.com/). I feel they would benefit from a single page website because, they have a finite amount of information that needs to displayed, and it would also allow easy access to that information. Their website as it is isn’t to bad a little dull, a red header with the greatest hierarchy grabs your attention first. That is a good thing though I think however, they could showcase their album art more to add contrast to their website. They has some very interesting covers that would make the site visually stimulating and encouraging more exploration of the site. As opposed to just searching a single section of the site and leaving.

UI/AI Pro: Nick Finck

A user experience professional specializing in the fields of  information architecture, interaction design, usability and user research for web and mobile applications. Nick Finck is a wealth of knowledge on the subjects, and I was lucky enough to sit in on his lecture. Nick broke down user experience into 5 categories: Design & Details, Simplification, Process, Research, and Our Job. Below are some of the key-points I took away from this great learning experience. 

User Experience

Design & Details

When designing we have the problem to figure out how to present something without it becoming overwhelming. A part of this which Nick tied into web design was that in a websites design you must have context so that a user has reference when traversing a web page. That one solution to this is the little nuances and transitions that as designers we can employ to create a greater user experience.

Simplification

In our desire to make apps, technology, websites, mobile apps, etc more simple we run into the problem of making things so simple that the become redundant and unusable. We can over come this and making things simpler by putting thought into our navigation first! Planning, planning, planning, and planning in the early stages of development will lead to better design and in turn user experience.

Process

A major part of a user’s experience if the process of a product. A major trend of products is having them constantly updated with new features and versions of them. By constantly having something need new versions and features rarely improves user experience. Rather, good experience sells naturally: putting critical thinking and thought into how someone will interact and that experience the user creates themselves is what makes something useful or as Nick simply put it ” sell experience not versions”.

Research

Observe how people use what you are creating. All the data in the world may not solve the problem the simple act of seeing how someone will use your product is infinitely more valuable. Nick gave an interesting examples about Flickr, which was originally only a feature of a product. But because someone examined how people were using it, they realized that it could be used by itself. How someone interacts and experiences something can only be learned through research and is a crucial step in user experience.

Our Job

To bring something to the people. As designers we have a lot of responsibility in our design and what we attach our names to can impact society. We have to adapt to the changing world, how technology is in constant change, and so should how we approach how we think and design things for people to experience. And what we have to take accountability for what we put out for other people if we are just mindlessly producing things people will not experience them, they will just consume them. People must experience how they interact with a product, and if as designers we become better collaborators we can craft a better experience together.

Blog Post #4: Topic and Visual Research

“All good books have one thing in common –they are truer than if they had really happened.”  -Ernest Hemingway

Author’s Website

Unfortunately Ernest Hemingway died many years ago, and even if he was still alive he probably wouldn’t want a website. But thankfully someone did create a website in his honor.

http://www.timelesshemingway.com

Information:

The website centers on the education of Hemingway being that it was created by an educational foundation, and of course in concentrates on Hemingway’s life and his works. The image in the header of the main page depicts this by giving us a images of Hemingway from childhood to old age. The menu bar in the header gives the viewer a good idea of what to expect, pages about Hemingway’s novels, famous quotations, archival photos, and articles on Hemingway as well. They have organized each category by what would be the most sought after information by a casual browser, and then to things like their blog or links. For someone was digging really deep into information on Hemingway.

Focus:

The website’s main focus is on informing the viewer about Ernest Hemingway as quickly as possible, with as many options they have available to them. This is very evident in their homepage their introduction of “a wealth of information about Ernest Hemingway”. Directly below that is an unordered list of links to more information about the author. So clearly that is what they think one of the first things a viewer needs or wants to see when they enter their site.

Critique:

My critique for their site would be first in it’s inability to create an atmosphere or a feeling on the website. A compelling background image would have done so much to increase the visual interest of the page. Instead they left a solid grey plain background, pretty exciting right? Wrong, they had a great chance to really create a sense of classicism and engage the viewer. Making viewing their site visually and intellectually interesting. Adding a few elements to establish the tone created in all of Hemingway’s  classic works would have made all the difference. Instead they put all the emphasis on the sites content, leaving it’s form unresolved.

Other Fiction Authors

Cormac McCarthy

One of the great fiction author’s still alive I did notice some similarities to Hemingway’s website. That one of the first things emphasized in menu is information about the author, articles pertaining to him, and then moving on too where you can purchase his works.The focus on the homepage is the most recent update they have put on the site announcing what ever recent event pertaining to the author are happening. This site also like the Hemingway site does nothing to establish the tone of the author’s works or life, just looking at his website what  would you gather from him? That his favorite color is yellow or he likes bananas? The site doesn’t give you an indication of the tone or style of this author.

Tim Dorsey

A hilarious Floridian fiction writer, though his website is pretty horrible I feel it is actually the most successful of the three. It also in the menu navigates you through author information and biography, on to books for sale and other information. But his site does communicate the the satirical and tourist farce that is all of Dorsey’s novels. And, that is what they did choose to emphasize in the homepage. I actually forgive the horrible design of the site, because the non-seriousness of it is essentially what the author’s books are all about.

Publisher

Scribner Publishing

The publisher’s website differs greatly from a single author’s website.A publisher has to focus on multiple author’s, Scribner displayed their author’s cover art in a rotating hero image to attract the viewer’s eye. This is the most important object on their homepage, it’s their job to create interest in the books and sell them to you. Second would be the latest updates on author’s novels seen below, and the side bar including social media. A very important element they are trying to sell your their brand by drawing you in, and getting you involved.

Additional Visual Research

I love the simple color scheme and images in this websites homepage. It is a great example of how a lot can be accomplished with only a little. Which is exactly what I hope to accomplish with my website creating a dynamic and deceivingly simple layout.

Here is a cool example of multiple book covers for the same book. Noticing how each book shows something different, but communicates a similar feeling. These covers also give you just enough information about the text inviting you in, without information over-load. I want to take away from this that I have to represent my novel in it’s website just enough for easy recognition without just telling a viewer what the book is about.

The king of the grid: Josef Muller Brockmann,  his work is especially important because it shows the importance of the grid in design and how the grid can be create beautiful design. This is very relevant of course in web design.

Starbucks vs. Seattle’s Best

A Website Critique

Both gigantic names in coffee I will analyze and compare how user friendly, and how effective these two company’s websites, and mobile sites really are.

Web Site

Since these sites represent major corporations they both have applied their signature color scheme: green for Starbucks and red for Seattle’s Best to adhere to their corporate identities. Placing the signature logo in the top left corner is a great trick both sites have used to reiterate their logo, knowing that we will almost always read a web page similarly to a printed one. On their homepage both company’s placed great hierarchy on whatever deal or special they are having beneath the sites header. Both site use an easily navigate able drop-down menu below their header. Starbucks’s just managed to incorporate a more user-friendly four-column, two row fluid layout for it’s website. It is easy to navigate, and displays just enough information. Using simple transition between pages allowed me to know at all times where I was on the site.
Seattle’s Best just came off two cluttered, using a one-column six row grid, which isn’t necessarily a bad thing, but with a constantly automatic scrolling hero image in each column of the website made each scroll down a page an eye sore. You could still use the site easily accessing the information displayed, but it overall was just too much visual clutter.

Mobile Site

Both sites had used responsive design in the transition from the computer screen to the mobile screen. I found however that Seattle’s Best mobile site communicated the feel of their company greater than Starbuck’s mobile site. The solid red bar and revolving image-bar was almost identical to the actual site creating a great sense of unity.While Starbuck’s mobile site carried over similar visual elements, their mobile site feels a little sparse, lacking in visual interest. You still know you are viewing something related to Starbucks, but a sense of unity is lost when you view this page it is almost taken out of context. The only thing that would tell me where I was if I randomly viewed that page is the logo in the top corner. Even though the mobile page is still easily navigable, a carry-over of more familiar elements from the main website would help connect the two together and create a great user experience overall.

Final Thoughts

Neither one of the two competing sites are perfect, however Starbucks managed to use great hierarchy accompanied with ample negative space. Though Starbuck’s mobile site left something to be desired in visual interest I would say that both Starbuck’s sites are more successful.Seattle’s Best sites aren’t bad, but they have just tried to shove to much stuff in your face at one time, a simple way for them to unclutter: less mess.

“Typography is the craft of endowing human language with a durable visual form.” -Robert Bringhurst

 

Typography has been a crucial element of human communication, and more and more we spend our time communicating on the Internet. But, how is typography transferred to this digital medium of mass communication?

So what are the differences between setting type for print and web?When a designing for the web it has become increasing more important to focus on how someone will interact with the type you are presenting. While we are in the age of the computer may people are viewing the web now more than ever on smart phones, tablets, and other devices. You must consider how the type will be easily viewed and rendered on these devices. Good type will have to be proportional to various screen sizes and resolutions, making type functional rather then decorative is a must.

Achieving well-set type takes a lot of consideration; a web designer will consider the length they have to work with and to solve that problem. A great tool for converting type usually measured in points to pixels is the website http://pxtoem.com/ this website gives you the leisure of having converting em’s to pixels taking a lot of the work out of type conversion.

There are of course unique restrictions to typography on the web as opposed to type on paper. The font you use can be a restriction if you are not careful, many people’s phones and computers may not posses the font you think may be perfect for a particular idea or project

That is where using a web safe font or @fontface come in handy. A web safe font is a standard font for the interenet that near all electronics have some version of (i.e. Helvetiva, Times New Roman, Arial, etc.). The advantage of using an @fontface is that you are given the ability to use almost any font of your chosing. An @fontface allows you to specify online fonts to other computers. A couple of great websites to access fonts are:
http://www.google.com/fonts
http://www.fontsquirrel.com/

Websites with good typography

http://www.12ozprophet.com/
12oz Prophet show cases everything street and street art related, their website’s type is very simple sans serif type with tight letter spacing. Their type decision was most likely made to have greater emphasis on the content and images on the website. It also provides a modern aesthetic to their site, which is very relevant as the art they are showcasing is very contemporary.

http://www.newyorker.com/
An iconic publication the New Yorker has a very well established and trademarked look. They have incorporated this into their website by using their signature font throughout it in headers and article titles. This decision enhances the websites feel as well as creates a sense of unity throughout, this atmosphere of class, sophistication, and elegance is key to the look of the New Yorker.

By examining these websites and learning a little bit I hope you feel a little more knowledgeable on the subject of setting type on the web. Remember that good type on the web can be a little confusing, but if you keep in mind your restrictions, and what you have available the possibilities are endless!

The website designspiration.net is dedicated to showcasing intelligent and creative design works of all styles and mediums I myself have spent many hours scrolling and searching endlessly through their website. Designspiration.net is a collection works with content ranging from: print, photographs, architecture, posters, illustration, fashion, books, art, layouts, typography, and whatever else a person might need to find some creative juices. Designspiration is catering to designers, professional and aspiring, or simply anyone with a creative eye the pages themselves are very straight forward the images are displayed in a simple grid format that can be arranged three different ways of your choosing.

Two unique features of the site I found are:

-A wide range of searches available

-The ability to search for images based on color

Contrast on the website between the simple white layout of the pages allows the images to really pop-out and remain the focus of each page. Helping adhere each page of the site, and giving it a sense of cohesion is the alignment of the images in it’s grid even if the images aren’t perfectly lined up in you search. Their repition of using the same sans-serif type face not only creates repetition, but creates unity on the site as well. All these features and layout choice I believe make this a successful website. The only improvement I would suggest would be the ability would be to have the name artist or designer who created each piece available.That way if you happened across a style or piece you particularly liked you could search for that person or fid them on you own if you were so inclined. Despite that small flaw I would say that designspiration.net is very successful in presenting smart design to any designer in need of some inspiration

http://designspiration.net/