WTF is front-end?
It might be that a web designer designs the look and feel of a site, and a web developer builds it – or one clever designer-developer does the whole lot! Whether it’s the visuals or the code, it’s all front-end!
To make all these interactive things do something smart, we need back-end technology to pull it all together. We’ll get to that in our next post.
More than just a pretty face…
Whether it’s prefixed with “web” or something else – the word “design” is often equated to making things looks pretty. It’s a valid point. It’s hard to deny that good-looking things tend to sell better – but there’s more to design than that.
"Design is about making things work. What’s the problem? How can we fix it or make it better?"
Design doesn’t just start with the visuals – it kicks in long before then. Problems are researched in the discovery stage. Solutions are formed with strategy and wireframing. Design is problem solving.
That’s why the discovery stage is so important. We can analyse a project’s prerequisites, constraints and considerations before we start on the build (which comes with plenty of its own constraints and considerations).
Use the best tool for the job
In our last post, we mentioned the need to integrate the design process in-browser as early as possible. In the design stage, this means avoiding time on static comps (“mockups”). So how does this translate over to the front-end stage?
Comps are static, the web isn’t.
Image editing tools such as Photoshop are good for creative exploration, establishing a visual language, creating and editing graphics. They are not good for demonstrating user experience or interaction. From simple hover states to complex transitions – Photoshop has no in-built solution for articulating the type of interactivity that’s integral to the web.
People don’t just look at websites, they use them - on mobiles, tablets and desktops! Our design process reflects that.
We establish a visual language using Style Tiles, then build upon that language in the browser – merging presentation with function in the most appropriate environment for the task.
The benefits of this approach:
- What you see is what you get! A website lives in the browser, so any other format risks misrepresentation.
- It allows us to make faster iterations to the style of your website.
- Review and use live during the design process – fewer assumptions or guesswork!
- We can test as we go, providing a more efficient testing process.
All this saved time means we can focus on solving the client’s problems in the most efficient way possible. Rather than designing ourselves into a corner, we are able to use budgets effectively to deliver a better, smarter product.
The Design Process
It’s not like Mad Men – not here at least! We don’t all sit around with a cigarette in one hand and a drink in the other, knocking out creation after creation. None of us smoke for a start…
Romantic as we may be about what we create, the design isn’t about us. Design is not art, and designers are not artists. It’s about delivering a message and proposition on behalf of our client – and targeting that message at the right audience!
“We work to solve a client’s problem, not present our own view of the world.”
This is usually a welcome challenge – to be truly objective in the pursuit of a measurable, digital solution! However, in this case it has been a bit more difficult.
Because this one is ours…
Our front-end build pulls together the visual language from our style tile, the structure from our wireframes and the content we’ve collated. Without spoiling the reveal, we’re proud to be pushing boundaries with our new site. It’s all about a smart approach to content and experience, all wrapped up in a responsive design – a standard when working with Tide.
We’re about halfway through now, and it won’t be too long before we can ship it!
We could get super-technical here, but this is the gist of what we’re using to build the front-end of our website:
- HTML5 for the elements on the page.
- CSS3 for styling, compiled from SCSS (with Bourbon).
- Media queries for responsive layouts and behaviour.
- JQuery for some shiny things.
Some other stuff:
- A “minor third” modular scale to inform our typographic hierarchy and spacing.
- Bourbon’s “Neat” grid system for structure.
- Fonts.com to serve up our webfonts.
More from the Live Development series
Stage 1: Start at the beginning with Discovery
Stage 2: Content hierarchy and wireframes
Stage 3: Content collation
Stage 4: Getting started with design
Stage 5: The front-end build
Stage 6: The back-end build