This is PART 2 of a 3 part blog series. If you haven’t read the first part, you can click here to do just that.

The design process in Hyper Arrow starts with the kick-off meeting. Like you’ve already read the kick-off meeting happens in-house between the members of our team, and often we’re joined by the client. This meeting represents an opportunity for us to work through all the details about the project and about the client and their business.

My part in this meeting is to ask as many questions as I can in order to get the information I need as a designer to be able to continue moving the project forward.

PRO TIP: You can create a little set of questions you usually need to ask your clients about and use that as a guide in your meetings. The goal here is to understand more about the business of the client, the way they make money, the industry they are in, their core values and mission.

Also it’s very important that by this point the client transfers all the required assets for us to be able to work on their website. The assets vary from project to project, but they usually consists of the client’s logo and all their branding stuff, quality photos they want or they need to be used in the website and the copy (text) they believe it’s important to be shown on the website like product descriptions, company’s story, mission, contact information etc…

After all of this comes the second part of the discovery process which consists of doing a detailed research on the client, the competition, the project and the industry itself. It’s important for us to be able to understand well the position our clients have in the market in order to provide much better solution for them.

With enough information in our disposal we continue to creating (designing) the concept for the website. Depending on the project this process itself can vary. Often times if the project requires more thought process in order to get through the complexity of it, we create wireframes for our initial ideas.

The wireframes helps us in many ways, first they’re quick and easy to create which gives us a lot of room for experimenting and trying out different ideas. Second, they can be very expressive and helps us deliver (present) our ideas and approach to our clients better. If the project is much smaller and not so complex, we can skip the wireframing and continue directly to creating Draft 01 of our designs.

In the first draft of the design, usually we work with several ideas of how to solve our clients needs. We work with the information gathered in the previous discovery process, and put together a nice structure for the website with several different versions of how to present it.

In this stage there are two main things we want to achieve:

Create the main look and feel of the website Create the main structure of all the pages and components we’ll need After we’re done creating several ideas for our Draft 01, we present our approach for the solution to the client. We guide them through our thought process and help them understand the structure for their new website. In this stage, the most important thing for us is getting that initial feedback from the client about the offered solutions. Together with the client we decide if we’re on the right track on things and how to continue moving forward.

Working on the next drafts of the design is a little bit more delicate – we need to polish different things, add and create all of the content, work with the client’s assets and also create assets if needed. In some of the projects, there’s a need to create custom illustrations or icons to present the message better.

Working with stock photography is also very common in our website creation process. The challenge with using stock photography is finding the right photo with the optimal quality and price. More often than not, we use photos with Creative Common licence from generous authors. There are great resources for this today – one site that’s always on my bookmarks is http://unsplash.com – a great community of photographers sharing their work with you for personal or commercial use.

As you can tell, photography is a big part of the website design process, so beside stock photos to emphasize a message, using our client’s original photography is a must for some projects.

Draft 02 is also where we work with the typography questions. Choosing the right fonts, experimenting with kerning, letter spacing, font sizes, contrast…It’s very important to create the right visual hierarchy and try to direct the user’s attention to the right things first.

One thing you should understand is that website design is all about capturing the user’s attention with the client’s unique story, and trying to engage the user to make the required action.

After polishing all of these things and making several more iterations of the design ideas, we present Draft 02 to the client. Again, we guide them through our thought process and get as much feedback from them as we can. This time it’s very important to focus all our attention on one idea and “lock down” the main structure, pages and major components to be able to continue forward. Usually in this phase clients can see visuals for the whole website and they can easily give their feedback on every page and component on the website.

Next is iterating and working through the details. Designing details comes last in our design process. It’s what I like to call as polishing the design. Details are very important and even if it sounds like a cliché it’s true that they can make or break a design. So, we take our time working on all those small details – microinteractions, small animations, paddings, margins, white space etc…..

After everything is polished, we present the final designs to the clients and get their approval or work through several more iterations until we get that approval.

Then we move to assets preparation for development. It’s important to prepare all assets including photos, illustrations, icons, SVGs etc. for development and hand over the designs.

Working closely with development is also important to ensure proper implementation and optimization of the designs

It’s good to mention the tools we use for our website design process – we’re using the Adobe Creative Cloud package. We’re long time Adobe user’s and we utilize the whole software package they offer in their CC subscription. Photoshop and Illustrator are our main tools of the trade, but lately we’re experimenting also with the new Adobe Experience Design or Adobe XD software. It’s a great tool for creating digital products and prototypes, and even if it’s still in beta version, there are a lot of great features already that helps improve our whole process.

After handing over the designs for development, Boris our lead developer takes over the job. You can read about the development process in Hyper Arrow in the next and last part of this blog post series.