project phi fullsite

Summary

On this project I was asked by the client to help with branding and home-page design. The brief was to create a modern and stylish home-page for a new financial services site. To create a suitable brand image, I discussed the client’s business goals with them. And from there, I was able to design and build a prototype page suited to their business. The page is only a prototype to demonstrate how it looks. It will be fully implemented into a web platform at a later date.

Logo Design

Before I could begin designing the home-page, I had to help brand the business. I started with the logo and brand colours so I could use these as a starting point for the rest of the design. I did some market research on other financial services and keyword analysis using Google Adwords. This helped me decide on some suitable brand names and colour schemes. I discussed these with the client and we agreed on a name and colour scheme. Once this was done, I got to work creating logo designs in Xd and after several iterations, a logo was also agreed upon.

project phi font combos
Font Combinations

To complete the branding for the page, I created a short-list of font combinations and names to title the two visitor sections of the site. After discussing different combinations, we agreed on one that suited client’s vision.

project phi designs2
Wireframes

My designs were based on the content that the client was planning to include. However, they went through several integrations following client feedback on the design features and further market research.

Additionally, the images were also finalised during this process since they were contributing significantly to the overall design. In the end, the final version of the wireframe design required a change in the colour scheme and slight alterations to the logo. This was to create a more modern, minimal design, which was much more in-line with the client’s vision and customer base.

project phi site bootstrap only
Bootstrap Layout

The prototype home-page was built using Dreamweaver and exists as static files for now (since it will be integrated in platform later). This allows me the flexibility to easily migrate the home-page when needed. The page consists of mainly html and css built around a Bootstrap grid for a full responsive layout. Fonts, images and icons are loaded as local files but may be changed to a remote CDN source for better performance.

project phi no creative
Custom Search Box

One of the more notable features of the design, is the search box. This uses css to display a custom placeholder label instead of the default placeholder attribute. The custom label is used to load an icon as a font file, which is not possible using the placeholder attribute on the FORM INPPUT tag . The custom label sits on top of the input box and uses css to disappear once the user click into the box. This results in the custom label behaving identically to the placeholder attribute, but is able to have more interesting design.

Animations / Effects

  • -Link hover effects
  • -Button click
  • -Custom input placeholder label

Resources