“Web Design Tools Can Increase Your Productivity Ten Fold”

It is no secret that if you don’t plan your work ahead, you will more than likely fail to achieve your wanted results. This goes for almost all walks of life. In this blog I talk through the web design tools and workflow methods I use to get each and every project done.

1. Sitemap Creation

The first stage of my design process is to create a sitemap of the product I’m working on. This allows the specification of the product to be translated into a visual representation of how it will be structured. A sitemap shows the pages the website will contain, how these pages will be arranged, and how users will navigate between them.

Web Design Tools - Site Map

 2. Sketching

When you’ve established the structure of the website, it’s time to think about the layout of its pages.

Sketching is fast, making it a great time to explore the different directions you could take your design. This means you’re not wasting large amounts of time spent experimenting with ideas that won’t eventually make the cut, and ensures any delays that occur as a result are out of the way early-on, at a stage where significant time and effort is yet to be invested in the project.

You can sketch the traditional way with pen and paper (I like plain A4 or Dot Grid books) or with drawing apps like Paper for iPad. Of all the web design tools out there, Paper has been one of my favourites.

Web Design Tools - Wireframe Sketching

 3. Wireframing

When you’re done sketching the individual pages of your website you need to create them in digital format so they can be presented to the client.

There are various web design tools out there (Balsamiq Mockups and OmniGraffle to name a few) that have been created primarily for use in the wireframing stage of a project. Amongst other time saving features, these tools contain libraries of commonly used interface elements that you can simply drag and drop on to your wireframes without having to create them from scratch.

I however prefer to create wireframes using the same application I will later use to handle the visual design of the website (We use Sketch 3 at Spudd Mobile, which has replaced Photoshop as our application of choice for designing websites and mobile apps). This ensures I don’t unnecessarily spend time creating the same elements twice.

Web Design Tools - Wireframes

 4. Prototyping

Next up, it’s time to use your wireframes to create a functioning prototype of your website.

Thanks to web design tools like InVision, Marvel, and UXPin, prototyping has never been so easy.

By linking pages and adding things like gestures and transitions, you can produce a usable version of your website design quickly and easily. This enables yourself, your team, your client, and other user testers to interact with the website before a single line of code has been written.

Creating a prototype after your wireframes have been approved but before you’ve begun to tackle the visual design of the website ensures focus is fixed firmly on the things that matter; the usability of your design. This means time isn’t wasted critiquing styling decisions like colour and typography when there are far more important issues to deal with. In addition, feedback on your prototype will be much faster to action since they only need to be applied to wireframes rather than full-blown comps.

Web Design Tools - Invision Prototyping

 5. Inspiration and Stylistic Discovery

You’re done testing the prototype, and you’ve received the feedback you were after. You’ve adjusted your wireframes based on this feedback and you’ve got a design that’s in much better shape than it was before. You’re now ready to start thinking about how it’ll look.

I try not to spend too much time thinking about aesthetics until I’ve nailed the user experience. My primary objective when exploring different options is to ensure first and foremost that my styling decision improve clarity. It’s not just about creating pretty pixels; aesthetics alone does not make a website clearer, easier to understand, or simpler to use.

Dribbble is always a good source of inspiration. I like to browse through shots and save my favourites in a folder on my system. When my creative juices are a little stagnant, I turn to them for a top-up. These days I tend to use Dribbble more for visual stimulation than exploring potential page layouts. It’s still a great community, but lately there seems to be more and more focus on sharing pretty pixels than examples of solid user experience design.

There’s also plenty of styling inspiration to be found on Pinterest with a simple search of “website design” or something similar.

I tend to source fonts from Google Fonts, who have a good collection of open-source, web-optimised font families. Other popular websites include Fonts.com and Font Squirrel.

Unsplash, picjumbo, and raumrot are all great places to get your hands on high quality images that are free for both personal and commercial use.

Pixeden, Premium Pixels, Creative Market, and Sketch App Sources (if you’re a Sketch user) offer plenty of good free and paid graphic resources. I use these resources to get hold of icon packs from time to time, but generally speaking I create everything else myself. Confidence in your work is all important, so these are all invaluable web design tools. If you can gain an insight into what type of imagery you would like to use beforehand, it will save you plenty of time debating when it comes to applying the visual stimulus.

Web Design Tools - Design Inspiration

 6. Visual Design

Having spent the time exploring and experimenting with different options for your website’s styling, it’s time to integrate your chosen colour palette, typography, imagery, and other visual aids into your design.

Be sure to keep in mind at all times that your focus throughout this stage is to use your styling decisions to improve the clarity of your design. Whilst an aesthetically pleasing design is important, how you’re going to achieve should be a secondary consideration. What looks good and what doesn’t look is largely the opinion of each individual user; you’re unlikely to come up with a look and feel that will be loved by everyone.

When I’m satisfied with what I’ve produced and am ready to show it to the client, I create another prototype. Although the structure and flow of the individual pages and website as a whole hasn’t changed since the end of last prototyping stage, I like to create an additional prototype after applying styling as it is the closest indication of how the final product will look after it’s been built.

As mentioned above, I tackle the visual design stage with Sketch 3, and create and distribute prototypes with InVision.

…and that’s it! As long as I follow these points and make good use of the web design tools at my disposal, I should have a design that you are very happy with! It is then on to the development stage, which will be explained in the next post.

  • http://mattdevries.com.au matt devries

    Great overview – thanks!

    • http://www.spuddmobile.co.uk Ben Jones

      Thanks, Matt!

Spudd Mobile
Forum 3, Solent Business Park Whiteley, Fareham, Hampshire PO15 7FH
02392 160 290