Posted On June 25th, 2008 Author Kyle Racki
Filed Under Design, 1
This post is for many of the designers who work on websites - whether exclusively (in the case of web designers) or occasionally (in the case of designers working in communications firms). Most of us are adept at creating good looking design templates. By that I mean a; header, footer, side bar, home page, sub page. These are usually the basics when we go about designing a new website.
However, it shouldn’t end there. More is involved in bringing a design from good, and passable—to the kind you see plastered all over design blogs and awards sites. And if you’re passionate about design, which I assume you are, you’ll notice that there’s something strangely mystic about the really good sites - the ones that are indelibly imprinted in your mind for months. What is it that accomplishes such a feat? It’s usually the amount of time and care that the designer took in polishing the content.
Keep in mind, I am not claiming to be a master at any of these practices. With every new project I’m constantly trying to attain to this higher level of web design. Sometimes I succeed, but not every time. It is, as it should be, an ongoing exercise—after all, there is no such thing as a perfect design.
Here I’ve identified some of the elements of a design that—if given attention—can truly elevate it above most others.
Forms
There are some usability and web design experts that argue passionately that forms should not be styled. They say that it is important for web forms to look consistent regardless of the aesthetic of the overall page.
While I agree that, as one of the most fundamental elements that separate a website from a non-interactive medium like print, a forms’ purpose should be placed over its’ aesthetic, and should never be disguised. However, it makes sense to style a form to the extent that it fits in with the websites’ overall appearance, - even if it’s a simple matter of applying a border color and background to it.
More importantly, thought should be given to an elements’ width, height, and placement among other form elements. Input boxes, text areas, radio buttons and drop down lists should be carefully positioned and labeled in such a way that a user flows from one to the other with ease. This is particularly important in long forms, such as on a registration page.
To take this concept even further, some of the really thoughtful designers have added a sprinkling of Javascript to achieve a highlight effect when the user clicks inside an input box or a text element. This greatly enhances the usability and flow of a form. Just look at this example from Gold Coast Web Design.
Typography
This seems like a given, but in reality, web designers as a whole have yet to match their print-brethren when it comes to typography. While most web designers pay attention to the “template” parts of a design, such as a header which appears on every page, many ignore typography on interior pages and content areas, which are perhaps the most important areas to consider for the user.
Look at the care that the designer(s) of one religious website took to ensure that articles where interesting, even inspiring to look at, and which complement the meaning of the words for their intended users. That, after all is what good typography is about—marrying letter forms to enhance the meaning of the copy.
By the way, if you’re wondering about how to technically implement some of the techniques used here, like drop caps and paragraph indentation, view this post for a web typography tutorial.
Lists
Like forms, lists are often ignored as an inherently ugly web element. And yet, when proper care is taken, a list, unordered or ordered, can break up a content-heavy page and ease the user.
Look at the lists on the Viget Inspire blog, and see how the designers patiently created icons, and background dividers in the footer to make the list of comment entries flow.
Layout variation in sub pages
As previously noted, most designers start with a home page and a sub page, usually consisting of a side bar and content pane, with long copy flowed in place. The downfall of ending it here is that depending on a websites’ content, a simple two column approach may not make sense, or even if it doesn’t, the content may need further styling.
Look at Trale and Poccuo. In each of these two example, the designer has taken care to lay out the content on a case-by-case basis, enhancing the presentation of it dramatically.
Animation
This is may seem like a dirty word to some when it comes to the web. Keep in mind, I’m not talking about Flash intros, or photos in a masthead that fade into each other. I mean animation that actually contributes to the usability and flow of a website, and yet can still function without it.
Two examples I have are Merix Studio and Alex Buga. Notice in the first example, clicking on “Sitemap” slides the menu and the rest of the site down with an eased animation. The same content could have been showed by simply loading a new page. But isn’t this way more fluid and interesting? In the Alex Buga site, you can drag the light, which makes for a nice easter egg.
Process
This is the main point—It can be a real challenge to get your site looking as good when it’s launched as it first did in your finished Photoshop comp.
Many times what happens in the life cycle of a web project is this: the designer creates comps (in Photoshop or Fireworks) and delivers screen-shots to clients for approval. For most straight-forward sites, this is a home page and a sub page option. Then once the client approves the overall template, the designer either hands off the files to a developer, or in some cases, hand-codes the HTML/CSS templates. From there the developer plugs in the back-end with the provided template files.
A crucial component which often gets left out is content implementation. The worst thing you can have happen is send the developer static site copy, and/or get the clients or an in-house editor to write content in the CMS, while the lazy or overworked (or both) designer dusts his hands off and moves on the next project. This is the death of your website. An entire phase should be allocated to having the designer go in and massage copy and images, and to really take the time to get everything outside the template shining. I’m going to go out on a limb and say this: Designing the interface and getting valid XHTML/CSS templates to the back-end developer is half of your design work. The other half should be spent implementing content and photos, massaging the layout, and adding in little touches to lists, paragraphs, forms and javascript touches.
I’m sure some will disagree with me, but I firmly believe is the secret to producing not just passable websites that clients and bosses are happy with, but truly magnificent interactive design.
Posted On April 20th, 2008 Author Kyle Racki
Filed Under Design, 9
The argument is often made that web design and print design are very different from one another, like in the excellent post by Jeffrey Zeldman. Although this is true, I thought it would be interesting to look at how they are the same. I was listening to Andy Rutledge’s podcast today, and he made some interesting analogies about web design that got me thinking.
In his post, he criticized AIGA and Communication Arts, American leaders in the graphic design community, for refusing to truly acknowledge the web medium. Though I am a big fan of both organizations for pure, juicy, design inspiration—I completely agree that neither understand the web. Every year, their interactive annuals mostly profile Flash websites, merely focusing on colour, type, video/images and other purely visual or conceptual elements. I feel that these organizations are at least partly to blame for many in the graphic design community not understanding true web design.
But this post is not meant to beat up on the AIGA and Communication Arts. They won’t change until they’re forced to by their readers, or until somehow over time everyone naturally evolves with the still young and misunderstood web industry. But this whole issue got me thinking about the nature of design period. Many would have corrected me earlier by saying that there is nothing wrong with focusing on aesthetics because that’s what design is—it’s visual. But is it?
What is traditional design all about?
One of the most, if not the most important design philosophies I’ve been taught is how semantics, syntactics and pragmatics factor into design. Most print designers acknowledge this; we know that first of all, there has to meaning in design. We can make it look great, and communicate a message visually, but ultimately, there must be a message. There must be content. And lastly, it must work—it must be pragmatic. For example, if you are designing a magazine spread, you need to first of all, make sure you have content. The content, and the intended audience will dictate how the spread will look. Then once you craft a design, you must make sure it works—that the body text doesn’t fall into the page gutter, that the inks used won’t cause ghosting or registration problems, and that there are page numbers so that the reader knows where they are. Without just one of those factors, meaning, aesthetics or practical application, the design can hardly be called good.
All designers usually resent one of two statements from clients: That designers are only needed to make pretty pictures, or on the other hand, that client know how to make it look pretty, but they need us to work the software. The reason either of these statements are insulting to designers is because really you need both skills. Solid understanding of design principles is why the design looks good, but also thoughtful problem solving and technical implementation is why the design respectively has meaning and doesn’t fall flat in the execution.
Though these ideas are nothing new, they should help designers from a traditional background understand why their perspective needs to change when it comes to the web. Because design is not only visual, but also practical, technical skills have always been a necessary part of a designers toolbox. After all, print design used to be much more technically involved before computer software gradually took away the need for thorough typesetting and printing-press knowledge. Interior design is an incredibly technical discipline, involving not not just conceptual, layout and colour understanding, but knowledge of materials, construction, finishing, and all other decidedly non-aesthetics-related skills. For example, an interior designers’ choice of materials is based not just on how it looks, but also how the users will be able to live around it and work with it day-in and day-out.
Web design is no different
For this reason, good web design cannot be judged simply on good aesthetics, balance, harmony, contrast, typography, colour, or any other basic design elements. It has to also be based off of how it works in the medium it lives in. How does it enhance the content, how does it provide intuitive navigation, seamless flow, information architecture, usability, accessibility? All of these factors are necessary for truly good, quality design for the web. Just as it’s always been, design is partly technical problem solving. And though that thought scares most designer new to the web, they have to come to grips with it.
It’s difficult, if not impossible to excel at web design if you don’t know how the web works. That means that to design for the web you need to learn about things like web standards, HTML, CSS, and Javascript. Learn what all of the major browsers are, and how to develop sites so they work in all of them despite each ones minor (and sometimes major quirks). Do you know what terms like MySQL, AJAX, Apache, PHP, Ruby on Rails, or ASP.net mean? Learn a little bit about servers, and databases, and server-side scripting, you don’t have to be good enough to develop a back-end custom-coded site, but at least know the basics, or at least their purpose. Even more importantly, learn how people use the web—it may be drastically different from the way you use it, and knowing this will greatly influence the quality of your design.
The bottom line
The point in all of this; the design community for the most part refuses to move forward with the web, partly out of ignorance, and partly out of fear of the technical side of implementing web design. But there is no need to fear this, or worry about losing the design-side in favor of a more technical one. As discussed, design has always been about the technical implementation of good aesthetics so that the product is usable to the audience. Rutledge, mentioned earlier, used the analogy of a shoe designer not just required to design a nice looking shoe, but also make sure it fits, conforms to shoe standards, and doesn’t wear out.
What is required more than anything else is the modesty to admit change is needed in how one goes about his or her design process, and enough passion for good design to throw out preconceived notions in an effort to better ones craft.
An upcoming post will help the humble-hearted print designer wishing to understand the web medium more fully by breaking down necessary fundamentals and explaining them. Please use the comment form below to express agreements/disagreements, or outline things you think that every web designer should know more about.
Posted On January 3rd, 2008 Author Kyle Racki
Filed Under Design, 0
Ah, don’t we love end of year lists? It’s a time to reflect on the strides made over the last year. To gain inspiration. To see the foundation that’s been laid in the past, and the pedestal to spring from in the future. Oh, and it’s also a chance to see really cool stuff that you might otherwise have missed.
I felt that it was important to separate “regular” HTML/CSS sites from Flash “microsites” because there’s a completely different mentality that goes into designing each. The web standard variety is generally more for company websites, blogs and shopping carts, whereas Flash is more for the entertainment/advertising variety. In this list, I’ve favored Flash sites that are well designed or innovative in their concept and interface, not in sites that merely featured entertaining video. I think that belongs to another type of list.
Flash sites are highly criticized in the web development community for not being standard compliant, but I take a balanced view. Flash sites can be highly entertaining and innovative, and I feel as long as they are being used for experiential purposes otherwise not possible with HTML/CSS/Javascript, then it has a place in the web design world.
One last note before we begin; there’s been a lot of beautiful sites in the last year, and many of them have been for design companies, photographers, freelancers and web agencies. For the most part, I have highly favored sites in these top ten list that have not been designed for self promotion purposes. Why? Because I think it’s more rewarding to see sites that have been designed for paying clients — Fearless clients, who have accepted what these designers have created for them. Agencies/freelancers have had to overcome the client hurdles we all experience everyday, and still come out on top. It’s not that I don’t think there’s merit to a nice agency website—it can be a great source of inspiration—but I just feel it’s better to see what designers have done for companies other than themselves.
Top 10 CSS websites
-
This was without a doubt, the most breathtaking blog site I’ve seen this year. The art-work and typography is amazing, and the layout deceptively simple. I especially liked the 4 columns that collapse to three and two when your browser window shrinks. A superb example of usability and design aesthetics perfectly combined.
-
This site gets points for it’s style and type. It’s one of the few sites that gets the whole, cluttered paper-textured look right. Uniquely Knoxville definitely lives up to its name.
-
Frieze Magazine
Frieze shows how online magazines should feel - it takes massive amounts of content and presenting it simply and elegantly.
-
Beautiful colour contrast and a full, flexible layout. The subtle snowflakes are icing on the cake.
-
Often, pubs and restaurants don’t do a good job of presenting themselves online. San Diego Brewing Company has a cozy vibe that just makes you want to come over and enjoy a few pints with some friends.
-
The textures and illustrations really make this site pop.
-
The Big Noob feels, well, big. It’s design is transparent, drawing attention to the humorous content.
-
Online shopping carts are hard to do well, but Free People is so fun to explore and shop, and it’s design speaks to its female target in an effective way.
-
If a site makes online accounting software seem exciting, you know it’s doing something right. Xero definitely has the ‘Web 2.0’ look going on, but it does the big fat buttons and shiny gradients better than most.
-
Like Free People, Etnies takes online shopping to a new level, while presenting it’s merchandise effectively to it’s audience, in this case, the youth culture. The Flash content adds to the experience instead of seeming tacked on.
Top 10 Flash sites
-
It’s very seldom that an advertising site can really suck you in and take up a half hour to forty minutes of your time, but Get the Glass surprised a lot of people with it’s ingenuity and scope. The production team created a massively entertaining board game experience, and of all thing, to sell milk!
-
Remember how I said I wouldn’t showcase agency websites? Well, this is the one exception to the rule. Red Interactive went way beyond breaking conventions with their self-promo site. For heck sake, you can create an avatar and wander the virtual universe talking, punching and flying with other users of the site in real-time. This definitely shows that some agencies can swallow their own pill and stand out in a big way with their marketing efforts.
-
Information architecture at its best, the pie charts, time lines and video samples are so perfectly balanced, and the intimate, emotional content shines through.
-
Simple, elegant and beautiful, the site breaks through the clutter simply by offering stellar full screen video that makes you feel like hopping on a plane the day you see it.
-
Lake Nona is a community in Florida, and the website takes such an interesting approach in delivering this type of content. The expandable interface, map and funny “Nonaology” makes the site truly a joy to explore.
-
Getting to upload your face to an action hero and direct your own mini movie has universal appeal. My wife’s hero was eerily similar to how she really looks. Oh yeah, and the interface is also really well designed. The creators made a relatively complex process simple and fun.
-
Creating one site can be daunting, creating a bunch of sites for every corner of the globe, for one of the biggest brands in the world must have been terrifying. But the team pulled it off, and really made a corporate website anything but typical, evolving how I think many of the Fortune 500s will think of their online presence. By the way, doing a site like this with some XHTML/CSS and not entirely in Flash showed great restraint and I think shows that web standards are the way of the future.
-
An amazing concept well executed, the HBO Voyeur site gives you that guilty feeling of spying through the windows of anonymous people—um, not that I know what that feeling is… The large amount of streaming video makes this site also a great technical feat.
-
What a concept — recycling spam into abstract art! It actually works, and it promotes a German recycling company. So smart!
-
The Motorola Colors website allows the user to exercise his or her creative juices, resulting in colorful abstract art that enhances the brand.
Hope you’ve enjoyed this list - stay tuned for my picks for the top print designs of ‘07. As usual, I welcome all comments!
Posted On December 21st, 2007 Author Kyle Racki
Filed Under Design, Marketing, 0
It’s been said that ‘advertising is a knock-knock joke, design is a conversation.’
Interestingly enough, many firms that began as design boutiques, eventually turned into advertising agencies. There was just more money in advertising. Why is it that advertising and design is perceived this way?
There’s definitely a quick-turnaround mentality with advertising. Like a summer fling, there’s no commitment. A company can choose an agency, get a campaign conceived, story-boarded, shot and published relatively quickly, and then wait for six months to see if there was a change in revenue. If it wasn’t successful, they try again, maybe with another agency. If it was successful, they ask the agency to shoot the same campaign, but to “mix it up a little”.
Design is a totally different mentality. By design, I don’t mean just the act of laying out a brochure, or sketching a logo. I’m talking long-term. Like a solid marriage, a company’s brand will evolve and refine itself over time. It speaks a language, it communicates. It has a personality and constantly, and more importantly, consistently, gets it personality out there for people to see, touch and hear. Many of the worlds biggest brands have not changed radically over the decades, they simply evolved. They still say the same thing, but maybe with a little more style. But either way, you know them when you see them.
Think of how Apple has invented and reinvented themselves over the years. They keep changing with the times, but they are still projecting the same image as before. And people will remember that long after the “I’m a PC, I’m a Mac” ads have run their course.
No disrespect to advertising. It has it’s place. In many ways it is a great way to remind consumers of a brand’s personality. After all, who doesn’t like a good knock-knock joke?
Previous Page Next Page