Website Design Process: Agente Vision

Each project is unique. But the general website design process is pretty much the same across all website design projects, from one-page websites to complex e-learning solutions. Though there is some basic approach to website design, it is adjusted to the specific needs of the company using it because each organization is unique, and so is the process. And we are not an exception. Today we will lift the veil a bit and tell you how the tasks are carried out in Agente and how we work on projects from beginning to end. After reading this article, you will know what steps we take to complete a web design project, what tools we use to get things done and how it helps us to be more productive and efficient.

The process

Now that we have cleared up the question “what is the design process” let's move on to the step by step description of Agente’s version.

1. The web design brief and planning

It all starts with the introduction. PM and Art Director are being introduced to a client and receive the basic set of documentation on the project. It usually includes:

• the project brief that is filled in by the client, with the description of the project’s core logic and idea, the primary business goals, the description of the target audience,

• other technical requirements and specifications.

Sometimes clients have only a rough idea of the project and don’t know where to start and how to build it, how to formulate the requirements. Then our Business Analyst comes into play and works with the client on the brief and requirements document and helps to formulate it.

When the team receives this basic information about the project, the meeting is arranged to discuss the project. During this meeting, we can generate and discuss ideas, clear all the questions, but the main purpose of this meeting is to make sure that the project’s team understands what needs to be done and what product we are working on.

After that, we prepare the project schedule with the list of project milestones and deliverables and formulate the project plan. The project is being added to the corporate project management system (we use Worksection for that matter) with the list of tasks being prepared after that, we also create a special project channel in Slack and send an invitation to everyone who is involved in the project. This channel is for the internal project communication. Sometimes we create a group in Skype for external communication with the client. This helps to eliminate questions as we go. And this is how the process of web design starts.

Tools of step 1

  Worksection           Google Docs

  Slack                        Dropbox 

  Skype

2. UX and UI Design

The graphic design process is divided into two stages: UX and UI. During the first stage, we work on the information architecture (IA) and overall layout of the page, while during the UI phase we are more focused on the visual solutions like style, fonts, colors, etc.

UX design

It all starts with a UX design strategy. If you are not familiar with it, you can find more information in our article about  Mobile App UX strategy. Depending on the type of project we are working with and its complexity we may create user scenarios, use cases, user flows before creating wireframes and working on the IA and layout.

Usually, the ideas on the IA and the layout can be discussed within our team, we create sketches with the help of a pencil and a piece of paper and sometimes utilize our blackboard to showcase some ideas.

As a result of this stage, a click-through prototype is created based on the set of wireframes. We upload it to InVision. The client can leave comments there, and we can schedule a call to go through everything. Usually, we need one more iteration to get the wireframes approved.

Sometimes a client can be more involved in the process and might give us some raw sketches on paper to showcase what they mean; thus we make sure that we are on the same page.

UI design

When we start working on the UI, we select 1 or 2 pages from wireframes, and we use them to present our visual design concept to the client. We do not design all the mockups at once because if the client wants something to be changed, it is easier and faster to do with only one or two master pages and then design the other pages or screens keeping the comments in mind. After the general visual style is approved we move on and complete the set of mockups.

Sometimes we can actually design all the mockups for desktop at once and get them approved before moving to the adaptive or responsive version. It usually happens with projects that contain a few simple pages and it doesn’t take much time to design them.

Usually, we present the result of our work with the help of InVision. They have some really cool features like creating hotspots and imitating the work of the future website. When a user clicks on certain areas, they can navigate to other pages or open modal windows or a dropdown. These useful features allow testing the website on users even before moving to the development stage.  

This part itself is the largest part of the website design timeline. As for the tools that can be used by UX / UI designer, we have collected the list of the best tools in one of our previous articles, but in general, we are working with the following set.

Tools of UX UI design stage

  Photoshop            Sketch

  InVision                  Illustrator

After every phase, we discuss the results with the client and get their approval before continuing. We are a UX/UI design agency, so sometimes our work includes only UX/ UI solutions. It may include front-end development part, but it can sometimes be carried out by another team. In such cases we might offer a special stage called “Visual QA”, the main idea behind it is to make sure that UX/UI that will be implemented by developers will be consistent with our mockups.

3. Development

As it is mentioned above, development might not be one of the web design process steps, so we will describe this step only briefly.

Before the actual development process starts, the design team prepares and shares with developers all the designs and graphic assets, the description of the front-end functionality, fonts, logos, SVG's in other words we prepare all the project files that developers need for the successful beginning of their work.

If there are UI animations, we can either send GIF or MOV files created in Flinto or Principle to illustrate the behavior of interactive elements. But sometimes due to some time restrictions, we may provide only a scenario of the UI animation that can be further implemented by developers.