The front-end build

In our last post, we spoke about design. Now that we have our style tile and our carefully curated content, we can start building! We start with the front-end…

WTF is front-end?

The front-end of a website is the part that you see and interact with – from form (colour, typography, imagery) to function (buttons, dropdowns, navigation). It’s usually built using technologies like HTML, CSS and Javascript.

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 Site

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!

Some detail…

We could get super-technical here, but this is the gist of what we’re using to build the front-end of our website:

The code:

  • 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.

The software:

  • Hammer to compile our build.
  • Coda for code editing.
  • SVN for versioning.

Some other stuff:

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