Research: First Steps for Designers

In his new book, Sexy Web Design, Elliot Jay Stocks shares the methods he uses to create stunning web interfaces – and one of the most important steps is to do some research. In this sample from the book, Elliot explores different ways to gather inspiration and cool ideas for your next project.

We’ve been hired by an events promoter to build a website for an upcoming event for Web industry professionals. The goal is for the visitor to buy an “access all areas” ticket for the event; the design should have a huge impact on users when they visit, the interface should be usable and clutter-free, and they should be really impressed by what they see. But before we even think about touching Photoshop, we need to do some research.

Let’s begin with the first logical step, and analyze the brand values associated with the event. These in turn will be the core messages that the site needs to convey. Let’s imagine we ask our client for some brand values, and they give us the following ideas to work with:

  • fun and exciting: more than just a conference
  • credibility: advice from the absolute experts
  • inventive and innovative: a group of creative people open to new ideas

Already that might start conjuring up some stylistic ideas in our minds, but let’s leave that for the moment. We should be asking ourselves: what makes up an event site? Our client has yet to specify the actual pages they want, so we’ll help them out by brainstorming:

  • Home: an introduction to the event; leads people into other parts of the site
  • Bookings: to sell the ticket types
  • Schedule: for details about the event
  • Speakers: an easy glance at the experts involved
  • Venue: where the event is located and the facilities available
  • Sponsors: may appear in the sidebar or footer, rather than a page of its own
  • Community: parties, links to social networks, photos, and so on

Let’s take a look some of the values we want to convey with our site, and take a peek at how other event web sites go about it.

The Element of Fun

Events – or, more specifically, the kind we like to have in the web community – tend to emphasize the convivial aspect. Who would’ve thought that people like to hang out with their friends and colleagues for a social drink?

With the fun element being such an important selling point, it makes sense for us to give this a lot of prominence on our web site. Although it’s important to stress the knowledge that can be gained at such events, we all know that we’re just as interested in the parties! That’s why we’ll suggest to our client that a whole page should be dedicated to social gatherings happening around the event, with the imagery of the site portraying a fun, party-like atmosphere.

Gravitas and Authority

But we mustn’t get carried away with all this fun malarkey. We need to make it clear that this is a credible, serious event, too. Otherwise, how else are delegates going to convince their bosses to pay for this out of their training budget? The web site for Web Directions North, shown below, is neat, clean, and means business.

Research: First Steps for Designers

Going to an event is meant to be an educational experience, especially when a workshop is involved. The Sidebar Workshops site we see in the figure below does this well by explicitly stating What You’ll Learn right near the top of the page, and again right underneath the registration information. As well as the prominent position, the text is short and easily digestible: a nice, memorable chunk to take away.

Research: First Steps for Designers

Inventive and Innovative

Our client also wants us to ensure that the design suggests a feeling of invention and innovation. One way to present this idea with the most impact will be to create a design that breaks the rules slightly, whether that’s in terms of color, layout, or type. As we look around for inspiration for our design, we’ll be sure to keep our eyes out for examples that exemplify this goal. The real opportunity for trying something new will come later, however, when it’s time to plan the aesthetics of the design.

Achieving a Balance: Information and Atmosphere

Balancing the display of information while conveying the right atmosphere is a huge challenge.

When I designed the Future of Web Applications (FOWA) Miami 2008 site, I attempted to get the best of both worlds by giving the site a fun kind of feel with the beach in the background, but keeping the information neatly organized in the foreground. You can see this on the schedule page in Figure 1.3, with the clear separation of time slots and information. We decided that it would be more helpful if I designed some icons to visually indicate each type of session; that way, users could clearly see if it was a presentation, a lunch break, or a party, and so on. This allowed for the opportunity to throw a bit more of the playful feeling into the mix, so I threw in some little dudes.

Research: First Steps for Designers

Research: First Steps for Designers

The Sidebar guys kept the schedule looking fairly businesslike on their Workshops site, seen in Figure 1.4, but it still looks terrific, and is a great example of attention to detail.

Research: First Steps for Designers

What Matters the Most?

If you think about what might be the most important information relating to an event, you might say date, location, and price – but in all likelihood there are other elements that entice potential attendees.

Most events’ web sites recognize celebrity appeal and make their big-name speakers as obvious as possible, like dConstruct, shown in the figure below. The reverse is also true: if the event lacks many web personalities, they’ll play down the speaker list. Sometimes the speaker list is so unwieldy that they choose to exclude it from the homepage altogether, and instead focus on more general information, as demonstrated by the South by Southwest Interactive homepage below.

Research: First Steps for Designers

Research: First Steps for Designers

Venues and locations can sometimes be a drawcard for delegates. And when the location is also a popular holiday destination like Miami, then you should really shout about it.

Research: First Steps for Designers

Brand Consistency

Brand consistency is the goal of keeping a consistent look, feel, and message across all of a company’s communications, including its web site. Depending on the project, you could find yourself in one of a number of potential situations. Let’s take a look.

From Scratch

If the brand for the event is yet to exist, then our site will be providing the beginnings of a defined experience and acting as a style guide for other events to follow. Be mindful that limits may still apply, though: this might be the first event, but it should probably tie in with already established concepts by the company. That might translate to a simple action like incorporating the parent company’s logo into the footer, or it may be more complex: there could be a particular set of style guidelines that we have to follow, such as a color scheme or font.

Redesign

If previous site designs exist, then you should maintain consistency, but each event could have its own voice, or theme. You can use previous versions of the site as a guide to design elements you could reuse. Perhaps you could use a different color palette, yet still maintain a similar design template.

Tie-ins

You may need to create a design that closely ties in with a previously established identity. The An Event Apart web site seen below has its own branding, but incorporates the exact same look and feel of its sister site, A List Apart. Rather than taking only small elements of the design patterns as you might find when a child site is borne of a parent company, the two are treated as equals: two sides to the same coin.

Research: First Steps for Designers

Research: First Steps for Designers

For our project, we’ll need to incorporate the company logo of the organization running the event – but we’ll have free rein when it comes to the actual event branding, since it’ll be the first of its kind (that is, the first scenario – From Scratch – above). This will demonstrate how you can be creative while still operating within a few guidelines. Guidelines are good, by the way: they take away some of the scare factor of a completely blank canvas!

Inspiration Resources

So far we’ve been looking to other events’ web sites for inspiration, but we don’t have to stick to that niche. It’s become quite popular to collect examples of first-rate design and archive them as sets on Flickr, an image-sharing service. To start off, check out Patrick Haney’s massive collection, and the Web Design Inspiration Flickr pool which he administers. For even more Flickr sources, check out Vandelay Design’s list of 99 Flickr groups for design inspiration. And numerous web sites exist, such as Smashing Magazine and UI Pattern Factory, that are excellent sources of interesting design examples.

Atmosphere Inspiration

Let’s get an idea of the kind of atmosphere we’d like our site to have – the feeling we evoke through color, subject matter, and texture. You may be familiar with the concept of a mood board, which describes a general collection of images, textures – almost anything that conveys the same mood you want to achieve. Let’s take the term wooden: a traditional mood board might entail, for example, cutting out images of wooden furniture from catalogs or photographs of trees from magazines, and then laying them down on a canvas to make a montage.

Oh, and by the way, it’s unnecessary to use an actual board – any surface (physical or virtual) will do! There is even a variety of software tools available to help you create your own mood boards if you want to do so digitally. The figure below shows a mood board created in Photoshop from public domain and Creative Commons-licensed images found on the Web.

Research: First Steps for Designers

Collating a photo set on Flickr is akin to the action of creating a mood board, particularly when researching atmosphere. I’ve collected some, which you’ll see below.

Research: First Steps for Designers

Composition Inspiration

We aim to create a unique and interesting web site, setting it apart from the kind of site you see every day. A noteworthy way to stand apart from the other sites is to think of an unusual composition or layout. We’ll need to take a few risks in the interests of originality, so I’ve been collecting design examples which follow the same mantra. Of course, we’ll still be mindful of the site’s usability – it’s important to stick with what users will understand – but you’ll see that even a little thinking outside the box can go a long way. Here’s my composition set on Flickr:

Research: First Steps for Designers

Functionality Inspiration

Our site will contain a number of functional elements, like navigation mechanisms, a ticket purchase form, a schedule, and plenty more. It’s useful to look at all the different ways other designers have chosen to implement each of these elements.
Chris Messina has been collecting examples of user interface (UI) design on Flickr for years now, and his collections go beyond pure inspiration into the realm of an indispensable resource. You’ll also find a wealth of UI examples collected at Pattern Tap, where users have collected, tagged and commented on widgets from all over the Web.

Research: First Steps for Designers

Look Outside the Web

I’m a keen believer in the idea that if you only use web sites for inspiration, you’ll only ever build a web site that looks like other web sites. Of course there’s nothing wrong with that – it’s essential that a web site looks and behaves like one – but you risk your design growing stale if you search for stimuli in only one place.

There’s a whole world out there full of outstanding design – architecture, fashion, product, packaging … why confine yourself to one medium and limit your creative potential? Take your trusty camera and go for a walk – collect photos of signs, textures, anything that grabs your fancy. Doodle in a notebook whenever you have an interesting idea. Before you know it, you’ll have a huge collection of inspiring material from the real world.

If you look at the world of print design in particular, you’ll see most of the same principles of web design at work. After all, the new discipline of web design is derived from years of print design tradition, but with a few of the limitations and freedoms reversed. So there’s still plenty of inspiration we can take from the print design world to better inform what we can achieve on the Web. I’ve collected some offline examples in – you guessed it – another Flickr set, shown below.

Research: First Steps for Designers

Collection Tools

I’ve been saving interesting and inspiring snippets in my Flickr profile, but it’s not the only way.

RealMac Software – the team behind web development application RapidWeaver – have recently released LittleSnapper, a Mac application that allows you to collect sources of inspiration from the Web and share them with your peers. It’s a nifty new tool for Mac-based designers, and one I’d heartily recommend.

For Windows users, TechSmith’s Snagit application captures screenshots and screen images, with a library you can use to organize your screenshots by tags, URLs, and date.

Then there’s Evernote, suitable for both Mac and Windows, an all-encompassing note-keeping application that you can access from just about everywhere, thanks to versions for your desktop, phone, and web browser. You can create, upload, and save images, text and audio, and if there’s text contained within the image, Evernote’s optical character recognition (OCR) engine will identify it and make it searchable. That’s very handy for when your notes archive becomes rather large!

Research: First Steps for Designers

Research: First Steps for Designers

Research: an Ongoing Process

Research is one of the most valuable ways to spend your time as a designer. Keep your eyes and mind open, and let yourself be influenced as much as possible. Ultimately, the more research you do, the more likely your design will be a success.

If you’ve enjoyed this excerpt from Sexy Web Design by Elliot Jay Stocks, then you’ll love the complete sample chapter. Even better, buy the book and begin creating stunning web interfaces today.

Replay

Category: other Time: 2009-03-18 Views: 1
Tags:

Related post

  • first steps for ispconfig3 2013-11-12

    Hi all, I noticed that there is a "first Steps" for ispconfig2, could we have one for Ispconfig3? Thanks Heeter ________ Lincoln cosmopolitan history --------------Solutions------------- Till is working on it. Thanks for the response, Falko. I h

  • What are the first steps for growing UX operations in an agency? 2012-09-25

    I'm the first UX hire at an aggressively growing digital agency. I've been doing UX for corporations for a few years and before that was mainly doing dev and some minor design work. I'm working on tweaking the standard client workflow to incorporate

  • First steps for implementing usability testing in an organisation? 2016-06-13

    I have voiced the possibility that doing testing of designs or prototypes on real people to get feedback at early stages in development and continually through production could improve the developed products. I have been given the go ahead to look in

  • What do you recommend as a first step for hands-on learning about flash? 2011-11-26

    So far, I am enjoying my new Speedlight (Nikon SB-700), but any good results I have gotten have been mostly luck. I'd really like to understand how to use it so that I can make intentional technical decisions (as opposed to relying entirely on accide

  • Best first steps for a hard drive? 2014-12-07

    I volunteer my time to service my schoolmates, fixing their problems, but conversations have come up about surveillance and hacking. I've been watching DEFCON's videos, and have learned that even flashing the BIOS, a clean OS, and disk encryption is

  • What are the first steps for debugging server slowdown after Mysql and Apache upgrade 2010-06-22

    I ran a 'yum update' on a CentOS based web server. Kernel version stayed the same at 2.6.21.7-2.fc8xen It upgraded a bunch of stuff, including - mysql from 5.0.45 to 5.0.91 apache from 2.2.3 to 2.2.15 I'm finding that my server response time is quite

  • First steps in Designers World 2014-04-16

    This question already has an answer here: Coming from a programming background, where should I start to learn web design? 1 answer My question is simple so feel free to give me any kind of suggestion. I want to study as a Designer and I'm expecially

  • What are the first steps to debug nginx default page not showing on fresh Ubuntu vm install? 2015-10-03

    On a fresh Ubuntu 14.04 virtual machine I've run the following commands: sudo apt-get update sudo apt-get upgrade sudo apt-get install nginx sudo service nginx start In a browser, if I go to the VM's ip or domain the default nginx page is not shown,

  • Ideas for mobile, tablet, desktop or web for app that in a first step consists of lots of data entry? 2014-11-04

    With a friend I am making an app that basically consists of one big calendar in which data can be entered. The app will be a sowing calendar which can be used to enter the months in which you are planting specific crops and will calculate when you ca

  • First Steps of Making a Programming Language 2011-06-15

    I am thorough with programming and have come across languages including BASIC, FORTRAN, COBOL, LISP, LOGO, Java, C++, C, MATLAB, Mathematica, Python, Ruby, Perl, JavaScript, Assembly and so on. I can't understand how people create programming languag

  • An Introduction to jQuery for Designers 2012-01-31

    I found approaching jQuery to be an intimidating experience because I'm not a developer. Implementing JavaScript was what "they" did on the back-end of a website, but had little to do with my process when creating a design for a website. But as

  • First steps into the UX design world 2013-06-17

    I just joined the UX forums and firstly, wanted to say hello - im a newbie. well, actually im actually a motion graphics designer - wanting to make a switch into UX design~ honestly, I have very little web design skills~ so my first question is: woul

  • SEO Strategies for Designers, Part 1 2013-10-01

    SEO Strategies for Designers SEO Strategies for Designers, Part 1 SEO Strategies for Designers, Part 2 Should designers be expected to carry out SEO? For years now we've heard the phrase "SEO is dead" being bandied around the net, most recently

  • 5 Must-have Android Apps for Designers 2014-07-28

    Photo: modulor For most of the short history of web development, the only platform that we could rely on for graphic purposes was the desktop computer. I doubt I have to tell you, as SitePoint readers, that thanks to the ceaseless drive of tech innov

  • What is the "big picture" or "first step" to pointing a newly purchased domain to my localhost? 2010-02-21

    I just purchased a domain name but I don't know what I'm doing yet. Before I get a hosting account, I want to test out some things on my own http://localhost/ How do I go about pointing the DNS to my IP address for my site? Please remember I'm just g

  • What are the steps for configuring gitosis? 2010-10-21

    Looking for setup steps for gitosis after installing from apt-get. --------------Solutions------------- apt-get install gitosis a. The gitosis repo directory is: /srv/gitosis b. The gitosis user is auto created and named: gitosis Init gitosis with yo

  • I am not able to traverse from the last step to the first step in a multistep form 2011-04-21

    I have created a multistep form with five steps using programatically. Is there any way to traverse to first step form the fifth step? I have created multistep form as given in example module. In the module, each step gives previous and next link onl

  • Does anyone have a good list of steps for reducing a bug? 2011-05-23

    I recently ran into an almost-consistently reproducible bug that I was trying to reduce. At the time, I was tired and simply couldn't think of what to do next after about an hour of work (this bug was time-consuming to hit). I know I've read some gre

  • Cannot start/stop Websphere from the First Steps Window 2011-06-23

    When attempting to start or stop a Websphere 7 service from the First Steps window it fails with the following error; Cannot run program "C:\WebSphere\AppServer\bin\WASService.exe": CreateProcess error=740, The requested operation requires eleva

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 3.026 (s). 13 q(s)