In addition to our reputation for clean and sturdy code, Oursky is known for our thorough design process that produces products such as Cococolor and Artstack. In this post, we’re annotating  our internal web design guideline document for you to use.

We’ve refined this process of the years and going on our ‘don’t repeat yourself’ rule, we’d love to share our process transparently with you. These web design best practices are applicable for client and in-house products. Below, we’ll show you the web design for Skygear‘s sign up web portal (try our BaaS for free!).  to show you how we do things in-house.

Things to know beforehand:

Tools of Choice: Adobe Illustrator and Sketch

This post is our web design deliverables and process for clients. This means we’ve taken our usual checklist and added an example of the things we create.

This design work is done before development starts using information gathered from the user stories we collect from potential clients. The format of the stories can vary, but generally we have a product summary sentence and the things users want to do (i.e. sentences such as “Create an account with my mobile number.”) so various aspects of design will not be finalised until around the kick-off meeting with development (such as typeface, logos, button customisation).

Below you can copy our guideline below and adapt it for your own team and clients!

Our Work Flow

We count in working days. The process identified below means 10-20 working days, which translates to 1-2 months assuming we also get client feedback immediately.

Sitemap [1-3 days]

skygear open-sourced wireframe

Our working user flow for Skygear, our open-sourced BaaS tool

  • Synthesize the product specs.
  • Conceptualise the main pages for a website.

Our process usually begins analogue because we have rooms and whiteboards that we can brainstorm with. After the initial drawings, we create an initial map using some stock blocks.

Tools of Choice: Adobe Illustrator (US$29.99/mo)Sketch (US$99) / Google Draw (Free)

Basic Wireframe [1-5 days]

Oursky Sample Wireframe

Sample App Oursky Wireframe

  • Draft the sections and components in the sitemap.
  • Each page should have a clear and consistent layout.
  • Pay special attention to spacing.
  • Figure out site navigation.

For us, the basic wireframe still starts clean. We use greyscale in order to focus on the key components in the design and navigation to discuss with the client. Instead, we pay extra attention to detail for laying out the flow in a clean, but understandable way (note the aligned panels, and that arrows are coloured to help guide the eye. We prove our design competence early on by paying attention to details such as arrow placement and alignment.

Tools of Choice: Sketch (US$99)

Style and Art Direction [1-5 days]

Skygear Identity Logos Images UI

Skygear’s completed img folder – a collection to work towards

  • Present the wireframe concept to the client.
  • Clearly define the Style and Art Direction with Client.

If you think you know colour, think again. We spend a lot of time thinking about what ideas we want to convey with colours and ensuring they are are cohesive with our buttons, icons, and other assets.

Prepare beforehand:

  • Colour palettes
  • Images that suit the style previously discussed with the client

Tools of Choice: Adobe Illustrator (US$29.99/month) / “sketches on paper” / Sketch (US$99)

Website Mockups [1-2 weeks]

Skygear Opensource Dev portal UI Mockup

Developer portal high-fidelity UI mockups

  • Based on art direction decisions with the client.
  • Take wireframe and design site mockups

With the colour palettes mostly defined, we put them to test with our mockups. Not all mockups need to be high fidelity, so pick your battles. You want to convey the user flow in a self-explanatory way to the client while saving time. Even if you charge per day, best practice is to finish as early as possible, save the client from unnecessary spenditure, and have them return in the future.

Files to be generated:

  • Icons (square, long, black and white, etc.)
  • Colour palettes

Tools of Choice: Sketch (US$99), Adobe Photoshop (US$29.99/month), Adobe Illustrator (US$29.99/month)

UI elements and states [1-2 days]

Skygear UI Design Style Guide

Best way to ensure design consistency is to build an interactive style guide site.

  • Button States
  • Forms
  • Depending on navigation complexity, an animated demo or a basic clickable prototype may be suitable.

The devil is in the details. For inspiration, many free UI elements kits are available now. They’re a great place to start, but if you want to stand out as a development team, you need to put your own stamp on the product. At Oursky, we usually do our designs and mockups in-house (i.e. we don’t take kits and templates) even though we always look at new portfolios and content. For inspiration, you can check the plugin Muz.li.

Tools of Choice: Sketch (US$99)Invision (Free)

Kick off meeting with Dev [1 Hr]

Alejandro Escamilla Unsplash

Photo cc Alejandro Escamilla via Unsplash

The final stage is to present the design to the development team after receiving client approval, which should be quite smooth since we involve or clients throughout the process.

Tools of Choice: Sketch (US$99) + Sketch Plugin “Measure

Things to discuss include: Website flow / UI states / Any outstanding items

 

The files we provided for this post are from our open-source BaaS service, Skygear.io, which you can try for free!

If you find this post interesting, subscribe to our newsletter to get notified about our future posts!