UI/UX Web Design
DESIGN THAT IS MORE THAN SKIN DEEP
It’s got to look good. That’s a given. And yet, we all know looking good is only skin deep. If it looks good but somehow, still feels ‘wrong’ then it won’t engage your users or encourage them to come back. The steps below are methods that we’ve honed over many years to help us explore, discover and collaborate with our clients throughout the process – effectively crafting each project into a unique and engaging digital experience.
WIREFRAMES & PROTOTYPING
Each step in our process helps us to focus and hone in more closely on a user’s experience. In the IA we’re essentially establishing orientation and signposting an in wireframing we start to look more closely at the elements that a user will see on the screen itself: content, navigation, calls to action, interactive features etc.
We use this process to identify content and feature priorities:
- What does a visitor need to see first?
- What do we know about this user?
- If we know they’re an existing customer and they’re on a location aware mobile device, what content or feature would they find most useful?
Wireframes are the documents that we output from this process, they’re essentially static (or interactive) sketches that demonstrate the content, features and navigation a page will have. They also become the blueprint for designers, developers, content writers, animators and SEO teams to all have a say and understand what a specific page needs to do and what they need to do to bring it into reality.
ONLINE BRAND DEVELOPMENT
Whilst we’re perfectly comfortable developing brands from the outset, we’re often asked to work with already well-established brands.
Whilst corporate brand guidelines serve their purpose, it’s rare to find them providing any real insight into how a brand might transition or thrive in the digital realm.
We start where many brand guidelines finish – where we explore how a brand might look and feel when experienced in a digital environment – how should logos adapt to smartwatch screens? How should this appear in social feeds? What should audiences expect or feel when they interact with this brand on a smartphone, tablet or TV?
We explore all these issues and more in our brand development phase – from technical implementations to the more emotional and visual impacts that a brand can convey online.
STYLE TILES & MOOD BOARDS
Mood boards enable our designers to interpret a broad creative brief and explore the visual look, feel and character of a brand or site before we delve into the page mock up process.
Mood boards are a great way to start the creative process; they’re collaborative, they invite conversation and are inclusive.
Style tiles are also a very useful tool, similar to mood boards but more often used when a design brief is more specific but where aspects of a site’s look and feel still need to be efficiently explored and defined before page mock ups are started. Here we use a tighter set of templates and page elements to help refine the most appropriate design direction.
UI DESIGN
Page mock ups are essentially the result of all that we’ve already discussed, designed and deliberated on. By combining selected wireframes, draft content, and mood boards or style tiles, we develop a small set of page mock ups to further refine the project’s persona, look and feel. There really shouldn’t be any big surprises by this stage; all key stakeholders should already be on board having been involved in each key step that went before.
Nevertheless, like any good recipe, there are still many ways to interpret the same ingredients. This is where the art of our designers come to the fore, helping us to really nail that all important design.