Vatsa Heera

Website UI Design and Front-End Development - Aero Precision

Created 100% responsive website using HTML, CSS, PHP and JS for
Aero Precision Industries's website



Introduction to Aero Precision Industries

Aero Precision was founded in 1993 as Aero Precision Industries (API). Aero Precision is a component distributor and custom solution provider for several military aircraft world-wide.
Over a course of 25 years the company was bought and sold serval times and never had a branding of its own. Recently, it was bought by an investment company which did not want to get involved in the functions and processes. This gave us an opportunity to build its brand image.



Goals and Objectives

Old design. Navigation-bar button style is obsolete.
Too many buttons and links all over the page.
A lot of irrelevant information. Simplify the navigation by creating hierarchy of information.

Old website interface



Competitive research

IPT – Non-responsive; Poor color choice; Looks very busy with textures

S-3 International – Non-responsive; Header is too big

MHD Rockland – Responsive; Clean; Very poor font and color choice

Derco – Responsive; Clean design; Copyright 2015, meaning has not been updated in a while

Kellstrom Defense – Non-responsive; Busy home page; Lack of hierarchy of information; Copyright 2016, meaning has not been updated in a while


Design Research and Notes

  • Expandable design – Web-page is divided into rows which can be added, deleted easily to accomodate extra information
  • Summarize content – save time (Press Releases, etc.), large font size, less content
  • Content comes first
  • Banner blindness – abandon carousel images
  • Well selected photos help visitors to pay more attention
  • Negative space – leave the negative space alone
  • Know your audience – 60-yr olds make twice as many mistakes as 20-yr olds
  • Responsive Design
  • Flexible design – Allows content addition, deletion with changing the layout
  • Can be changed in to 2, 3, … n column grid easily
  • Footer with all web-page links for straight-forward navigation
  • Add social media icons
  • Brochure thumbnails – will also have content first


Sketches, Initial Vision and Design Notes

Creating Wireframe and blocking the website layout