Harry East

09.01.2017 CRO, UX, Web Harry East

Designing a New Website for OURSELVES

Mac website design equals creative

Well first up, as an agency that specialises in building websites, it better be good!

Designing a New Website – how to get started!

We started our web project just as we would start any web project, by analysing our requirements to create a specification document.

The usual questions like, what are we trying to achieve from the website, how do we want to be represented online, and what do we want our potential customers to do on the website.

3 simple questions, with 3 supposedly simple answers, but it’s not that easy.

We know from our experience that clients struggle to look from the outside in at their own businesses. It’s often why they get us on board, to help clarify what they need, why they need it and how to best achieve it! And it’s no different for us!

Other objectives included the website being timeless and built in a way that could be built upon! We want to be able to build landing pages, update content and keep our information current as quickly and as efficiently as possible. No one wants to read an out of date website!

We took a very detailed approach from designing the structure to working out the objectives for each page on the site, before coming up with common themes and comparing those against our own business objectives.

Equals creative website design & development

The difficulty with designing a website.

A design is so subjective, but when searching for the right design, you’re looking for perfection and can often be overly self-critical.

We’re like this with most things we design. It’s not very often that you start to design something and find the answer immediately, it’s a very linear process. This in part is why we always set design objectives. These are themes that we can compare our designs against to know if we are meeting the objective or deferring away from it.

Our design objectives:

  • Clean and simple design.
  • Fairly minimal.
  • Clear, concise and well-written content.
  • White space!!!
  • What can I do here and why should I do it here and not anywhere else.
  • An element of “controlled showing off” is required.

The last point may seem obvious, but to clarify:

Our website gives us the opportunity to show off what we can potentially do for our clients. This may include using new technology, clever effects etc. Agencies and web design/development houses often do this on their website, it’s the attitude of “let’s show you what we can do without any rules or guidelines.” But this is often a mistake.

It’s easy to “show off” but it’s difficult to show off whilst keeping a good user experience and not interrupting your customers thought process.

We’ve tried to make a great user experience whilst “showing off” by using micro interactions, small transitions you may not even notice and one area on most pages of the website (that you will notice), an animated SVG graphic.

SVG Graphics

The illustrator on our team, Woody was keen to come up with a style of illustrations that was unique to us. All of the illustrations we have used on the website are custom drawn by Woody. Woody chose an isometric theme. He wanted a challenge of creating graphics that mean something, in 3D on a 2D surface.

Woody started by creating an isometric grid as a base for all of the images. Then he drew the images as he wanted them to be displayed. The complexity then comes from having to draw full elements of graphics sitting behind other graphics so they can animate properly. Effectively if we had a computer on a desk, Woody needed to draw the full components, even if they were covered by another component.

Once woody had completed an SVG document, Dan (Senior Developer) removed and cleaned out unnecessary code from the file. He created utility classes to handle basic animations and their timings. Each grouped element then had these basic animations applied to create a fully animated image.

The beauty is we can now create an animated element for the website using SVG quickly and easily as we have done all the legwork in building a great foundation!

A Team Effort

Every person from our team was involved in building our website. We’ve got a great team of passionate and enthusiastic people but with passion comes disagreement. I won’t lie, there have been a few disagreements, concerns, laughs, fortunately, no tears, but strong opinions about what our new website should look like.

But being passionate about producing something that represents your business is one of the most important things you want from a team. It’s no good being great a doing something but not being invested in it.

We’re a very passionate and enthusiastic bunch!

Soon enough, we all agreed (to disagree) on a way forward, which in part was done by asking a question to each problem that we were faced. Does doing “this” align with our brand message, “turning users into lifelong customers” and our goals and objectives for the website. If it did, it got a big green tick, if it didn’t a big red cross!

The Result

After months of designs, development, blood sweat and tears (nearly) and fitting it in with our other work commitments we had a site ready for launch.

And here it is! Ta da!

We’re so pleased with our new site. We’ve shown it to a few friendly faces (who would tell us if it was rubbish) and we’ve been delighted with the feedback we’ve received.

We’re sure the site is going to give us a great start to 2017 and a good foundation for further growth throughout the year.

We hope you liked it too!

Equals Creative Website Design on Mac

Browse our Digital Marketing Services

Web DesignWeb DevelopmentSEOPPCSocial MediaDigital StrategyBrandingUX Consultancy