Stuart Williams | Freelance Senior UI & UX Designer | CRO Consultant

[ut_header style=”pt-style-2″ title_color=”#252525″ css=”.vc_custom_1520510186039{padding-top: 0px !important;}” title=”Hi Mum! Said Dad – Concept”]Agency re-design concept[/ut_header][ut_portfolio_details style=”inline” values=”%5B%7B%22title%22%3A%22SERVICES%3A%22%2C%22description%22%3A%22UX%2C%20UI%20Design%22%7D%2C%7B%22title%22%3A%22YEAR%3A%22%2C%22description%22%3A%222016%22%7D%2C%7B%22title%22%3A%22VISIT%3A%22%2C%22description%22%3A%22himumsaiddad.com%22%2C%22is_link%22%3A%22true%22%2C%22link%22%3A%22url%3Ahttps%253A%252F%252Fwww.himumsaiddad.com%252F%7C%7C%7C%22%7D%5D”]

Layout & Flow

In my early days of UI and UX, I re-designed London agency Hi Mum! Said Dad’s website as a concept to present during the interview process. To explore potential designs I sketched out multiple ideas for layouts, flow and basic copy for the site.

[ut_image_gallery thumbnail_size=”full” gallery=”4071″]

Competitor Research

The brief was to explore their studio aesthetic and translate this across digitally, making sure it optimised well for all devices. Imagery such as their neon logo mark in their office captivated me as a potential artistic direction, especially against the exposed brick wall. Therefore I explored further into how competitor agencies apply branding to main website.

[ut_image_gallery thumbnail_size=”full” gallery=”4072″]

Key Client Case Studies

I considered potential layouts for case studies, from list and grid views to highlight their key client work. Strong image areas and clear links into the separate projects was also an important consideration.

[ut_image_gallery thumbnail_size=”full” gap=”20″ gallery=”4074,4073″]

Final Designs

Final user interface designs were created in response to the wireframing stage above. Applying a full width design throughout for the case studies and hero area, with elements floating above in a parallax transition.

[ut_image_gallery thumbnail_size=”full” gap=”20″ gallery=”4070,4076″]
[ut_social_share_bar border=”true” share_text=”SHARE:” icon_color=”#222222″]