You are currently browsing the tag archive for the ‘Web Design’ tag.
As promised, I’ve got 6 web sites today looking at good design and bad design. Of course, it’s all relative. I had a hell of a time getting these pictures to look just OK in the previous post and I imagine this one won’t be any easier. That’s the downside of working with a template – it’s not always the right fit. So while this could be construed as the pot calling the kettle black, I do realize my layout leaves a lot to be desired. I’m just not letting that get in the way of getting the post out the door. (I’ve promised myself that any post started *will* get posted.) On to the comparisons, and keep in mind these aren’t the worst or best I’ve ever seen – just the ones I’ve seen today:
Web Sites with Poor Design
Online Printing site: At first glance this is not bad. There’s a nice order to the informational images near the top. However, the block of text below those is too dense. The line length is too long to comfortably read, the line height is too close, and the font size is too small. Also, the left column of navigation buttons is almost overwhelming.
Another Online Printing site: Obviously, this page isn’t plagued with densely packed text, however the pricing table is almost impossible to read without holding a piece of paper up the screen so your eye can follow the line to a particular data point. Not to mention, the font size will make your eyes cross trying to discern that much information.
One more Online Printing site: I’m not saying online printing sites are notorious for poor design, I’m just showing what I’ve found. This is the home page, scrolled down the page just a bit to show the absolutely dense section of text that *no one* will actually read. Add to that the plethora of little boxes all around and I’m not sure where to look first.
Web Sites with Good Design
Web Site about web design: This is one of the definitive sites for reading about good web site design, so, as expected, it has a nice layout. There’s plenty of white space for the eye to rest and the layout is reminiscent of an upscale magazine. (Actually, for good layout, this site is in my top ten favorites.)
Online Movie Rental site: For ease of use, this site is tops. That ease of use springs directly from the layout. If the layout is so dense that it’s hard to find what you’re looking for, then the layout is a FAIL. There’s an immense amount of information on this page, but the layout ensures it’s not overwhelming.
A Popular Blogging site: Again, lot’s of choices on this page, but they are not so densely packed as to be a turn off. The information is accessible and nicely ordered with enough white space for each element to be independent, yet part of the overall layout.
Well, that’s all I’ve got. Do you agree or disagree with the reasoning behind my choices? What are some sites that stand out for you as particularly good or bad? Let me know in the comments.
Since I began studying design in earnest a year and a half ago, I’ve gotten in the habit of noticing lay-outs of printed matter and comparing that to websites I visit. I’ve looked at website design with a shrewd eye for years, but it’s only recently that I’ve been making the comparisons with print.
Here’s six pictures of different layouts, from magazines to newspapers to ads, showing both good and bad layout. As I said when I was 5 and forced to eat everything on my plate, “Worst for first.” We’ll start by looking at what I consider sub-par design. These are by no means the worst examples of design I’ve seen, just what I came across today.
Mailbox flyer for rental store: This piece has way too much going on, there’s not much white space in which to rest your eyes, and it’s difficult to tell what the main focus is. Yes, it’s advertising all the amazing things you can get, but the text is small and I spent all of 5 seconds looking at it before tossing it aside because it required too much energy.
Mailbox flyer for satellite TV: This isn’t all bad, the main parts of the offer have sufficient padding around them. My big objections are the top where it looks like a salesperson ingested too much company propaganda, got too excited about more than 150 channels, and threw-up up on the page, much to his boss’ dismay. Then there’s the fine print. I always object to fine print because it’s impossible to read, but at least it’s usually at the bottom of the page. This ad includes fine print in the boxes of the main offers. Ugh!
Ad page on back of weekly alternative newspaper: This is also not horrible, especially considering the source. I include it here because it’s just not good. There’s too many colors and typefaces, not enough white space. Yes, the ads are competing for attention, but they end up all loosing the fight because it’s too much trouble to look at this page and glean anything from it.
Now on to the good design. Again, these aren’t the best layouts I’ve ever seen, just what I found today.
Weekly alternative newspaper: Considering the type of publication, this is a decent layout. It has a comfortable line-length so reading isn’t too arduous. There’s a nice pull-quote to draw the reader’s attention and there’s enough white space to give some breathing room while not too much to drive up the costs of a small paper. It’s a good compromise.
Magazine for design professionals: This is a magazine I’ve gotten for years and have always enjoyed reading. The layout affords breathing room and the artwork is not crowded. There’s quite a bit of white space on the page, giving the feel of a higher end publication.
Magazine for digital manipulation of photographs: This magazine caters to artists and designers who want to learn more about the programs they’re using. The layout of the tutorials is clean and organized. It’s easy to follow the steps and see the process from beginning to end.
So, there’s 6 examples of printed matter looking at layouts and paying particular attention to white space – the empty space on the page. Without it information gets lost and reading is too hard.
The next post will look at six examples of web sites and compare the layouts, and the use of white space, to the printed examples.
I had the opportunity to hear John Allsopp speak today about the future of web design. John is a web evangelist, author, speaker, and teacher of CSS. And, his enthusiasm for the future of the web is contagious.
As I previously wrote, my interest in the web started about 18 years ago, when the web was in it’s infancy. Bad design abounded causing limited access to information and frustration for designers and developers alike.
John took us on a history tour of the web, which sounded a lot like the “we had to walk barefoot uphill – both ways- to school when I was your age” speech a lot of us have heard from our parents as kids. But, in terms of browser capabilities in the 90’s and early ’00’s, that’s certainly how it felt.
Creating functional, good looking sites required lots of graphics that had to be cut and precisely placed to reduce the page loading time. One large graphic might actually be 4 smaller ones. If a link to a graphic was broken, 1/4 of the picture was missing. Animation was limited to GIFs and, really, it was best not to use it at all.
CSS (Cascading Style Sheets) was introduced in 1995 allowing developers to control the look of a site for the whole page instead of element by element.This was a major breakthrough. It’s use expanded with CSS2 in 1998. I started learning CSS2 just before I changed course for parenthood. At the time, I was amazed by what CSS made possible.
After seeing what John demonstrated today, I’m chomping at the bit to learn CSS3. Editable type independent of the user’s computer?!? Wow. GPU generated background gradients?!? Neat. Clean, beautiful animation that adds to the user’s experience?!? Unheard of – until now that is.
Pair CSS3 with HTML5 and the future of the web looks amazing. I’m excited that I no longer have to trudge uphill -both ways- to make great looking websites.
Writing is everywhere – boxes, bottles, billboards, magazines, newspapers, flyers, email, and websites- to name a few places. There’s one commonality between these disparate forms of writing: they use language. How each form uses language differs greatly and each has different expectations from the reader’s point of view.
Writing in newspapers and magazines is informative, educational, and opinionated depending on which section of the paper, or what kind of magazine, you’re reading. We, as readers, expect newspapers and magazines to have high editorial standards and be written clearly. OK, you got me there. I don’t think Us or People consider their editorial standards much, but I digress. Generally, we read these materials at leisure – over coffee in the morning, waiting in a doctor’s office, or riding on public transit.
From other printed ephemera (boxes, bottles, billboards, flyers, etc.) we decidedly expect less. The copy used on them is primarily for persuading – “Buy XYZ because it’s chock full of vitamins and minerals!” (Gee, I didn’t know foot powder needed vitamins and minerals.) The copy on these sources is written for accessibility and generally has a friendlier approach. These materials are typically read in passing – walking down grocery aisles, driving down freeways, grabbing the flyer off the windshield in the parking lot before tossing it in the back seat.
Websites, while including all genres of printed material, are read differently. We go to a website for information, to answer a question, to complete a task, and in doing so we expect to access that information or perform that task quickly and easily. Anything that gets in the way of our purpose is, at best, annoying, if not downright frustrating.
Across all these disparate forms of writing is an overarching expectation – good grammar. Reading something that’s well written imparts a sense of confidence in the information. If the writer misuses their, they’re, and there can we really trust him to know what he’s talking about? Likewise, if the writer’s writing lazily and using netspeak are you going to respect his opinion or knowledge?
In exploring writing, I came across a blog post on how to write a good first message for an online dating service. The number one rule was “Be Literate.” Messages that used netspeak, had gross misspellings, or bad grammar (or all three!) didn’t get a a response. I can’t agree more. Well written messages, articles, etc. give confidence to the information and, more importantly, eschew obfuscation. (One of my favorite phrases, because it doesn’t follow it’s advice.)
I was first introduced to the world wide web in 1992 by my brother. I found it fascinating and wonderful and compelling and ugly and awesome. And, it was something very few people knew about. I remember when I lived in Chicago, my brother and I would always point out the URLs we saw in ads, usually on the sides of buses, because they were so rare. That was 1993/1994.
Fast forward a bit, and I had the opportunity to put my fascination to work. I had learned quite a bit about website construction and disliked most of what I saw. (If you’re ever curious about early website “design”, check out the Wayback Machine for some gross examples.) I started creating websites, for pay even, and getting complements on them, which was even better – not that I’m dissing a good pay check, mind you.
What I liked most about my work was making the information accessible. Most people were putting wizzbangs and fugliness on the sites to make them eye-catching, but in turn, rendering them almost useless. My mission was to make clean, simple, useful websites that gave people the information they wanted in the least amount of clicks.
Fast forward again to today and that’s still my goal. However, I’m playing catch-up because I took some time out to be a stay-at-home parent and the technology passed me by. When I went back to work I was mainly working on internal sites for clients where I was not the developer, but the maintenance tech. So, I can’t wait to find out the answers to questions I’ve wondered about, but not found the answers to, like why was <bold> replaced with <strong>. I know it’s standard now, but haven’t discovered the reasoning behind it.