Just Creative

I’m Jacob Cass, the founder of JUST™ Creative. I’m a multi-disciplinary graphic designer, working with clients all around the world. My specialty is logo & brand identity design. JUST™ Get in touch.

Love


Understanding the Creative Process behind Website Design

Posted on

This article has been contributed by Lori Wagoner.

The designing stage is arguably one of the most important stages of a web project. It typically involves giving shape to all the information defined in the planning stage. The main deliverables upon completion of the design phase are documented site structure and visual representation of the website.

A web designer should not only be technically proficient in web design platforms and associated technology, but also a creative individual who can think out of the box.

All web designers have a different creative process that allows them to achieve their designing objectives. But at its very core, the creative process for every successful designer remains the same.

Typically designers follow a step by step creative process. Let’s have a look at the 5 pointers that take you through this process:

1. Sketching / Brainstorming Ideas

Once you are done with requirement gathering and analysis and are very sure you know everything there is to know about the project, it’s time to get into your creative zone. Get a pencil and paper and sketch out your creative ideas!

Sketching is a great way to start any design. Using pencil and paper (or tablet) for sketching gives you the distinct ability to jump from one idea to another easily.

Wireframe Sketch

Whether you are a website design agency or a freelancer, being able to communicate ideas to clients with a sketch is really vital, especially during the early stages of a project. The best practice is to sketch out a bunch of rough designs for your ideas, narrow them down to a few and let the client provide feedback on whether you are on the right track or not.

Depending on the knowledge or expectations of your client, you may want to skip the sketches and move into some more detailed wireframes or style tiles.

Style Tile

2. Define Content & Create A Workflow

When your client green signals an idea or two, the next step of the creative process is to create a workflow. Creating a workflow includes creating a list of each section to be included on the site, with brief information on what type of content will be shown on each page.

The client is presented with the outline or the workflow so they can add, remove or adjust any sections or features. Sharing the workflow with the client gives the designer room for creativity and in turn helps in churning out innovative design ideas and keeps the client in loop at all times.

Website Sitemap

The client needs to approve the workflow before the project continues. This will help you develop a budget and time frame to build the site (not a part of the creative process but important all the same).

3. Low-fidelity Wireframe

Low-fidelity wireframes provide a framework for your creative designs. These wireframes are simple line drawings of website layouts that focus on placement of elements rather than color and type. They describe in detail what features will be on the site, such as user accounts, social networking functions or a newsletter sign-up. Low-fidelity wireframes are presented as a rough sketch to the client without graphics.

Low Fidelity Wireframe

Wireframe Sketch

A designer should not be afraid of experimentation while developing wireframes. Sometimes, as you fill in more detail, you may realize the original layout is not working well. That’s the whole point of the wireframing process; to make as many blueprints as possible in order to narrow down the best way of representing the information at your disposal.

4. High-fidelity Wireframe

Post low-fidelity wireframes, high-fidelity wireframes play a crucial role in providing a more realistic experience of the actual product, in this case your website. These wireframes provide a better outline of the product; filling in the details missing in low-fidelity wireframes. These wireframes define the visual hierarchy of the page, actual form and interaction elements, and often labels, instructional text and some copy.

High Fidelitity Wireframe

High Fidelity Wireframe

Prolo Wireframe

They are extremely helpful as they determine what content deserves the most focus and the percentage of space they can occupy on a page. They can be used in sequence to show how a specific task can be accomplished in a sequence of screens. These wireframes highlight how user friendly and intuitive the product is going to be.

High fidelity wireframes incorporate a level of detail that closely matches the design of the actual webpage though it should not dictate the final design or UX. So before finalizing, you should tryout different versions by experimenting with the 3 main components of wireframe information design, navigation design and user interface design. Finally, select the one that best suits your client requirement.

5. Visual Mockups

A web designer brings life to the wireframe by coming up with a visual representation of the website (see The Ultimate Web Design Workspace) .The mockup is meant to provide your web client with visuals of what the completed site will look like in a browser window before the web developer spends any time building the web pages.

Prolo Website Design

Prolo Website Design

A graphic mockup is the best way to show the client what the finished website will look like because it can demonstrate near-precise color, accurate representation of font sizes, and precise placement of all the navigation and content elements on the site relative to one another.

To achieve that awesome look and feel in the design, a website designer should be creative and play with the design elements and overall user experience. Experiment and choose the right combination of colors, fonts and typefaces that are ideal for the brand and website you’re designing.

The idea is to use a bit of trial and error to come up with a design that is unique, visually appealing and highly functional. That’s the mark of a reliable and effective creative process.

Lori Wagoner is the Web Community Manager for Ink Colour, a prominent printing equipment retailer in the UK. Lori has blogged at Tweak Your Biz, Get Entrepreneurial and many other business and tech blogs. You can reach her on Twitter.

SUBSCRIBE: RSS, Email, Twitter, Facebook



Related Premium Imagery


14 JUST™ Creative Comments

  • Mario Reply

    I love this article!
    thank you so much for sharing this! ;)

  • rupam { xhobdo } Reply

    Great to read this wonderful post, thanks a lot for sharing.

  • Hamid Khan Reply

    I believe the most important step is the sketching/brainstorming part because if you get that right, you can do massive improvements on the next steps.

  • Rohit Prabhakar Reply

    Nice Post!

    One thing that may be worth clarifying for the end business users who are reading this post to understand the process before they start on this journey and have a CMS involved is:
    #2 “Define Content & Create A Workflow” is different from defining the content and workflows in the CMS. During this step the design team understand the “page content structure” needs and the associated “user interaction workflows”.

    It is an awesome post for both the design and the business teams to understand the process properly. Thanks for sharing.

  • Qudrat Ullah Reply

    I am completely agree with this post that lots of efforts and ideas are included behind the attractive website design. People can easily understand with the help of this nice post that web designing is not an easy work.

  • Advert Lines Reply

    Hey – good blog post. I love the way you talk on your blog post, it’s the sort of talking I like to do. Easy understanding words for everyone to understand.

    I’m going to end this post with a free tip i found out last night.

    When asking for a CTA “call to action” don’t use a link for the user to click – use a button – it’s been proven to get a higher CTA.

    I hope this helps someone.

    Advert lines.

  • Jon Reply

    Surely #2 in your article should be first? Structure and content should always come first before you put pen to paper to sketch layout ideas.

    • Jacob Cass Reply

      Jon,
      It can be both ways, I’ve found personally that it works better the way outlined in this article as it allows you to figure out actually what content you need or don’t need.

  • Helge Sverre Reply

    Ahh thats a great writeup on design workflow, really helpful!

  • Altaf Gilani Reply

    Every stages you defined takes a lot of work first and at the end the fruit smells creative and appreciative. Really nice and creative article. Thanks and Keep Posting!

  • Asif Iftekhar Reply

    I have just known enough of website designing. Thanks for the post. Really effective your posts are!

  • Rakesh Chaturvedi Reply

    After going through your blog, I became obliged to comment. Undoubtedly, these types of blogs do not come in great supply. Your clarity of thought, flawless writing, unbiased approach and way of writing really caught my eyes. No doubt, this piece of writing deserves accolades.
    All those who are seeking for a company for website developing, can come to us. Being the pioneer player in the field of website development, we know the nuances of website, arguably more than any other company. You can contact us

  • Sam Turner Reply

    Sorry, but there is so much many web designers will disagree on.

    You talk about a graphic mockup giving and accurate representation of fonts and colour?

    Come on, we all know that visuals never look like the final website, that is why we don’t provide visuals to that level. It is also why for years we always put a jpg of the psd in our portfolios rather than a screenshot.

    You haven’t designed a website, you have designed a picture of a website. It is a pretty picture of a website, but it is still just a picture.

    You wait till the the stage to put the content in, but the content is always the most important start.

    Each address under the map is perfectly formed on three lines. What about when one of the address titles breaks over two lines, how will the other addresses react?

    Sorry, I don’t mean to attack, but it is 2014 and websites are simply not made this way anymore. The visual styling of a site is only about 20-30% of the work, and if a client wants to see what the website will look like when finished, they will have to wait until it is finished.

    Work with them and keep them involved in the process so there is no “big reveal” in the form of a jpg.


Submit A Creative Comment

Your email address will not be published. Required fields are marked *
Please use your real name and do not use keywords. All comments are moderated by myself and I reserve the right to edit or not publish your comment. Thank you!

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

 


© Copyright JUST™ Creative 2007-2013. Designed by Jacob Cass. Powered by Wordpress using the Skeleton Framework. Fonts served by Typekit. Site hosted by (mt).

x