Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

6 Tips for Building a Web Design Process That Boosts Your Team’s Efficiency

DZone's Guide to

6 Tips for Building a Web Design Process That Boosts Your Team’s Efficiency

A rundown of six steps suggested for improving the web design process. These six steps encourage individual and group efforts to make a final product.

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Whether you’re first starting out or developing a new team from scratch, it may not seem necessary to put an emphasis on your process; you’re pushing projects through and everyone is all hands on deck.

The reality is that this is exactly the time to make your process a priority—it will give you and your team a structure in which to work and increase efficiency throughout your company.

Verbal+Visual has been around for more than seven years, and every month we take the time to reflect and see how we can improve our process. This allows us to not only enhance our efficiency and collaborative skills, but also  to filter out extra, redundant work and focus on making crucial work the best it can be.

Here’s our process and how we developed it through our many years in business:

1. Do Your Research

The first step in creating a design process is research. In order to help you or your client reach the goal, you have to know what the problem is.

To begin, study your client's existing site. Here are some tips to get you started:

  • Identify elements that are working and others that aren’t
  • Identify the brand’s voice 
  • What are they saying with their brand? 
  • What are their goals?
  • Who is their audience?
  • Who do they want as their potential clients?
  • Perform a usability test to figure out what’s working and what isn’t

2. Study the Competition

Sometimes you have design assumptions and hypotheses. However, it often helps to look to outside sources for inspiration. How have competitors crafted features? What is their strategy? What are the standard best practices that you can identify across multiple competitors?

Here are a few other questions you should try to answer:

  • Who are your client’s direct competitors and what are they doing?
  • Again, identify elements that are working and others that aren’t.
  • Are there any similar elements that competitors always use? If so, how can we reinvent it so that we stand out above the rest? 
  • Take inspiration. 

3. Get Inspired

After you get an idea of what the problem is, it’s time to solve it, but first you’ll need to come up with ideas of your own. Below are examples of site aggregators that we use to begin collecting inspiration:

4. Create a Design Studio

Gather all your thoughts into one place so you can look at it all at once. At this stage of the process it’s all about quantity, not quality. Put out all your ideas, even the ones you think are totally crazy. It might seem crazy in your head, but you’ll never know until you see it in real life. Who knows, that crazy idea might be the one thing that makes the design unique.

At Verbal+Visual, we run creative activities called design studios with key project team members, whether they are designers or not. Essentially, a group of individuals from different walks of life comes together and brings ideas to the table in order to solve a problem. These unique perspectives have just as much (if not more) potential of developing innovative design as one designer’s vision.

Here’s how our design studios works:

  • Discuss an area of opportunity. You might have done the research, but other people on your team might have been working on a different project before you dragged them to do design studio. Fill them in so that your team is on the same page.
  • Specify what you are designing for. What will this studio focus on? Header? Navigation? Homepage? Additionally, specify what platform type you will be designing for. How will this impact the design?
  • Give context. Explain the circumstances for which you are designing. Example: Design a landing page for a local grocer that will allow users to add items to their basket without having to visit a unique product page. 
  • Diverge. Participants have five minutes to sketch out as many ideas as possible. These sketches will consist of low-fidelity renderings of UI content (images, copy, buttons, accordions, carousels, etc.).
  • Converge. Each team member is given a brief period of time to present their designs and justify the decisions they have made. Fellow team members provide feedback and ask questions to reveal further insights from their peers. 
  • Diverge. Once each team member has defended their design, the group will once again diverge for five minutes in order to sketch. However, this time the goal will be to produce a single design, which cannibalizes the best elements of individuals sketches.
  • Reflection. Once again the team will converge in order to discuss their ‘final’ designs. At this point, patterns should begin to arise and common features should emerge between designs.

Design studios are a great way to get a fresh perspective andnew ideas. Use it as often as needed throughout the design process, they don’t have to be limited to the beginning. 

5. Build Wireframes and Prototypes

Following our design studios, we proceed into the form wireframing process. This process synthesizes our research and the ideas generated from the design studios and puts it into the first cohesive visual format: wireframes and prototypes.

We build wireframes by taking the information architecture, research, and content to design a layout that sticks to layout only. No images, only one font, navigation, a logo, and content boxes are positioned appropriately.

This area is where your usability tests from the current site, and all of your research, come into play. We typically start with a desktop layout first, however we keep mobile in mind right from the start and constantly poke holes in the design as it relates to mobile. Mobile viewership is now higher than desktop, so always design with mobile in mind.

As we proceed throughout the wireframing process, we use those wireframes to create clickable prototypes. There are several prototyping tools available on the market, but our team prefers to work in InVision. This part of the process is very, very important, in a few different ways. First and foremost, investing time into building wireframes correctly means you’ll be more certain your user experience will work well, and you’ll save countless hours in the design and development process, as well. Here are a few simple tips to perform the wireframing portion correctly:

  • Design with development in mind. Find out what responsive framework the development team will work in (i.e. Twitter Bootstrap), purchase a Photoshop or Sketch template for that framework, and design based off that grid. This alone will save countless hours for the development team.
  • Prototype and perform usability tests. This is also vital, as it ensures that what you’re designing will actually be usable. Check out our post on usability tests to learn more.
  • Design responsively. This should be a no-brainer, but always make sure that you’re designing for every screen appropriately (mobile, tablet, laptop, and large desktop). All four are very important, and you’ll want to include the visual designer (if it’s someone else) and the development team in the process at key points to make sure everything looks kosher.

6. Polish With Strong Visual Design Elements

If you’re reading this, you probably have a strong handle on the visual design process. The main points of visual design that we consider, once we feel strongly about the wireframes are:

  • Make it an experience. What you’re creating should really be something that delights a user. Think about how can you use animation, UI design, video, cinemagraphs, and other unique content, and subtle experience features, to truly delight customers, while also keeping SEO and load time in mind. It’s part of the challenge of digital design these days, and something that every designer must address.
  • Stay on brand. Keep to a core structure and design framework. This includes headers and body copy, as well as a visual structure that is consistent across the board. Make it easy for your development team to take what you’ve done, and translate it into a live site.
  • Create animations and videos. Creating short animations or videos to show the development team how a site should function can save hours upon hours of back and forth. It will allow the development team to build and the visual designer to really control how the site should feel.

In Closing

Creating a consistent design process will free up your time, allowing you to be more creative.  After using this process several times, you’ll also begin to see consistency in your results.

Efficiency will improve, and you’ll be able to think freely as previously difficult tasks simply become part of the process.  Everyone’s process is different, so use this as a framework and make it your own. After all, that’s what will allow you to share your process with clients, and allow them to identify uniquely with you.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
studio ,process ,design ,elements ,visual ,team

Published at DZone with permission of Anshey Bhatia, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}