In a research post earlier on in this project, I looked into UI kits and how they can be useful when designing a website to create consistency within all the interactive elements of the website.
Following the research I'd undertaken on buttons and other UI elements, I created this kit in illustrator, developing all the different states for the UI elements which would be used on the website. Similar to an identity guidelines, but more of an active guide which can be sampled from – for quicker, more efficient web design.
You can see the button which has been applied, in line with the grid, on the about section of the website. When rolled over by the users cursor, the button highlights with the CC-Orange colour, stated in the brand guidelines. Which you can see below – doing so shows the user that the button is clickable.
The menu section, as pictured above, used a half and half layout, taking inspiration from the Engage Prague website layout. One half being dominated by an image, to break up the content, and the other allowing space for the menu's and the relevant surrounding information. All of which has been aligned to a grid system.
The grid system uses 22px gutters throughout, and for larger spaces, double gutters are added to break up the content, using 44px, as seen here, separating the title from the contact form.
Adding a map section to the website, often sourced from google maps. I replicated the copyright notices from google map onto the map section to make it seem more real. Also simulating the restrictions. So I know not to put any content in that area. As you can see in the bottom right of the map below.
The contact form has been added, as it's a monetary asset of any business website. It allows the customer to contact the owner easily. Unlike the wireframe, the section has been split in two, condensing the contact form to half a page, rather than the full page. Allowing room for the social media links and other contact information, in the form of copy.
To assure accurate spacing through all the elements of the contact form and other elements of the UI. Place holder shapes have been used. These particular ones are to assure all the type in the form are consistent in terms of spacing – 11px width, which has half the width of the gutter, to add a sense of geometric proportion to the form.
Leave your comment