Six Revisions » Web Design

“Undesign” Your Portfolio Website

Jacob Gube — Tue, 03 Apr 2012 03:27:09 +0000

Even the most ineffective, unattractive or simple of man-made objects have been designed in some way. The same is true for the Web: Even the most hideous of websites are created by someone who has consciously made decisions into its design.

For web design professionals, it’s normal to put a lot of work into a design, using research, analysis and their expertise to form a design to delight and engage. This process is not quick and while many of us spend hours crafting websites for clients, our own website goes wanting.

It’s in this situation that the process of undesign is growing.

Undesign 101

I associate "undesign" with websites where the design and content is scaled back to the bare necessities, allowing for the quick implementation of a simple yet professional design.

So far, only a small group of designers have adopted such an approach, so how undesign is defined in the future will inevitably change as more of us experiment with it.

Looking at an undesigned website, it may appear to be an application of minimalism to its extreme.

Eleven Made, portfolio of NYC-based web and brand identity designer Ryan Paonessa.

Though an undesigned website can be identified by what you can (or can’t) see, it’s also about the process and the choices made by the designer that defines it.

Why Undesign?

Let’s discuss some of the pros of creating an undesigned site.

Easier to Create and Change

Designers typically redesign their website for one of two reasons. Firstly, their site no longer fulfills the objectives they wish it to. Secondly, they wish to change the design because they’ve grown bored of it.

No matter the reason, many full-time designers find it difficult to devote much time to changing the design of their website. To create a design and then deploy it is no quick task and, with so much else going on, it can be hard to find the time to speedily make the redesign happen.

By scaling back the complexity of the design, and the scale of the website as a whole, a once lengthy process can become much shorter, with the workload greatly reduced.

Easier to Make Responsive

Responsive design is still in its early days. This has, to a certain extent, made undesign a more desirable option as the rich interfaces we once created are even more complex to achieve when trying to make a responsive website.

Mark Boulton’s website has a responsive layout.

With responsive design seen as a must for any designer’s new website, the time that can be devoted to the design itself is further reduced and thus the design is more undesigned than it may have been without the addition of making it responsive.

When You Don’t Need to Show Off

For some designers, their work and reputation are so well known within the community that they don’t need an elaborate web design to impress potential clients.

Max Voltar is the site of well-known designer Tim Van Damme.

Some other reasons for going the undesign route are:

You’re a full-time designer: A designer that works full-time for an agency may only need a site as a repository for thoughts and their personal work.
You have a high volume of clients: A designer can be booked up with so much work that they are no longer actively looking to be hired by more clients. So their site, like a full-time designer, is not essential in gaining work.
You have a strong portfolio: A designer may feel their portfolio is strong enough to speak for itself without the need to utilize their own site as an extension of their portfolio.

Undesign May Not Be Your Client’s Cup of Tea

The way you design your website can be viewed as an extension of your work portfolio, a way to show off your personality and skills. The design flourishes we add to our sites are the products which sit in the window showing, the type of designer we have become and the level of our skills.

So why would you employ a stripped back design in your portfolio site if you want to display your design capabilities? A professional is able to recognize a well-crafted, well-thought-out minimal design against something that’s just hastily put together. But for most clients, the distinction isn’t always obvious.

Instead, a client viewing an undesigned website might see a website that may appear to contain no show of exceptional skill and a website that lacks personality and any element of uniqueness.

As a design style, undesign is not like the rest. Undesign will, at least for the time being, may only ever find a home on the website of a web professional. The reason undesign might not be suitable for client work is that it’s difficult to find a client open-minded enough to consider such a stripped-down design approach.

Undesign could find its way on personal websites, but non-designers are more likely to be attracted to more complex designs.

Examples of Undesigned Websites

For inspiration, here are some more examples of undesigned portfolio sites.

Elliot Jay Stocks

Nemeth Interactive

Andy Mangold

Stuff & Nonsense (Andy Clarke)

Just Another Trend?

The idea of undesign seems to be so new to the community that it could just become yet another trend that disappears in a year or two. The fact that high-profile designers like Elliot Jay Stocks, Mark Boulton and Tim Van Damme have adopted such an approach for their own sites will most certainly lead to others considering the same approach for their website.

A trend in web design is something that many designers grow quickly excited about but, by over-adoption or on questioning the reasons behind its use, soon falls out of favor. Think of the glossy "Web 2.0" look or faux coffee rings that came and went. The reasons behind using these styles and effects in our designs, in many circumstances, were weak at best.

Though time will inevitably dictate whether undesign sticks around for the long haul, I don’t think it can ever be considered as just a trend as I believe that it will always be a style that designers can adopt in situations where time is at a premium.

About the Author

Kean Richmond is a full-time web designer and developer based in Yorkshire, UK. Working as a generalist in most areas of web design and development he currently works at Bronco, tweets as @keanrichmond and rants on his personal blog.

The Elements of a Clean Web Design

Jacob Gube — Wed, 29 Feb 2012 10:00:34 +0000

Advertise here with BSA

Clean, simple web designs have become a popular trend. This article will cover the subject through a two-part discussion. First, we’ll talk about a few traits that clean designs tend to have in common. Secondly, I’ll share some tricks and techniques that can be helpful when trying to achieve a clean design.

Common Traits of a Clean Web Design

Let’s start by looking at some fundamental characteristics of clean web designs.

Solid Web Page Layout Structure

If you take a few minutes to browse sites that might fall into the "clean" category, I’d be willing to bet they all have one thing in common: a well-thought-out grid that the designer is really putting to work.

For anyone not familiar with designing with a grid, just imagine that each comp starts with an invisible structure of columns and rows, and that structure drives the scale and placement of the elements in the composition. This grid creates a sense of order by helping designers establish hierarchy, rhythm and consistency.

Pixel Dreams is designed in a grid using the popular 960 Grid System.

A solid grid layout structure provides order and unity. For instance, Creative Review has several page layouts for certain types of content, however, the browsing experience is continuous because they all share the same underlying framework.

When a site has a lot of content to display, such as an online magazine or a newspaper site, achieving a clean design aesthetic can be more difficult. But sites like The Guardian, a British newspaper, show that it’s possible with a well-thought-out layout grid.

If all their content were plopped onto the page without a solid structure, the front page would definitely be a mess. However, by using their grid as a starting point and relying on rules and white space to establish hierarchy, the robust content feels far from overwhelming. Every pixel of margin and every rule was tweaked until it was "just right," and all that effort resulted in a layout that feels effortless.

Here are two resources that will help you learn more about designing on a grid:

Good Typography

It seems that good typography often centers around doing more with less, and when it comes to getting that "squeaky clean" feel in your designs, restraint is key.

When too many typefaces are used, they compete with one another, making a design appear disjointed and disorderly.

If you do a quick survey of well-designed sites, you’ll probably find they rely on one or two typefaces, and then vary size, case, color and weight to establish a clear typographic hierarchy.

This approach creates a sense of consistency and refinement that can be seen on sites such as The New York Times and The Mavenist.

The New York Times

The Mavenist

In both examples above, there are no more than two typefaces in the style sheets, yet the designers have established clear hierarchies by using those typefaces to their fullest.

Good typography is best displayed in the details. Leading, the spaces between lines of text, can help make content easy to read and pleasing to the eye. When there’s just enough space, the reader’s eye can easily return from the end of one line to the beginning of the next. In web design, leading can be adjusted through the line-height CSS property.

The optimal ratio of type size to leading often depends on the typeface, color and width of the text block.

Additionally, letter-spacing, the space between letters, can allow the letterforms to breathe a bit.

Here are some resources related to web typography:

Limited Color Palette

In print design, color is often limited by necessity. A budget may allow for only a two-color poster, and so the designer is forced to work within those constraints.

That’s never the case with websites, though, since most modern computer monitors can display millions of colors.

However, cleanly-designed sites seem to trend toward limited color palettes. From what I’ve seen, these sites often use core grays and one color. The color is earmarked for the most important elements (like links and headers), a trick that not only enhances usability but also helps to visually unite elements throughout the site.

A1 rolls this direction, using a bluish green and gray color palette.

Meanwhile, the fine folks at Fuzzco take it all the way down to a single color: red.

Clean designs that successfully push beyond one- or two-color palettes often do so by using color sparingly and by using neutral colors to break things up. Solo is a great example of this.

Just like the connection between typeface and message, it’s not all about picking colors that look good. Stronger designs incorporate palettes that set a visual tone which echoes the site’s content.

For example, bright, complementary colors make sense for Notologist because of the nature of the site.

Consistent Imagery

Does it bother you when the style of imagery (photography, illustrations, charts, etc.) shifts from page to page throughout a site? Me too.

Making sure these visually prominent elements are stylistically in harmony is a pretty powerful trick when it comes to creating a site with a clean appearance.

For example, IBM’s Smarter Planet campaign touched on dozens of topics. Throughout the related print and interactive materials, illustrations and charts that share geometrical frameworks, bold strokes and saturated colors help tie the campaign’s materials and topics together.

And over on Protein, you’ll notice that even though the photography for the profiles comes out of different shoots, there is a carefully produced similarity across the images in terms of composition, depth of field and quality of light. Consistency across these often-prominent elements helps viewers look past individual pieces and see the sites as a whole.

Obviously, there are instances where it just isn’t practical to produce all the imagery in the same style. News sites and blogs can’t throw out a great image that enhances a story just because it doesn’t fit with others.

And sometimes clients don’t have budgets to produce new charts and illustrations, so the designer is forced to make existing assets work. I’ve noticed that in these cases the use of graphic elements around the imagery, such as borders, can help inconsistent imagery feel a bit more uniform.

Tips for Achieving Clean Designs

What follows are a few tips for producing clean web designs.

Start Complex, Then Simplify

Putting things on the page is part of the design process. In my experience, one of the traps designers can easily fall into when they set out to create something "simple" is becoming afraid to add anything to the page. The resulting designs are usually pretty bland because the process didn’t allow for exploration (and those "happy design accidents" we all love).

To avoid this problem, I find that it’s helpful to "start complex, then simplify."

In the early phases of the design, don’t limit what you put on the page. Explore different layers of content and try out different design elements. Then, once that design feels like it could be close to complete, start to simplify.

Ask yourself, "what doesn’t really need to be here?" If dropping a design element (like a rule or texture) seems to make the page fall apart, keep it around. But, if that’s not the case, ditch it.

We’ve all heard the adage that 20% ends up doing 80% of the work. We’re just applying that theory to design by identifying the elements that are doing the heavy lifting in our layouts. (Read more about this subject: Reductionism in Web Design.)

It may even be worth bringing in someone who’s more detached from the design for an outside opinion on what should stay and what should go. If you can’t give a more solid defense for why something should be on the page other than "it’s cool" or "they do it on this other site," then remove it.

Ultimately, you’ll be left with the ingredients that will give you the strongest design. Once you get there, a little bit of fine-tuning should leave you with a strong, uncluttered design.

Tweak, and Tweak Some More

I’ve been told that I tend to "beat my page designs into submission." Honestly, I take that as a compliment.

To me, a design is never really "finished" and can always be pushed further. Seriously, just ask any designer or student who has had the unfortunate luck of working with me. I’m guessing it’s not all that fun when I ask them to try another shade of green for the twelfth time.

As we explored earlier, that "clean" feel is the product of all the aspects of the design — composition, hierarchy, palette and typography — working harmoniously. If you’re like me, making that happen means a lot of time spent tweaking: adding a point of line-spacing here, removing 2px of margin there, trying #ddd instead of #eee for the dotted rules, etc. These may seem like inconsequential adjustments, but when it comes to getting all the elements in a composition to work together, a single pixel can make a big difference.

So, tweak, and then tweak some more. One tweak will lead to another, and sometimes what you uncover will lead you to fork your designs or backtrack.

Making something look clean and cohesive is a process that takes time and persistence (and, generally, a lot of coffee).

But, if you stick with it, all the details will eventually fall into place and the design will become cohesive.

Don’t Miss the Big Picture

In my previous life as a "mostly print designer," printing and pinning up your layouts was a daily ritual. The firm’s walls were saturated with everything from annual reports to logo explorations.

But something funny happened when I started to focus on web design — I stopped printing. It was almost like I decided that because the project would never see a press, it never needed to see paper.

After a long spell of blank walls (and subsequent blocks of frustration with how my projects were coming together), it hit me. The beauty of printing and pinning was seeing the big picture.

I was missing my chance to evaluate the system as a whole, shore up throughlines, and find opportunities to simplify.

Flipping through layers in Illustrator or Photoshop just doesn’t offer the same perspective as seeing all the comps side by side.

So, my suggestion is to print, pin and repeat. It’ll help you identify inconsistencies and find opportunities to synchronize your layouts, all of which will result in a cleaner design. (Sorry trees.)

Conclusion

Whether you’re well-versed in the creation of "clean" design or looking to move in that direction, respect for imagination followed by attention to detail will go a long way.

As I said early on, an organic but intentional process — not standards and rulebooks — will come in most handy. Of course, each designer has moments of magic throughout his or her individual process.

So, if you have any tips and tricks you tend to use to strengthen your layouts, or examples of "clean" design you love, please feel free to add them below so we can keep the discussion going.

About the Author

Phil Zelnar loves designing and building websites. Phil’s a principal at Poccuo, a boutique design studio in Washington, D.C., that he founded in 2007. He also heads up Notologist and occasionally teaches a class or two. Find out what he’s up to at andphil.com or on Twitter at @alsophil.

The Proxority Principle in Web Design

Jacob Gube — Wed, 18 Jan 2012 13:27:11 +0000

Advertise here with BSA

In web design, the position of design elements and the layout of web pages is everything. So many cool, exciting techniques are available to help us lay out our designs (especially with CSS3 at our disposal) that we often forget that structure is as important as aesthetics.

How do you determine where content should appear, and how can a well-oiled interface increase website readability? This is what we’ll aim to uncover in this article.

We’re going to examine a basic technique that could help you improve your general content flow, and, for lack of a better term, I’m going to call that technique the proxority principle (a portmanteau word that combines "proximity" and "priority").

Communication through Design

Designers already understand that the relationships between objects on a page matter. That’s why when we create a design, we think about visual hierarchy, visual weight, Gestalt psychology, the distinctiveness of important elements and other principles that affect relationships between the various components of a web page. It’s one of the reasons why we tend to get neurotic when it comes to navigation menus, headers or footers.

With so much going on inside the average web page, getting the right content to users in the right place and at the right time is quite an achievement!

If your content isn’t structured suitably, there can be a number of downsides, such as:

Critical information getting lost or skipped
User interaction issues like error-proneness or confusion
Reduced web accessibility for screen readers

The proxority principle, in a nutshell, puts forth the idea that if we can prioritize our content to ensure that the most relevant material is visible and appealing, users will immediately be drawn to it.

This principle asserts that all related, important content should be grouped or joined together whenever possible to allow flow and feedback.

The art of this technique isn’t in the theory, because we often lay out content logically as we write it (headings, subheadings, bullet points, etc.); instead, it’s in the planning stage.

Proxority Principle in Site Navigation

Consider something like a navigation menu. One of the first things we do when producing the information architecture of a site is to organize pages and links into one cohesive structure, after which we add categories or subsections if appropriate.

This technique leads to the development of drop-down menus and other unique browsing aids which help us to further bind content that lacks proxority.

When planning navigation menus, one must pay particularly close attention to the value of pages and their connections, in order to make them a perfect example of proxority in action.

This particular technique works for any style of website, so whether you’re scaling a huge service-heavy but content-light layout (like Amazon) or a content-heavy but feature-light design (like a blog), the technique should be of use.

Better yet, the principle can help you organize your website’s information architecture; the proxority between pages is as important as what exists upon individual pages.

If you find yourself struggling to determine where stuff should be placed, this strategic guide will help you.

Priority: Boost the Best, Weed out the Worst

Many of us know only too well the benefits of prioritizing. The priority we give our content plays a huge part in the perceived value it has upon a page.

A site’s logo/name, for example, is recognizable because of its critically high placement, usually in the top left-hand corner, and it maintains visibility in that position on every page of a website.

A logo should be dominant over all other objects on a page. That’s its proxority.

Rate Each Element’s Value

To identify which pieces of a web page are most critical and important, we need to begin by examining every object in a layout, no matter how small.

Rate them based on their perceived value (according to what your visitors need to know or are likely to want to know) and their functional value (according to what contributions they make to the website, such as functionality or advertisements).

You can do this either by taking a screen capture (or printout) of the entire page and annotating it, or by producing a list of everything that appears on a page. This exercise will help you reassess the value of your website’s content.

Rate images, media, content (at a paragraph level), and everything else according to this numbering system:

Rating	Description of Element
1	The website cannot function without this.
2	This adds benefits but is non-essential.
3	This supplements or reiterates content.
4	This is redundant or wastes space in some other way.

Eliminate Unneeded Elements

When you’ve gone through everything, review the results.

Before we go any further, it’s probably worth mentioning that if you find content, links or objects that are no longer useful or don’t contribute anything, remove them.

Eliminating clutter from an interface is tough, but reductionism improves the general user experience of a website.

For elements rated at a 3, removal might be a bit harsh, so consider rewording or attaching things together to add value.

This website arranges its critical information into clearly defined segments for readability.

After you’ve identified the stuff that can be deleted, merged or moved, look at everything you’ve given a rating of 2. These elements can be the toughest to deal with because you want visitors to benefit from them, but you don’t want to overburden them.

One solution to giving these these needed, but non-essential elements an appropriate proxority is to use progressive disclosure: make content appear on demand with drop-down menus or tooltips, or display it further down the page so that it’s still available but less prominent.

Many websites use progressive disclosure to avoid swamping their users with details.

Proximity: Flow, Feedback and Functionality

We’ve considered the importance of prioritizing every asset on your page, identifying which bits have more sway than others, eliminating the fluff that has accumulated, combining weak material into a strong structure and pushing the less critical data out of the field of vision.

We now need to take all the remaining content and follow through on the second part of the process: to connect everything logically and put it all back together, as if it were a jigsaw puzzle — or a storybook, wherein the plot develops at consecutive points.

You should be left with everything that needs to be on your website, in its most diluted form, with supplementary content either hidden down the page or waiting in tooltips and extensible data boxes.

Rate Important Elements in Relation to Each Other

Go back over everything to which you have assigned ranks of 1 and 2, and rank them again; number everything according to what order you believe readers need to know about it.

If everything ends up where it should end up, it will all make perfect sense when you read it aloud.

The developers and designers behind this website clearly understand the need for organization and feedback.

Redesign

Once you’ve got everything labeled, re-shuffle your source code to match the new reading order. Pay special attention to bits of content that connect to or depend on other pieces of content (such as image captions), and put them as close together as possible.

Then, make the necessary changes to your CSS and JavaScript.

Proxority: Examples and Patterns in Action

Many websites already exhibit what I’d define as high proxority in that they take great care to use techniques that account for both priority (bringing attention to certain elements) and proximity (making reactions happen directly next to or above the objects being interacted with).

Below is a showcase of a few examples of best practices in use. Some we’ve briefly mentioned before, and others are being introduced here. By following similar practices, you can avoid user confusion and increase reading efficiency.

Using progressive disclosure to track the progress of a form:

Informing visitors of errors as they enter data:

Drop-down menus expanding close to the cursor icon:

Input objects disabling once they’ve been submitted:

Progress bars showing loading progress:

Content or light boxes expanding upon user interaction:

Proxority: Origami for the Web

The proxority principle posits that everything you find on a web page can be assigned a value and a place in sequence, in relation to the objects that surround it. This idea has existed since the early days of the Web, but too few designers pay enough attention to it. Think through what is actually needed, where it is needed and when it should appear (as opposed to simply putting all of the content on the screen, in its entirety, in an order that "looks pretty"). The need for such techniques is increasing, especially given the proliferation of handheld devices and the idea of designing with a "mobile-first" philosophy.

If content isn’t worthy of a restrictive mobile layout, why is it needed in the desktop layout?

If you have ten spare minutes, give this simple activity a try. Go through your website and weed out anything that isn’t offering what it should. Make existing objects provide greater value to users (or use less space), and don’t be afraid to reorganize your code and its content to ensure that what’s needed is what appears. Oh, and if you do feel tempted to make actions elicit responses, ensure that users know that your website is responding; after all, you don’t want them clicking "submit" ten times in a row, only to fail.

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

A Review of a Web Designer’s 2011 Predictions

Jacob Gube — Sat, 31 Dec 2011 10:00:11 +0000

Advertise here with BSA

This will be the third year that I’ve sat down in front on my keyboard to write my predictions of things that will shape the Web industry in the coming year.

Before I share my predictions with you for 2012 (which I’ll do in another article), I thought I’d look at my 2011 predictions first and see how they panned out.

Previous Predictions for 2011

At the start of 2011, I wrote about what I thought would be the five things that will shape the Web this year. If you missed that article, you could check it out first to give you a bit of context for the things I’ll be talking about below.

In the article, I predicted these five things would be influential in our industry:

Flash
Print media
Hardware-accelerated browsers
Television
Location-based services

Let’s talk about those five things, and see if they did, in fact, make an impact this year.

1. Flash

At the start of this year, I said:

"Expect to see something out of Flash this year, whether it’s innovation, a repurposing of the technology, or a significant drop in usage."

I think we’ve mainly seen more of the latter — a drop in usage — than anything else. For instance, as of August this year, jQuery was used on more top websites than Flash.

Even Adobe, the company that owns and develops Flash, announced that they would no longer develop Flash for mobile, opting instead to focus on HTML5.

As 2011 marched on, HTML5 and JavaScript chipped away at Flash’s place on the Web as a facilitator of rich interaction. Designer/developer Aral Balkan, who covered the possible demise of Flash for .net magazine earlier this month, suggests that "if you’re starting a new web project, do not use Flash for it."

2. Print Media

Just how much of an impact have traditional print publication companies — magazines, newspapers, books and so forth — had on the Web?

It does seem that all the experiments and ventures rolled out by print media on the Web are still going strong. The Times, for example, still sits behind a pay wall and appears to be doing fine. The iPad-only Project Magazine I mentioned in my predictions is now rolling out issue 11. Pay walls and premium content are popping up on many sites around the Web, and appear to be a sensible way to monetize content.

The future of traditional print-based media companies moving onto the Web is still very much focused on the tablet market, and iOS5 brought a new angle to this model with the Newsstand feature aimed at digital versions of popular print newspapers and magazines.

More and more people are putting down their newspapers and magazines, opting instead to use their tablets and smartphones. Research by eMarketer showed that Americans spent more time on their mobile devices versus reading newspapers and magazines; over 1 hour per day on mobile devices compared to only 44 minutes on newspapers and magazines.

3. Hardware-Accelerated Browsers

Hardware acceleration has probably had an impact on the Web that most people don’t even realize. Most modern browsers now ship with some kind of acceleration running in the background, but as far as users are concerned, it isn’t really noticed except when used in cutting-edge experiments and demos such as OK Go’s video website for All is not Lost.

However, the run-of-the-mill hardware acceleration was trumped with a new technology called cloud acceleration, which we saw on Amazon Silk, a new web browser for Kindle Fire.

How does a cloud-accelerated web browser work? To reduce the processing power needed on the tablet, Amazon decided to leverage their Amazon Web Services (AWS). The Amazon Silk web browser, for those not familiar with it, offloads the processing required to render web pages and JavaScript to AWS, which compresses the output and shoots it down the interwebs to your Kindle Fire, therefore removing the need to process a lot of stuff on the tablet.

There was a bit of a problem though, as it turned out that it wasn’t quite as fast as everyone hoped; tests showed that web pages loaded more slowly when the cloud-accelerated feature was turned on. This may well change as AWS caches more and more web content. Amazon also promises a speed boost with their next release of the browser.

4. Television

The Internet TV wave isn’t quite upon us yet, and the bottleneck may be Apple. There is talk and rumor of an Apple TV hitting stores in 2012, and consumers and manufacturers may be holding their breath and waiting to see what the technology giant will release before moving into this space.

In the same way that Apple made the tablet market, speculators are saying that Apple TV could revolutionize the way we use our TVs.

We’re also seeing traditional television moving onto the Internet more and more, as shown by the continual growth of web-based services such as iPlayer, Hulu and Netflix (well, at least until Netflix shot themselves in the foot).

Live coverage is also popping up on the Web, where we used to expect them to be on our television sets. YouTube, for example, showed live coverage of the British Royal Wedding. Facebook now streams numerous live events, including UFC fights.

TV shows are increasingly leveraging social media for live discussions with fans; many shows even include hashtags for Twitter.

In my opinion, it seems that the Television and the Internet are on a steady crash course to blend into an integrated, on-demand medium.

5. Location-Based Services

A quick look on your smartphone, and you’ll know that pretty much all apps ask for access to your location data.

One of the most interesting implementations of geolocation I saw this year was from Apple with the Reminders feature on the iPhone. This is how the Reminders feature works: You set your iPhone to remind you to do something (e.g. "get milk from Supermarket X") and when you’re close to the location, it will remind you of a to-do you created for that area.

In fact, you can tell a technology is getting serious when big companies put money behind it: Facebook acquired location-based social network Gowalla for a cool $3 million so that they can improve their own location-based services.

Conclusion

There’s my look back at the five things I thought would shape the Web industry this year. I’ll be back in a later article to have a look at what I think will affect our industry in 2012.

What things will shape the Web in 2012? Share your own predictions in the comments!

About the Author

Dave Sparks is a web designer and developer working for Armitage Online in the Lake District. He can be found writing about various web topics on his blog at Kamikazemusic.com, twittering as twitter.com/dsparks83 and working on his website analytics project – Stat Share.

Minimalist Web Design: How Minimal is Too Minimal?

Jacob Gube — Mon, 05 Dec 2011 10:00:42 +0000

Advertise here with BSA

Minimalism, interestingly enough, is usually born out of excess. In all arts, in all ways of life, we start out by taking and adding whatever we can.

When we start to realize that more is not necessarily better, and that we can get by with less stuff, we try to simplify by removing unnecessary elements so we can focus on what’s truly important.

What is Minimalism?

Minimalism, in its purest form, is the reduction of something to its bare essentials.

Think of a car. It only needs a few critical components — engine, wheels, gas, and so on — for it to run. As long as it has these parts, you can take out many non-essential elements such as its audio system, heated leather seats and cup holders, and the car will still get you to where you’re going.

In web design, minimalism translates to producing a site from the basics. Instead of including everything but the kitchen sink and then paring it down to only the necessary features, a better approach would be to start with a blank slate and only include the essentials.

Minimalism is an exercise in restraint, with the eventual goal being a design that helps the user focus and accomplish their tasks as quickly as possible.

When designing minimalist websites, you should keep three things in mind:

Subject: What’s the most important thing on the web page? Is it effectively keeping the user engaged and focused?
Usability: What things burden the user experience? What missing elements can enhance user-friendliness?
Balance: Does the web page have the appropriate visual hierarchy and do components have appropriate visual weights?

These three elements are actually the most important elements in all styles of web design, but whereas other visual styles may beg for additional aesthetic layers, minimalism does not.

Why Use Minimalism?

This minimalist thinking is the basis of modern web design — we begin with content, perhaps a brand, but nothing else. By adding in only what’s necessary, we create a website that caters specifically and solely to its mission.

There are many benefits to designing a minimalist website.

First is the obvious: Minimalist web designs usually end up with fewer code and site assets. A minimalist site will often have fewer CSS rules, HTML elements, images, JavaScript, and so on. This ultimately means increased front-end web performance and, in turn, enhanced usability and a better user experience.

This doesn’t mean the design stage is any easier — minimalism takes just as much thought, planning and production as any other type of website. And perhaps even more, if my theory about our innate desire for "more stuff" is correct.

Zen Habits’s archive page shows how easy it can be to build a minimalist website once the concept is there.

It’s also harder to mess up minimalism, in my opinion. By proactively leaving out superfluous elements, your design becomes more open and free. When there’s less to see, there will be fewer distractions. As long as you give ample consideration to balance, typography and white space, your design will look pretty good. This is much easier than wrangling with a PSD template with dozens of layers.

And for those who have little artistic skill or proficiency in Photoshop, minimalism is a perfect way to create a site using only a strong understanding of typography, white space, and balance.

While not the most minimalist of examples in this article, Julien Lavallée’s site (featured below) demonstrates how interesting and visually appealing simple websites can be.

However, the most important reason to design minimally is that, without extraneous design elements, the site’s content is emphasized. By adding more white space, the various sections of a website are given breathing room.

On Daniel Gray’s site, notice how enough white space is given around each content section so that readers can quickly focus on the content without being distracted by much else.

The one problem with the site is that the reader’s eye focuses on the content in an odd order. My eyes go from the navigation bar, to the image of the unicorn, then to "Daniel Gray", and then finally to the "Hello, I’m a designer and writer based in York." tagline. But because there aren’t a whole lot of visual elements to distract the reader, this order doesn’t matter so much. In a visually busier site, some of this content would get lost, but here, although I see things in a different order than what’s probably optimal, I still consider each content element in turn.

Don’t Sacrifice Usability for Minimalism

As we’ve all heard by now, "content is king", and although there are some that might disagree with that, there are very few who would say content is not important at all. Every line of code you write is to serve the page’s content in some way.

Just as important as content is how accessible that content is — without adequate consideration of usability, content can be difficult to find and read.

Now that we have new web standards and technologies like CSS3 and HTML5 at our disposal, we must deeply consider what is necessary so that we avoid the overuse of these things. (I wrote something about this before.)

My suspicion is that as web technology grows tantalizingly better and more complex, minimalists are going to have a harder time paring down their designs to the essentials, especially as certain superfluous design patterns have become almost expected, like using CSS transitions to make links hover a little softer.

But always in the back of your mind should be considerations of usability. Chances are — unless you’re a big, established and well-recognized company like Apple, Starbucks or Nike — you should probably include the name of your company with your logo. And don’t think you can reduce your navigation menu to a set of enigmatic icons; even if it doesn’t confuse most readers, it will confuse some.

Don’t Worry, You Can Still Be Pretty

Designing minimally doesn’t always have to mean a reduction to the barest essentials. To the contrary, many minimalist sites include subtle design elements that manifest themselves beautifully and more remarkably because of fewer competing, distractive elements.

Chance Graham’s site, for example, has great use of color, iconography and subtle visual effects (like the box shadow on the navigation items at the top-left of the web page layout) that add enough nuances to intrigue the user without them being a disturbance.

Are You Designing Minimally for a Good Reason?

Minimalism on the Web could be thought of not as an aesthetic, but as the lack of one. If you "go minimal" just for its looks without understanding the purpose of minimalism, you will be lost, and your designs will turn out less than stellar.

Just as any other art genre or design style, minimalism must be well understood in order to be well executed — don’t let simple-looking web designs fool you; there is more going on with them than what can be seen on the surface.

In addition, minimalism shouldn’t be arbitrarily confusing or enigmatic. Many people see minimalist websites as a way to make their brand seem more mysterious, but this isn’t the goal, and there are much more effective ways to build a mythos around your brand than designing it inappropriately.

When any design is confusing, or enigmatic in its structure, or uncomfortable in its balance, it throws the viewer off. The last thing you want is a confused user, unable to find what they’re looking for.

In general, you should avoid ambiguity and confusion when designing in any style. Minimalism is no exception. In fact, minimalism is the design style where ambiguity must be avoided like the plague, and usability embraced, analyzed and perfected to the point where no user could possibly be confused in any instance when visiting your site.

Most importantly, make sure you clearly understand the goal of minimalist design before you plunge right in. Without proper direction, your creations could end up something like the piece below, which is great for many things except for conveying information in a clear and effective way.

James Turrell’s Space That Sees demonstrates the difference between minimalist art and minimalist design.

The goal that you should strive for, when employing minimalism in your designs, is to enhance readability, improve navigation and usability, and, as always, create the most pleasant user experience possible.

Is Your Design Too Minimal?

Your design might be too minimal if:

You’re using minimalism for the wrong reason
If you’re sacrificing usability in any way

These problems are easy to fix as long as you understand the goal of visual design in general: To clearly and effectively convey information. Constantly consider how your design decisions affect your users.

At the core of every design is minimalist thinking: the idea that few things are actually necessary and critical.

About the Author

Delwin Campbell is a web developer (among other things) at No Enemies, based in Austin, Texas. He is a crazy person with too many hobbies; right now he’s learning Swedish! Check out his personal site.

Quick Overview of User Experience for Web Designers

Jacob Gube — Wed, 02 Nov 2011 10:00:51 +0000

Advertise here with BSA

How many times have you been in the following situation? You just spent two weeks working on a design that you’re showing to a client. He likes it, but he wants to make a couple of changes that would take a couple more hours of work. Why? You don’t know.

He doesn’t know. Nobody knows. He just thinks that adding an embedded map on the right side of the web page is cool. He really likes his own idea and wants you to make the change, and you’re left with one of two options: make the client happy, or make users happy.

We all know who signs the check.

Luckily, there is a third option: Using User experience (UX) to back your arguments.

In my design career, there hasn’t been a project where the client didn’t request to make design changes that felt subjective and unjustifiable, and there hasn’t been a case where UX hadn’t come to the rescue.

UX takes clients off the center of their own arguments, and puts users back in the center of the design, therefore turning subjective (and sometimes egotistic) design change requests into rational arguments that benefit the user.

User experience not only guarantees that designers and clients are moving forward on a common ground, but also aligns future changes and product updates with the original product vision, hence ensuring long term design integrity.

What is UX?

It is a framework where beautiful designs happen as a result of identifying the right problems and finding the best solutions for them.

Contrary to popular belief, UX is not a pure creative process, but rather a rational sequential repeatable process that can be applied to solving design challenges. It is concerned with how users feel when they use the end-product.

Integrating UX into Your Design Process

So before launching Photoshop, or even creating sketches and wireframes, take the following steps to guarantee that you’re solving the right design problems.

User Research

Start by doing some user research to identify the target audience. Whether you’re designing a website or a mobile app, create simple descriptions of the ideal users, their demographics, their technical proficiency, and their goals.

User Stories and Personas

Then write a couple of short stories about how they will use the product to accomplish these goals. At this stage, don’t be concerned with too much detail, but rather try to identify high-level use case scenarios. This activity is called creating personas.

System Flow

Based on these stories, draw a diagram of the system: a snapshot of the main entities and how they relate to, and interact with, each other.

For instance, I am working on a web app that enables companies to find the right users for early testing, so I created entities for users, companies, and studies.

Then I draw arrows between these entities to indicate relationships such as "a company can create/edit/delete a study" and "users can browse/view/apply to a study".

If you’re familiar with database design, this is similar to creating an Entity Relationship Diagram (ERD).

So far, we’ve been working in problem space: We’re staying at a high level, and we’re not concerned with too much detail. At this stage, momentum is more important than trying to get everything right in each step before moving to the next. Because the process is iterative, you can always go back to a previous step to add or modify something.

Now that the problem and its attributes are defined, it’s time to move into solution space.

Wireframes

Start by outlining all the screens needed, and how users will transition between them. For each screen, identify one or two task to be accomplished, and the next steps to be reached.

Then sketch high-level block designs for each screen, stepping back every once in a while to do a quick walkthrough of the design using the stories you wrote in the second step.

Once the high-level design is congruent with the previous steps, add more detail to each screen, still doing design walkthroughs whenever possible to ensure that the users flow intuitively through the screens.

I often go through all these steps using pen and paper, or a whiteboard. This helps me stay focused on what I want to do rather than being constrained by what an app can or cannot do.

Prototypes

The final step is to prototype some screens, and click through them to get some feedback for how the design feels when it’s live. I usually use Apple Keynote and Keynotopia, and it doesn’t take more than a couple of hours to put something together that I can show to clients and prospective users and get quick feedback about.

Conclusion

Now that you’ve had the client’s consensus throughout the process (or even better, involved the client in the UX process), you have a good foundation to launch your favorite design program and create high fidelity screens.

You’ve also got a great reference to go back to whenever you’re faced with another but-I-like-it-this-way client.

I’d like to end by leaving you with the following quote by systems theorist Buckminster Fuller:

"When I am working on a problem, I never think about beauty. I think only how to solve the problem. But when I have finished, if the solution is not beautiful, I know it is wrong."

About the Author

Amir Khella is a user experience designer, startup advisor, and founder of Keynotopia. Over the past 3 years, he’s designed more than 12 startup products, and several of which have already been acquired. You can get in touch Amir on Twitter @amirkhella and through his blog

Staying Passionate and Motivated as a Web Designer

Jacob Gube — Wed, 28 Sep 2011 10:00:13 +0000

Advertise here with BSA

The Web is an odd industry to work for when you take the time to think about it. I can’t think of many professions where a person’s job becomes such a large part of their lifestyle.

The 9-to-5 job is commonplace for the majority of the working population, with few taking their work home with them. Can you imagine a tax accountant doing her work at home simply for fun?

Yet, for us — web designers, web developers, UI/UX designers and the like — it’s not uncommon to get home and immediately jump into the computer or undertake something else Web-related, even when we’re off the clock.

These activities could be as time-consuming as freelance project work, volunteer work, contributing to our favorite open source project, participating and contributing in community forums such as Stack Overflow or as simple as reading the latest news on Twitter and catching up with our RSS feeds to keep up with the industry.

Working within the Web is most certainly a lifestyle choice, and all this time spent immersed in our working environment can affect our passion and motivation for it. But, at the same time, it’s also our passion and motivation that drives us to spend so much time in our medium, and something that I think is vital to our success within the industry. It’s like a feedback cycle.

However, so much time surrounded by our work can be difficult and straining. Too much of anything isn’t good.

As well, to keep motivated and passionate all the time is impossible. At times, external influences (family, friends, relationships) and our own personality traits can lead to a point where we simply wish we could do anything but work on (or even look at) a website.

This isn’t something we have any control of, nor should we shy away from the fact that we can simply lose interest in what we’re doing. That’s life.

What we can do instead is try and recognize the reasons why we’ve lost that interest and learn how best to reignite our passion, not only to ensure that our work and income does not suffer, but also to help our own state of mind.

I’ll share with you a few things that might help maintain and reignite your passion for your craft.

Try New Tools and Techniques

At times, it can feel like your next project is no different from the last. It’s just the same code with a new lick of paint. Rather than let this be the case, why not inject something new into your next website build?

On the Web, there is always something new to try and we’ve never had it so good. Between HTML5, CSS3, designing for mobile devices, responsive design, iPhone app development, numerous JavaScript libraries created by our peers and so on, there are lots of new tools and techniques you can try out in your projects. Just don’t feel you have to do them all at once.

By adding something new to your repertoire that you’ve never tried before, you place something challenging within the project that differentiates it from the previous sites you’ve created.

The challenge will not only continue to pique your interest in the website project but also give you practical experience that you can use in other endeavors.

Switch It Up and Do Something Different

It’s an annoyance of mine, but I’m easily bored and distracted. So when it comes to working on a large website project, it can be difficult to get through the whole thing without wishing it was finished already.

But as a generalist myself, I have the handy ability to swap job roles to find something new and interesting when the mood takes me.

Changing focus onto something else — hopefully something more interesting — will not only improve your state of mind but also ensure a project does not suffer from being rushed as you try to get it finished as quickly as possible.

Simply look for something that can engross your interest, and return to the "uninteresting" stuff when you’re in a better frame of mind to tackle it.

As well, when starting a project, try to avoid doing all the fun stuff at the start; try and mix this in with some of the more mundane activities so there’s always something fun left to move on to. You can use these "fun" activities as a sort of reward system and tell yourself, "If I finish writing up this RFP, then I get to write a jQuery image slider script/[insert fun task here] later on."

Attend Conferences

Conferences are an excellent environment in which to "top-up" your passion for the craft. I can almost guarantee you that at least one speaker will present something new to you or give you a new perspective on something that will have you wanting to adopt the same in your own work process.

In fact, you’ll feel like you can’t get back to work fast enough to try out the new things you’ve learned. Honest!

But conferences aren’t all about learning. There’s the networking, the socialization element and the enjoyment of being able to speak to (and perhaps grab drinks with) other Web geeks. This can further motivate you in your work, and make you remember why what you’re doing is awesome.

Just because attending a conference/workshop/event feels like it’s work (especially if your employer is footing the bill to get you to there) don’t forget to take the time to have fun, recharge and relax. Doing so will make it feel like you’re returning to work after a holiday.

Here are some conference, events and related resources you might want to check out:

Go to Meet-ups

Conferences are expensive, especially when you have to go out of pocket. Sure, there are some that are cheaper than others, but then you have to consider the travel and hotel costs. Not all of us work for companies willing to pay for conference-related expenses, so we might not be able to afford to go to them any time we wish.

Instead of paying an arm and a leg to attend a conference, you could consider spending an evening with like-minded people at one of the numerous meet-ups that are held around the world.

Much like a conference, there may be speakers to inspire you, other geeks to chat with and most likely something alcoholic to make things go all that more smoothly.

Take a gander at these meet-up resources for ideas:

Use Meetup to find meet-ups near you.
Usability meet-up groups
jQuery Meetups
Browse Lanyrd, a social conference directory.

Start a Personal Project

If you work full time for a web design agency, you will probably have little influence on the type of projects you undertake whilst you’re at the office. This can get a little frustrating if these projects don’t give you the opportunity to expand your expertise, cultivate your passion for the work or if they make you feel unmotivated because of the repetitiveness of the tasks.

If this gets you down, try to look for a personal project to work on in your own time that you can really feel passionate about.

Here are some ideas:

Learn how to create an iPad app.
Learn Rails and then create a subscription-based web app (read this story for inspiration).
Build an app for mobile devices.
Design your own font.
Create and share freebies.
Do volunteer work for non-profits and struggling public education institutions.
Develop a jQuery plugin, learn how to use a version control system and put it up on GitHub.
Create or expand your blog. (Six Revisions started as a personal project.)
Contribute tutorials and articles on design-related sites.
Read "Reminding Yourself That You Love What You Do" for ideas and inspiration.

Work on an Internal Project

I’m sure every web professional has their own horror stories about clients; it’s simply something that’s unavoidable, even for the largest of agencies.

So sometimes, it’s a pleasant relief to be able to take the client out of the picture and create something without the constraints associated with client work, such as their needs, cost and schedules.

An internal project, for some, can be a success and evolve to become their sole company job responsibility. For others, it’s for a little bit of fun and a chance to do something out of the box.

No matter what happens at the end of the process, it’s the journey that matters. So long as an internal project doesn’t become a source of stress, it will most certainly be a process you will enjoy and be passionate about.

Learn

Becoming better and widening our knowledge is, I feel, a critical requirement of the job. You cannot simply enter a job as a web designer and expect to sail through your career with the same knowledge that you had at the start. Web design evolves at a lighting-fast pace, and it would be detrimental to your success not to keep up.

The process of learning about web design not only gives you something to do if your daily tasks are a little dull, but it also gives you something to potentially use in your projects.

Become a Specialist

You may currently be working in somewhat of a generalist role, but within this, you’re probably also undertaking tasks that you might not be all that passionate about. You may be a web designer that also codes — which, of course, is a great thing — but you might be coding more than designing and would rather move into a more specialist role as just a designer working within a graphics application like Photoshop.

By specializing (even just on a temporary basis) you can remove some of the tasks you are less interested in and thus spend more time doing the work that you are really passionate about.

Become a Generalist

Specialists are great. Specialists can know the most detailed things about their role — what they may lack in breadth, they more than make up for in depth.

But sometimes this can feel limiting. A specialist may not know much about the whole website production process because they may be too honed in on their own job role and segment of the site build.

If being a specialist feels constricting and you want to learn about some of the areas that you have less experience in, then move to become a web generalist and find that passion in all the areas you’ve yet to explore.

Both specialists and generalist are important to the industry. Choosing which you are is a personal choice and will ensure you enjoy your job more.

Take a Break

Web designers have to be the most wired-in people in the world because we’re exposed to the Internet more than most professions. Thus, our work is constantly within an arm’s reach.

And, for many of us, disconnecting is difficult and seemingly impossible, even when on a holiday.

But taking a holiday and disconnecting for even a short time can re-energize you so that you are better able to tackle the stresses of your daily life when you return. It is also an effective preventative measure against design burnout.

If you start to feel low while at work, try to find a late deal on a holiday. Taking a break and coming back refreshed and motivated can increase productivity.

Start Freelancing Part Time

Sometimes being the master of your own domain can help. Cutting out the possibly endless hierarchy within a company and having greater control over a project can be enough to satisfy a person’s personal desires.

When freelancing part time, it gives you greater control without so much of the administrative burdens linked with freelancing full time. It also allows you the benefit of being able to be choosier with the projects you undertake.

As a supplement to a stable salary, you can take the projects that interest you most.

Here are resources and ideas for part-time/intermittent freelancers:

Tinyproj is a site that connects designers, developers and other creatives with paid, small projects.
WeekendHacker is a design/development network for getting help on (very) small projects.
Coffee & Power is a marketplace for buying and selling small jobs.
TaskRabbit is a marketplace for community projects.
Check out the freelance jobs at the FreelanceSwitch blog.
See Smashing Magazine’s Freelance Job listings.
Use social networks for finding work.
Check out these great resources on freelancing.
Do you know of unconventional places to find web work?
Subscribe to RSS feeds for design and development job seekers.

Work for Another Company

There are times where a few hours of freelancing aren’t enough to get you out of feeling as if your time at your current workplace is coming to an end. There can be a multitude of reasons for wishing to leave a company — from poor management through to a lack of influence in being able to work on jobs that excite you.

If staying with a company is no longer challenging or negatively affecting your passion for your craft, then finding another company to provide you what you seek is the best next step.

In this current economic climate, this is a very risky proposition. It’s certainly a big step and a decision not to be taken lightly. However, in some situations, it may be the only choice.

Another option is to start your own company. Read the stories of entrepreneurs who’ve chosen to go their own way despite the tumultuous economy.

Start Freelancing Full Time

Changing the company you work for may indeed provide that new challenge that refocuses the mind and brings about a renewed passion for the job you do. But if it’s the trappings of company life that are affecting you, then going freelance may be the next logical step.

This one’s even bigger than simply changing workplaces and should never be undertaken from a standing start.

Going full-on freelance works best as a progression from having done freelancing part-time. You need that knowledge, experience and clients to help ease you in. Some savings will help, as it can be very hard to come across scratch when first starting out.

But once you’re there, you will have full control of your fate. Your passion is your own to influence. Anything that affects that is certainly yours to change.

Is Web Design For You?

If getting out of bed and going to work is becoming an ever-increasing challenge, then hopefully, one of the above suggestions will help reignite your passion in your craft.

But if none of them seem like they’re for you, then you should look within yourself and ask if being a web designer is what you really want to do.

Like all jobs, there are those of us who are a perfect fit for this profession and lifestyle, and others who aren’t.

It’s always been my opinion that if we have to spend so much of our life at work, then we have to do something we love, something we’re passionate about and in an environment we feel comfortable in.

Life is simply too short to be stuck somewhere that makes you miserable.

Throughout the Web, you can see people’s passion by way of the things they do and write.

Do you do anything different when your passion waivers? Please let us know in the comments.

About the Author

Designing a Website’s Introductory Text: Tips and Examples

Jacob Gube — Mon, 12 Sep 2011 10:00:46 +0000

Advertise here with BSA

Many websites choose to display a short explanatory text in a prominent position of their web page layouts to inform visitors what the purpose of the site is. This introductory text, when crafted well, can help users quickly decide whether they’re in the right place or not.

A website has mere seconds to let visitors know that they’ve found what they’re looking for, and your site introduction is your brief elevator pitch towards that.

We’ll explore the use of website introductory text in various types of websites to gain a better understanding of trends and techniques for effectively designing them.

At the end of this article, there’s also a showcase of some excellent web designs that have great website introductory text for our further exploration of the topic.

Design Goals

There needs to be a purpose for every component of a website. They each have to support the goals and purpose of the site.

In this way, a thoughtful approach to the design and the copy of your website introductory text is important.

The goals of your site introduction are:

To let the visitor know, as quickly as possible, what the website is about.
To give hints as to what action (or actions) they can take immediately (call to action).
To provide contextual information regarding what to expect should the visitor decide to spend more time on the site.

What follows are some design considerations congruent to the three goals above.

The Text Should Be Concise and Useful

Your copy should be clear and succinct — 1 to 3 sentences should suffice — akin to the abstract of a scientific paper or an excerpt of a blog post.

Short intro text improves usability by giving the web page some context, but if it’s too long, users tend to skip it according to an article by leading usability expert, Jakob Nielsen.

A thoughtfully designed and informative introduction helps first-time site visitors swiftly determine what the site is about. A well-crafted site introduction text is actionable.

The example below from Polecat is an example that highlights the importance and effectiveness of being concise. In only five words, the site intro text successfully encapsulates what the site is. Despite the brevity of the copy, it clearly informs visitors that it’s the site of iOS developers.

Show Off Your Company’s Personality

Since a site’s introductory text is commonly the first thing a new site visitor will see when they land on your web pages, it’s a great chance to display your company’s personality, just like how your website’s design theme (e.g. dark, clean, grunge, minimalist, etc.) embodies your company’s personality.

Below is friendly duck‘s site introduction: It’s short, simple, catchy and written with personality.

Be Direct

Internet users don’t have a lot of time; they want to know as quickly as possible why they’re on your site. You can do this by being clear and to-the-point with your message. For example, the introductory text of FreeAssociation tells visitors who they work with and what they do.

Offer Your Value Proposition

Informing visitors what you have to offer is a good idea. This is referred to as your value proposition. What value do you provide your customers? What makes you unique?

The Project365 site, for example, promises their customers that they’re not an ordinary new media agency and that they can deliver clever designs that attract visitors to their clients’ web properties — a promise not all design agencies can confidently make.

Place It in a Distinctive Layout Position

The site introductory text is something you’d want your visitors to see immediately. Typically, the goal is to have it be seen first.

Distinctive Design Techniques

There are many distinctive design techniques you can employ to draw the user’s attention.

You can apply methods related to visual weight, visual hierarchy, negative space and even the Figure-Ground Gestalt principle.

Additionally, you can use a tool like Google’s Browser Size to determine what percentage of the Internet population will see your site intro text on the initial page load.

Top Left

One technique that will almost always work is placing the site intro text at the top of the layout. Whether by ingrained Internet convention or actual human tendency, web users look towards the top of web page layouts when they’re in search for important site components such as primary navigation menus and search features.

The top-left of a web page’s layout, according to an eye-tracking study done by Jakob Nielsen, is a prime location because user attention leans to the left.

Notice how the Campaign Monitor site has their site’s introductory text at the top-left of the layout. They use other distinctive design techniques such as spacing (its distance away from other design elements enhances its distinctiveness), a unique type treatment and visual hierarchy.

Top Center

Another prominent location is top-and-center. The Fork website shows how placing your site’s intro text at the top-center of the web page layout helps to garner it attention.

Leverage Surrounding Visuals

Another way you can grab the eyes of site visitors is through the use of surrounding visual elements that reinforce and direct the eye gaze towards your message. Notice the three illustrations that all help to reflow your eyes towards the site introductory text on Carbonmade‘s home page.

Draw User Attention Using Typography Techniques

There are several typography composition techniques you can employ to further enhance the attractiveness of your site’s introductory text. Let’s discuss a couple.

Typography Size

One typography styling technique is size. Bigger objects are easier to get to (according to Fitt’s Law) and the Gestalt principle of Similarity indicates that if an object is significantly bigger than other objects around it, it will stand out as a distinct object.

Notice how big the site intro text is on Teehan+Lax. Regardless of its low contrast versus its background and the vividness of surrounding areas, it still manages to attract your attention due to its relative scale.

Text Styling

A unique text effect that has a high contrast against its background can also go a long way towards a site intro text being able to garner attention. Notice the simple gradient text effect on the Great Bible Tales site and how it’s able to help draw your eyes toward their site’s value proposition.

Consider Using a Short Heading

Some messages need further explanation. A popular strategy in this situation is to use a brief, keyword-rich heading followed by a short paragraph. Twitter demonstrates this technique with a big, bold heading followed by a short sentence.

Close Proximity to Calls-to-Action

The worst thing that can happen after reading a site’s intro text is to fail to realize what the next potential action can be. Decrease the chances of the site visitor hitting their browser’s back button by having relevant calls-to-action close to your message.

As shown below, Clearleft gives you the link to their About page through a call-to-action ("See what Clearleft can do for you.") immediately after their site’s intro text.

MailChimp does the same by providing an eye-catching call-to-action button that you can click on to register an account with their web service.

Showcase of Introductory Text in Websites

Let’s look at how the design goals, trends and techniques we’ve discussed above are applied to other websites by dissecting other real-world examples of well-designed site introductory text.

Bellstrike

A succinct, direct-to-the-point site intro text can be found on the Bellstrike website. The text styling is unique and the font size is huge — two popular visual design strategies to achieve distinctiveness, like we talked about earlier. Two beautiful call-to-action buttons sit ready and waiting at the foot of the introductory text once the site visitor has finished reading. The content is useful, offering the site’s unique value proposition of quickly providing websites to non-profit organizations. Positioned at the top-left of the layout, the site intro text is guaranteed not to be missed by incoming site visitors. Also, notice the surrounding visual — the hanging bell on the left of the site logo — that helps direct eye flow downwards toward the text.

Square

Square’s site introduction is a concise value proposition: you can start accepting credit cards using your mobile device if you use their service. The text is situated at a visible top-left position in the layout using a big, striking font style. A convenient call-to-action web form for signing up for a free account below the site’s intro text makes it easy to take action. Take note of how the surrounding visual — the index finger and thumb points to the left — redirects your eye flow to their sign up web form and site intro text in case it strays too far to the right.

Fish

This site has the introductory text on the left of the layout (a prominent location since, as stated earlier, our attention leans to the left of web pages). The introductory text is short, concise and useful, with the value proposition of combining and reimagining French and Asian cuisines. Below the introductory text, you can find a call to action enticing you to view the restaurant’s menu.

Fatburgr

Fatburgr uses a captivating headline that utilizes a simple but effective gradient text style as well as a large font size. The headline is followed by a short and personable sentence describing what Fatburgr does as well as proposing their value to the customer ("Do you know the nutritional content of what you’re ordering? …Fatburgr gives you nutritional information…"). Two huge call-to-action buttons can be found in an eye-gaze-drawing location at the foot of the site intro text.

31Three

31Three’s value proposition is that it offers creative services to developers. We can see the site intro text positioned at the prominent top-left of the layout, using a large font size as well as more-than-ample empty space surrounding the message.

CulinaryCulture

The site intro text of this site is concise and useful. Within 10 words, they’ve managed to describe what the site is and for whom the site is for. The short intro text is followed by a three-column thumbnail gallery that outlines some of the things you can do on the site (such as sharing and reviewing your favorite eateries) followed by a call-to-action link to sign up for an account on the site. Aside from that, we can see the use of a beautiful, eye-grabbing text effect, the use of a large font size and a placement for the text in a distinctive layout position, top-and-centered.

Blue Pixel

A three-word heading using a big, bold font style is followed by a one-sentence value proposition in this site’s intro text. Notice how the surrounding visual, an electric guitar, is angled in such a way as to aid eye flow towards the site introductory text.

Web Typography for the Lonely

A simple statement of what the site is serves as this website’s concise site introductory text.

Sunday Best Websites

A big and high-contrast headline contains the value proposition of Sunday Best Websites. Two paragraphs follow the headline describing in greater detail what service they provide and what their design style is like. The site’s intro text, as can be seen in many of the examples we’ve already talked about, is followed by a call-to-action link that describes their project methodology. The use of a surrounding visual helps direct eye flow to the left, with the arms of the illustrated gentleman outstretched, serving to place the attention back towards the text.

Vegas Uncork’d

The site introductory text of Vegas Uncork’d, a website aimed at promoting a Las-Vegas-based wine and food festival, has a captivatingly big headline, followed by a two-paragraph description. The headline features a distinctive text style, making it very attractive to the eyes relative to its surrounding elements.

Igor Zagnienski

A concise introductory text written in the first-person voice is situated on the top-left of Igor Zagnienski’s site layout. The introductory text’s high contrast against its background as well as plenty of space surrounding it makes it eye grabbing.

Electric Pulp

It’s hard to miss the site intro text in this website: it’s humongous and has a high contrast against surrounding elements. The site’s intro text is personable and, most importantly, concise; in three words, new site visitors already know what the company does.

Assistly

Assistly summarizes their value proposition in 9 words with the emphasis on what they do, which is to provide users with the facility to manage their customer support department. A large font size, the use of a drop-shadow text style and a prominent top-center location serves to attract the user’s attention.

Bitfoundry

A big, eye-grabbing heading styled uniquely and attractively, followed by a two-sentence intro paragraph describing who, what and where Bitfoundry is, serves as this site’s introductory text. The text is placed at the top-center of the layout. Space, a high-contrasting color and size is used as visual design devices to provide the text some distinction against surrounding elements.

N.Design Studio

Nick La’s design blog uses big, bold fonts in its site intro text. In a handful of words, the intro text manages to answer who the site owner is, what the purpose of the site is and where the site owner operates from. He uses a surrounding visual of a koi fish to anchor the message to an attractive image.

iSaidWhat?!

There are a ton of mobile apps out there, and thus, an iOS app’s website needs to get to the point quickly or risk the user looking elsewhere. At the top-center of iSaidWhat’s mobile app website is a short intro text detailing the value proposition of the app.

Kickoff

Here you can see this web-based collaboration tool’s simple site introduction located at the top-center of the web layout. The surrounding image below it helps focus your eyes towards the center of the page layout.

Blue Sky Resumes

At the center of this site’s layout, you can see the Blue Sky Resume’s site intro text. It consists of a captivating heading that plays on the wants of potential clients to be one-of-a-kind (the site’s value proposition), followed by a short paragraph describing what they can bring to the table if you choose to hire them. The text has big fonts and a drop-shadow text style to give it prominence. The surrounding visual of a cookie helps ensure that the intro text is anchored with a distinctive image that will help bring the text attention.

Analog

Positioned at the top-center of Analog’s web layout is a concise site intro text outlining what they do for their clients. Space surrounding the text is an effective tool for gaining a viewer’s attention.

co: collective

The site intro text here is short and to-the-point. A more-than-ample amount of whitespace surrounding the text, the top-center text placement as well as the web page layout’s visual hierarchy arrangement serves to give the text block its distinctiveness.

Conclusion

Designing your site introductory text, if you choose to have one, is important because it’s one of the first things visitors will see when they visit your site.

Using succinct copy, placing the intro text in a highly visible position, using common typographic styling and leveraging surrounding visuals to your advantage are among the popular trends used in today’s site introductory text.

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

The Difference Between Design and Art

Jacob Gube — Tue, 30 Aug 2011 11:00:22 +0000

Advertise here with BSA

Good web design is far more than a beautiful site, it’s where art meets an interactive user interface and where, in my opinion, superfluous aesthetics takes a backseat to usability and the user experience.

Ensuring that user interactions are as smooth as possible is good design — don’t ever be satisfied with art alone.

Although the design vs. art debate is nothing new, it’s ripe for a revisiting as new CSS3 features and JavaScript (and particularly front-end web development libraries like jQuery) begin to edge their way deeper into our everyday lives.

These new capabilities, however revolutionary they may seem, have changed nothing about how we should approach web design in general.

Where Design and Art Clash

Art is a problematically inclusive term; anything in the world can be called "art." The main difference between art and design, then, is that design is simply more restrained.

Any artist can look at their work and see it as an extension of themselves, but designers don’t have that liberty.

As designers, our work has to be interactive, accessible and consistent. In this way, art goes beyond design because no one would expect someone to say that all art has to be consistent and follow a pattern. That would be absurd! What if cubists set the rules? Our art museums would be terribly dull and without variation.

Examples of Cubism, a 20th century art movement. Above: (01) Les Demoiselles d’Avignon and (02) Le guitariste by Pablo Picasso.

This is what design is: It’s art with expectations, patterns and consistency. It’s art meeting science.

Yes, it’s limiting, and yes, UI designers have to be trained to think inside the box a little. But get over it. You are a designer, not an artist. If you want complete freedom and no friction between your creativity and your work, you are working in the wrong field.

Artists can work to their whim, eschewing standards and refuting expectations, whereas designers gobble them up and abide by their every word.

Market forces and trends influence designers far more than artists (with some notable exceptions like pop singers and freelance illustrators).

With web design, there are so many more things to take account of: your site goals, your brand, your users. These expectations shape every bit of web design, while art remains untouched.

Design and Aesthetics

Another important distinction to make is the difference between design and pure aesthetics. While all design incorporates aesthetic — and truly, everything in the world has some form of aesthetic — some designs do it better than others.

Take a look at Google’s home page:

Google has looked like this (with the exception of few small changes throughout the years) since we can all remember. And it’s designed perfectly because it fulfills the expectations of the site’s users. It looks nice without being obtrusive and obnoxious towards the user experience. Google, throughout all their websites, has mastered the difference between design and aesthetics.

Although the term "aesthetics" has broad and varying definitions, I’m using it here to refer to "eye-candy." Superficial designs that exist for the sake of beauty. If we were to put it on a scale, I would say most art is near 100% aesthetics (which is not a bad thing, eye-candy can be meaningful too) and Google is somewhere around 5%. Your browser’s default style sheet is 0%.

So this is something designers need to keep in mind: balancing form with function. Function is at the heart of the Web. Almost everything we do online has a purpose and a meaning. We engage with web designs every day, and the good ones are usually more functional than they are beautiful.

Below are some more designs with minimal eye-candy that are actually designed really well.

Delicious does a great job of balancing their layout. Without getting too deep into eye-candy, they make a giant torrent of information manageable.

Zen Habits has a super minimal site design, but it coincides perfectly with the content’s theme and goals.

CloudApp is a little more visually exciting than the ones above, but the design is still subtle. This combination of minimalism and great use of visuals reflects the design of their product perfectly.

These sites probably wouldn’t do so well in your favorite web design galleries. They’re not incredible to look at, and they won’t blow your mind.

However, they do exactly what they are supposed to do: they provide their site visitors with tools and specific information in a logical order (using concepts like visual weight and gestaltism) and then they get out of your way. And that is why they are so well-designed.

Expectations of a Design

The most important user expectation is that design should look like design. Website design should be immediately recognizable as at least one thing: not art.

Look at the screenshot below, taken from a Toyota minisite.

When I first visited the site, I didn’t know what its purpose was. After poking around a bit, it seems like some sort of way to promote new technology from Toyota, but there are a million better ways to do this. It’s far from user-friendly and my expectations were shattered immediately.

These expectations define user interactions on every site. We put site navigation and logos near the top of the design. We provide common site components like search features, social media integration and web forms in a predictable way.

Why? Not because this is an innate human expectation, but because design has evolved in such a way to foster and reinforce these standards.

Art and design aren’t mutually exclusive, even if there’s a clear line between the two. Beautiful sites can still be usable, and they can still surprise us without being disorienting.

But there will always be noticeable constraints in web design that are bound by things such as technology limitations, accessibility, usability, site speed, and so on.

From N.Design Studio.

Objectives of Design

One of the great divides between art and design is the objective. John O’Nolan wrote on Webdesigner Depot:

Typically, the process of creating a work of art starts with nothing, a blank canvas. A work of art stems from a view or opinion or feeling that the artist holds within him or herself. They create the art to share that feeling with others, to allow the viewers to relate to it, learn from it or be inspired by it.

By contrast, when a designer sets out to create a new piece, they almost always have a fixed starting point, whether a message, an image, an idea or an action.

I will have to disagree with O’Nolan here: Artists, just like designers, sometimes start out with a message, idea or an action they want to motivate. Every work of art and design has a message, but each has its own agenda.

Art doesn’t need to be understood — it’s digested and interpreted differently by each viewer (another point O’Nolan brought up in his article, which I agree with).

The accuracy of the statement that a piece of art makes is not always so important; artists often leave their work open-ended.

On the other hand, design is meant to be understood and interpreted uniformly by everyone. As I said before, it has to be consistent.

Is this too limiting? It really isn’t. The consistency that design requires is not aesthetic. It’s functional. That’s why it’s not important to have your design display exactly the same in every browser. Although art is information in itself, web design is a gateway to information. That’s all the user cares about.

So the consistency required on a website is only user-specific. A user is rarely going to use Firefox and Internet Explorer to access the same website and be surprised by the inconsistency. Where the issue of consistency gets interesting is mobile design. But that’s a whole other story for another day.

Evolving from Art to Design

The face of the Web would be interesting if the unrestrained creativity allowed in the art world was also permitted in web design. But this isn’t the case, and as designers, we’re responsible for creating great design that meet user expectations and site objectives.

Forget your newfangled CSS3, forget your jQuery for a while and get back to zero.

Here are some tips to separate your design from art:

Balance usability and content. Although content precedes design, inaccessible content is useless.
Always write code to a standard and follow best practices. The Web can only advance if we stick together and move forward as a whole.
Even though the Web is full of limiting technology considerations, we can’t stop being creative. In fact, to push pass these barriers and expectations, we have to be even more imaginative than before.
Start from scratch and keep it simple. Keep reductionism and minimalism in mind for clutter-free designs.
And once you’ve mastered good design, keep pushing through and make it great.

About the Author

An Exploration of Website Redesigns: Tips and Examples

Jacob Gube — Mon, 20 Jun 2011 11:27:30 +0000

Advertise here with BSA

Website redesigns — whether for your own website or clients — seem like exciting and interesting projects. It’s challenging to create a new design while retaining the site’s existing brand and content. And for most web designers, these types of challenges are motivating.

However, website redesigns are tricky to plan and execute. There are several constraints involved in redesigning a website that might not normally exist if you were to start with a blank canvas. I would even argue that a redesign is often more difficult than starting from scratch because of these boundaries.

We will delve into the subject of website redesigns by reviewing and discussing redesign efforts of sites such as Yellow Pages, Mozilla and Blinksale.

Why Redesign a Website?

It’s important to note that Design, in one of its most fundamental forms, is the act of solving a problem. Whether it’s to address durability and signal strength issues while still maintaining the beauty of a mobile phone (like with the iPhone 4′s stainless steel band) or coming up with a solid navigation design that improves findability of site content, the act of designing should be purposeful.

When the motivation to redesign an existing site is driven merely by aesthetics, I believe that the incentive of the redesign initiative is insufficient.

There are many costs involved in a website redesign, both to its users and to its owner.

For example, creating a new site navigation scheme or the reconfiguration of the web page layout requires existing users to get used to the new web design.

It requires a lot of time, planning and decision-making to ensure that the present content integrates well with the new design. It might also require updating existing content to fit the new design.

The outcome of the redesign project should justify these costs.

Here are a few reasons why you would want to redesign a website:

The site is not user-friendly
The redesign can increase site profits
When objective information, such as those gathered by data analysis, clearly indicates something is wrong with the design
The redesign can improve the site’s speed and performance
The site is built using outdated web design practices that burden the user experience (table-based layouts, animated GIF backgrounds, outmoded interactions that can be improved using Ajax techniques)
It lacks features that, when adopted, can profoundly enhance the user experience
It has information architecture flaws (poor findability, navigation, categorization, etc.)
It doesn’t fit with the existing company brand

Component Redesign

Does the site need a complete design overhaul or can existing issues be solved through the redesign or realignment of certain components? With the opportunity for us to iterate rapidly and seamlessly on a production site, a partial redesign might be enough.

For example, when a checkout web form of an e-commerce site makes the user’s experience cumbersome, we can use our resources more efficiently by focusing on that troublesome component instead of spreading our efforts thin by trying to tackle everything.

Redesign Mindset: Focus on Solving Issues

It’s a fact that the most important element of a website’s success is its content and purpose. Whether it’s to provide a venue for people to connect with each other (like Craigslist) or to disseminate information (like Wikipedia), success is measured — and attained — based on utility, not aesthetics.

The redesign must be in line with the intended purpose of the site. The design must support the site’s objectives.

Deficiencies in the site’s content and utility will never be resolved by making the site look more beautiful.

Real-World Examples of Website Redesigns

To explore the topic further, let us examine some website redesign efforts.

Yellow Pages

According to the site’s About page, one of Yellow Pages’ goals is "to be a utility for the people: the one-stop site that, in fewer clicks, helps everyone live more."

Therefore, it makes sense that the outcome of their redesign effort should be to enhance findability; to lower the clicks required to reach the desired information. Does the redesign achieve this goal? Let’s take a look.

Old Design

New Design

The redesign of the website has a similar appearance to the original design. It retains much of the original colors (most notably the company colors of yellow and black).

In the new design, localization is used to populate the front page with more relevant content based on where you live. This helps reduce the amount of work users need to perform in order to select the locality they’re most likely interested in.

Other than that, the redesign is predominantly aesthetic, and old features that were potentially useful were taken out.

For example, the "More Tools" tab was moved to a less convenient-to-access spot. The "search tips" link, which could help new and existing users improve their search queries, was removed.

Rich images used in the front page — although they make the page more attractive — can slow down front-end performance and if they don’t enhance the user experience and support the site’s goal, then their inclusion is superficial.

Blinksale

Blinksale, being a web app, would want a site layout that optimizes conversion rates so that new visitors can quickly see how the tool works and quickly discover the path to signing up. In this respect, Blinksale’s new design has several advantages over old one.

Old Design

New Design

The new design makes it easy to spot the primary call to action on the page, using the art of distinction to highlight its location and direct the eye gaze of the user. It’s also easier to learn about the app’s selling points — how much it costs and unique features that sets it apart from its competitors — because of the succinct bulleted list and price information on the left.

In the old design, the eye flow is slightly flawed, if we were to assume that most of their visitors are left-to-right readers.

The logical sequence of a visitor wanting to sign up is to first understand what the web app can do and how much it costs before making the decision to sign up.

The layout of the old design reverses this ideal eye flow.

Six Apart

Six Apart has changed the page layout structure and the colors used in the design.

Old Design

New Design

The look and feel of the new design is more subtle and elegant than before. The search box in the header of new design is a well-positioned new feature.

Plaxo

In this example, we can see both positive and (potentially) negative results of a website redesign effort.

Old Design

New Design

In the old design, Plaxo had a prominent horizontal navigation bar and a home page that was shorter.

The navigation menu in the old design was omitted, which means existing users who relied on this feature now have to relearn how to navigate the site. The new design exceeds the previous page length, which requires many users to scroll down more to access the desired information.

However, the new design has a clear call to action optimized towards new site visitors. It has a clean layout that highlights important site features. It has better content that answers many of the questions a potential new user might have about the app.

ThinkGeek

The latest version of ThinkGeek is a good redesign example.

Old Design

New Design

The components that were effective in the old design were retained and then slightly improved. For example, the left-positioned vertical navigation menu was kept in its place, and just received a typographic redesign to make it easier to read and visually more appealing.

The search box was relocated to reduce the needed eye and mouse movements of people searching for a particular product on the site. It’s now appropriately grouped with the vertical navigation menu because these components complement each other.

Moreover, new features like the horizontal navigation bar and a shopping cart status information have been added.

The design not only makes the site more beautiful, but it also fixes the page layout and incorporates useful features.

Joyent

When I first saw the old design of Joyent, I didn’t realize what the company provided until I read their site’s content. The old site’s design theme — though unique and visually appealing — didn’t seem to clearly support and indicate what the company did.

Old Design

New Design

The refreshed design is brilliant. It keeps the useful site navigation of old design. The new design is cleaner in aesthetics and probably more appealing to their typical audience of IT managers, CTOs, server administrators and the like. The new design adds useful components such as the company’s contact information (prominently located in the site header), a call-to-action button at the side bar and navigation to internal pages in the footer that’s useful to existing and potential users.

Mozilla

Mozilla sites always seem to have notable designs. A Mozilla redesign often incorporates innovative design techniques and additions of helpful features.

Old Design

New Design

Practical features remain unchanged, and some new ones are added; namely, an email newsletter sign-up form and a slideshow highlighting featured content. The new web page layout looks less cluttered, mainly due to the reduction of hyperlinks and the use of whitespace between design elements.

REI

REI is an excellent example of redesigning a site to include useful new technologies and techniques.

Old Design

New Design

The main navigation scheme and information architecture is kept relatively unchanged. As an e-commerce site, upsetting loyal customers by changing things they might have grown accustomed to means that things such as navigation should be approached with caution in a site redesign.

Using an image slider and a multi-level horizontal navigation bar are the two main changes of the new web design.

Dave Wilkinson

Here we have an example of a redesign of a web developer’s portfolio site. Web developers and web designers are known for rapidly redesigning their own websites, often to reflect the most current design trends.

Old Design

New Design

The difference between the old design and new design is remarkably vast. Almost everything has changed. The logo and tagline, the colors, the design style, the layout, the personality of the site’s copy, the information density — they have all been improved.

Etrade

The Etrade redesign effort is more like a realignment rather than a full-blown redesign.

Old Design

New Design

Most of the layout’s components didn’t change, and if they did, the modifications were minor.

However, what has happened is that some design elements have been relocated. Whilst the left-hand vertical navigation menu was eliminated, the links were relocated to its proper place, the primary horizontal navigation bar, reducing possible confusion as to which menu a link might be located and freeing up some space.

Conclusion

The idea of redesigning a website is an alluring one. Before we commit ourselves to this endeavor, we must first take care to plan and think about some important considerations.

Mainly, we should determine if a redesign is something we really need to do. A website redesign doesn’t just mean changing the site’s appearance, it’s to add missing features, address design flaws, reorganize the information architecture, remove unnecessary components to de-clutter the user interface and to enhance functionality.

Resources and Further Reading

About the Author

Mohammad Moradi is an undergraduate in computer engineering. He spends his free time studying and researching web-related topics such semantic web and search engines. Moreover, he is a web/graphic designer. Contact him via moradi.c85@gmail.com. (He likes email among others!)

Six Revisions » Web Design

“Undesign” Your Portfolio Website

Undesign 101

Why Undesign?

Easier to Create and Change

Easier to Make Responsive

When You Don’t Need to Show Off

Undesign May Not Be Your Client’s Cup of Tea

Examples of Undesigned Websites

Just Another Trend?

Related Content

About the Author

The Elements of a Clean Web Design

Common Traits of a Clean Web Design

Solid Web Page Layout Structure

Good Typography

Limited Color Palette

Consistent Imagery

Tips for Achieving Clean Designs

Start Complex, Then Simplify

Tweak, and Tweak Some More

Don’t Miss the Big Picture

Conclusion

Related Content

About the Author

The Proxority Principle in Web Design

Communication through Design

Proxority Principle in Site Navigation

Priority: Boost the Best, Weed out the Worst

Rate Each Element’s Value

Eliminate Unneeded Elements

Proximity: Flow, Feedback and Functionality

Rate Important Elements in Relation to Each Other

Redesign

Proxority: Examples and Patterns in Action

Proxority: Origami for the Web

Related Content

About the Author

A Review of a Web Designer’s 2011 Predictions

Previous Predictions for 2011

1. Flash

2. Print Media

3. Hardware-Accelerated Browsers

4. Television

5. Location-Based Services

Conclusion

Related Content

About the Author

Minimalist Web Design: How Minimal is Too Minimal?

What is Minimalism?

Why Use Minimalism?

Don’t Sacrifice Usability for Minimalism

Don’t Worry, You Can Still Be Pretty

Are You Designing Minimally for a Good Reason?

Is Your Design Too Minimal?

Related Content

About the Author

Quick Overview of User Experience for Web Designers

What is UX?

Integrating UX into Your Design Process

User Research

User Stories and Personas

System Flow

Wireframes

Prototypes

Conclusion

Related Content

About the Author

Staying Passionate and Motivated as a Web Designer

Try New Tools and Techniques

Switch It Up and Do Something Different

Attend Conferences

Go to Meet-ups

Start a Personal Project

Work on an Internal Project

Learn

Become a Specialist

Become a Generalist

Take a Break

Start Freelancing Part Time