Blog post #5

All the Single Pages

(uh oh oh, oh oh oh)

Single page websites — why I would put a ring on it:

  • Faster and easier navigation
  • Low maintenance: you only have to maintain one page
  • You can design for quality instead of having to design multiple page layouts for the various types of content
  • Single page websites are less common, and can leave a bigger impression on its visitors

http://sixrevisions.com/web_design/the-science-behind-a-single-page-website/

Great Design

Having a taste for the whimsical and nostalgic, I was instantly drawn into James Garner’s portfolio website. The great thing about this website is really his imagery and how clean and organized the content is by giving it a generous amount of space between each section. It was really convenient to have a sort of navigation in each one, and it would change in orientation with accord to the designs, which makes it all the more fun for its visitors.

For example, the second section (Meet Bob) serves as a welcome and contains a horizontal navigation.

The navigation bar in the next  section (Go to Work) is vertical and held by seemingly disgruntled crabs.

Not-So-Great Design

Of the single page websites our class had to choose from, there really weren’t any terribly designed sites. However there are some aspects of web design that a site can lack, that could significantly take away from a visitor’s browsing experience, and ultimately, they end up in disappointment. Sparkling Milk  is visually enjoyable, however it lacks that convenient taxicab — the navigation bar. Whether or not I overlooked the navigation bar, or the lack thereof, on a very vertical single-page website, I honestly would have liked a means of navigation. Scrolling up and down the page, I felt overwhelmed and a little lost. The contents within the page had issues with hierarchy, where the images and the text were fighting for my attention. Plain and simple, it looked cluttered.

Musical Artist

Goldfrapp is an English glam-rock, electro-pop duo, with Alison Goldfrapp on the vocals and Will Gregory, the synthsizer. Goldfrapp.com has a design that coincides with the cover art of their latest album Head First.

The background is incredible eye-candy, not only because of the fantasy-like colors, but also because it’s continuously changing. The navigation bar sits comfortably at the top of the page, under the band name, where it’s easy to locate, making it easy to find your way around the website.

Blog post #4

Usability is a critical part of a website’s design. So critical, that it can determine its success or failure. So you should ask yourself, “Who uses the website?” Visitors, to be quite frank. The visitor of the page is the … Continue reading

Blog Post #2

A web designer needs to find balance between text and images for a harmonious web page.

Typography is, without a doubt, the most important part of a webpage’s design.  Along with images and graphics, it directly communicates with the audience with varying uses and treatments of text from big, bold webpage titles, to itty-bitty body text.

One of the biggest faux pas a web designer can make is focusing only on images and the graphical aspects on a webpage and, in most cases, leaving typography as the “third wheel” in the design.  A web designer needs to find balance between text and images for a harmonious web page.

Say you have a website in which the designer puts typography in the back burner. You probably wouldn’t notice the text. Where do you go? How do I navigate? Is that even a link? It would be similar to trying to interpret an obscure painting by some 16th century European artist. It’s going to take some time to get hold of what you’re trying to find.

So, when you have effective typography, the information is clear. The information is instant. Convenient for your audience.

Print vs. Web

Print medium and an electronic medium are far different from each other. The designer needs to consider how the audience is viewing the design.

(Fig. 1)

(Fig. 2)

Take the above examples. The top image(Fig. 1) is a screen capture of the website for the musical artist, Goldfrapp, and the bottom image (Fig. 2) is a poster promoting one of their shows. When a designer creates, he knows that first impressions are crucial. Kind of like a first date. The poster has very little time to capture the viewer’s attention and pull them in. The poster (Fig. 2), I feel, just reeled in fields of suitors. Because it’s a poster, it’s not always neccesary to fine-tune every little detail, just as long as it captures attention and is straightforward with its information.

The typography on websites serve a different purpose. Seen in the website screen cap (Fig. 1), information is divided into sections and subsections, as a means to keep all of the info organized for the viewer. This means fine-tuning is essensial for being nice eye-candy for your audience. Also, designers must keep in mind that there are diverse numbers of Internet browsers with different screen resolutions. It has to deal with a hefty number of issues, compared to other mediums, like platform compatibility and readability.

Source: http://webdesign.tutsplus.com/articles/typography-articles/web-design-basix-why-typography-matters/

A list of important things to take into account when designing a website:

  • Read the text. Simple. Just proofread. Make sure there are no extra spaces or misspelled words. Text should be attractive enough to read.
  • Apply a clear hierarchy. A developed hierarchy will help the viewer know where to start reading and how to continue.
  • Consider macro and micro typography. Is it readable as a whole? Is it readable as you view the details like the spacing?
  • Pay attention to type colors. Use colors that are pleasing and readable. A bad color scheme can cause headaches!
  • Your CSS. Maintain a level of consistency. “If you have solid CSS, you can move flawlessly in your website.”
  • Use the right font size. Too-big or too-small fonts causes eye straining! Be sure fonts are comfortable reading sizes.
  • Spacing. Too many spaces or too little spaces will interrupt the flow of the viewer’s reading.
  • Line-height. Allow enough space between each line, making sure they’re not overlapping with one another.
  • Alignment of text. Most people read from left to right. Text should be flushed to the left.
  • Identifying links. Links are usually in a different color or underlined.
  • Use safe fonts. A safe font can be read regardless of what internet browser you’re using. You want your text so that it can be read by anyone online.

Source: http://naldzgraphics.net/design-2/typography-web-design/

As said before, designers need to keep in mind that there are many Internet browsers and they need to  deal with a number of issues like platform compatibility and readability. Using @font-face, a useful feature in CSS3, helps identify fonts that are not already on the viewer’s computer. This tool will allow the browser to download the font from a remote site or a local folder. The font will be installed and then rendered in the way the designer intended.

Source: http://www.css3.info/font-face-fonts-the-way-you-want-them/

Examples

What impressed me most about this website was definitely the typography. If I counted correctly, there is a total of three different fonts used throughout the website. Supposedly, using more than 2-3 fonts is hard to pull off, but through careful consideration and decision-making it turned out to be a very successful and attractive design. Though there is a great amount of information within a page, the designer gave generous amounts of space for the content, and made use of hierarchy so it can flow down the page without causing headache for the reader.

This website and its content complement each other so well, it’s like a happy marriage. The hand-rendered look of the type suggests the playfulness and light-heartedness of the images and the style of the designer’s work. What is also interesting, is that the contents of the page change its appearance when expanding or contracting the size of the window.

Blog post #1

We all live on the same planet, so we might as well take care of it, right? 

Unless you live under a rock, it’s known that today’s generation is all about being “green”, ethical, eco-conscious, and even glamorous to boot.  Luckily, there’s a blog out there for the eco-fashionista! AwakenedAestetic.com was created in 2009 by a fledgling ethicist with a cause: “to make ethical self-expression simple, by finding the information and products that will make it easier to shop sustainably. There is no reason to sacrifice quality and sustainability for beauty.” This site covers interviews of designers, reviews green products, praises charitable groups, and even dishes the dirt about popular corporate companies and their sketchy practices. And believe it or not, this website is actually one of the first ethical fashion blogs to exist on the Internet.

The first thing that caught my eye was the headline, considering that it’s the only thing that’s moving and interactive within the page. I feel that the overall design of the page is straight-forward, maybe even boring, but still easy to read for those that follow the blog. There’s three columns of content — left column for  sponsors, right column for navigation, and the middle for the main articles. The background image further emphasizes the verticality of the website. As far as contrast goes, the color scheme is muted. This is probably so that the reader’s eye is drawn to the more colorful photography and more important bits of information.

This website is intended for women interested in beauty and fashion, while keeping our environment and the wellbeing of its people in mind. Again, I feel that it was straightforwardly designed so that it would be easy to navigate and easy to read.

http://www.awakenedaesthetic.com/