EFFICIENT WORKFLOW during the Web designing process

Workflow in Web Design represents the order in which we perform the tasks for the construction of a website.

First and foremost, we have to understand the client we’re working for. For that, we gather all the content necessary: photos and graphics that the business already possesses. Additionally, we need to collect information about their customers. During this process, the client needs to make clear what their project goals are. This will help create a model of the client and their business, that the website will help further promote online.

 

Following this, the next step is to create a site map, it shows how the pages should be organised and linked together. The navigation bar menu will influence the layout, when the layout will determine what kind of experience the user is going to have.

The information presented on a page will vary in size, functionality and relative importance.

The different parts of a page like the header, footer, navigation bar and also the rest of the information has to be organised depending on the factors mentioned above. To create this wireframe we can use traditional pen on paper, a design software (Photoshop or Illustrator), a wire-framing app or any other online wire-framing tool.  

To get a more realistic feel of our website, using pen and paper for sketching is the best method to achieve that. The site map and wireframe are used as guidelines, sketching manually allows to catch the actual vibe we’re seeking for our website.

Creating a few visual layouts and looking at them all once will help us choose the best solution.

Create a moodboard! A moodboard is the visual guide where we attempt to capture the mood or feel of a project. The client can participate in this process by making aesthetic choices separately from the content, in accordance with the project goals. The moodboard should include:

• • Designer’s company name and branding info

• • The customer’s name and logo

• • Fonts and sample texts

• • Colour palette texture and patterns
  • Photos and illustrations

Other embellishments would prove themselves useful such as: paper scraps, magazine cutouts, screenshots of other websites, fabric swatches, videoclips.

 

Designing a web mock-up. Using our previously made wireframe or paper-sketch, we can already select regions on the homepage, to where and how to put the content. The header navigation, footer will be persistently placed on the same region on every page of the website. It would be useful to start at the top of the layout and work downwards.

Time to add the moodboard elements! If the moodboard was created using Photoshop and Illustrator, we can duplicate the necessary layers from our mood board into our mock-up file. Test up different ideas and compare them. Applying the moodboard elements makes the website come alive.

After dealing with these aesthetic elements, we can proceed to adding the page contents and correcting the layout. If there is a Word document, its contents have to be transferred into the Photoshop file. Each content once inserted, has to be adjusted to the existent page’s elements. In regards to the text, it has to be at the right size, style, colour, case and font face. For graphics, images’ size have to be changed in order to fit. Every element has to be worked out in order for the layout to look right. In some situations, it is necessary to discuss with the client, in case there is not enough information, or if that information doesn’t suit the product.

Making revisions to the design mock-up! Often enough, the work produced so far might need a few modifications in order to fully please the user’s needs. Making updates due to client’s feedback and responding to them efficiently is also part of the whole workflow process. Coming up with other solutions and ideas in order to satisfy client’s concerns and curiosity is will be obviously positively received.