Rebranding ComputerMinds - Part 3: Website design

Now that we had settled on the branding and had established and planned exactly what we needed to create, I could start looking at designing the new website.

I wanted a clean, spacious site with a modern look and feel. I always keep a close eye on changing design trends and it was important that for our site I was careful to design something that would age well.

Over the years, Photoshop was my go-to software choice when designing, but after becoming increasingly frustrated by slow workflow I recently switched to using Sketch for larger projects. Sketch uses a modular, symbol based design where elements are quickly and easily reused. This makes edits super easy - changing the design of a button would change it everywhere it is used, not allowing inconsistencies to creep in.

Document setup involved ensuring some useful plugins were installed, then creating a new document with the standard Sketch template ‘Web Design’. This template gives you three pages to get going - one for assets (symbols), one for a style guide and one for the actual designs. Pages in Sketch are basically just canvasses but having these three allows easy navigation and quick workflow. An adjustment to the layout settings to ensure we had the correct size grid and we could almost get going.

The last thing I did was to, in the style guide page, create some simple shapes of all the colours from the branding guidelines that I created previously. I then created styles with these colours. This way, the colours would be consistent and if they ever changed it was easy to change them in one place, and not every item that used them.

Starting with the desktop header (as a symbol so it could be reused on each page), I immediately threw in the compact logo, without the word ‘ComputerMinds’. This was following on from an earlier decision to move away from the company name being so prominent. The address bar would always show the name anyway. After years of always seeing company logos on the left of the header, I wanted to move away from this. The recent rebrand of The Guardian saw a move away from this too, the new logo firmly positioned on the right of the header. Now, we had something most didn’t, a symmetrical logo. This meant we could have a symmetrical header by placing the logo in the middle.

Next up came the footer, also a reusable symbol. As we weren’t using the company name in the header this was a perfect opportunity to use a larger logo. Keeping it clean, I added the compact logo, contact information, social links, 2 menus and legal information, meeting requirements.

Once the the header and footer of a site are designed it really begins to look like a website. Before I could design any other page elements I needed to design something that would also be seen on almost every page - buttons. And with buttons come form elements. I've seen a recent trend with buttons with square corners and with either block colours or simple line borders. For our site I wanted something a little different so added a subtle shadow and simple movement on hover.

As with many of our recent development projects, we wanted to use tiles. This would allow us to create pages using tiles as building blocks, which is exactly what we’ll need for most pages. So these were designed next. As mentioned earlier, I wanted to create a more engaging experience for users by encouraging more visual content. With this in mind I created a collection of tile designs that incorporated large images and video and used the full width of the screen, bleeding off of the grid. These also used consistent, large headings and body text.

As well as visually engaging tiles, it was also necessary to create tiles to communicate through text alone. Using the colour palette created in the branding phase, I designed tile types that would allow variation visually through background colours, leaving the text to be communicated clearly. It’s also worth noting the prominence given to headings. Purposefully large to work well with whitespace, the headings make it absolutely clear what the visitor is reading.

During the designing of the tiles, I was also always thinking of the pages the site would have to be sure that the tiles were designed with the likely content in mind. Creating each tile type as a symbol in Sketch allowed me to quickly create page designs for multiple pages and adjust styles centrally.

In addition to these pages, we also required designs for pages that would not be made using tiles. A big part of our site and one we’re proud of is our many articles. Starting with a single article page I wanted to design a page that focussed the viewer on the content, without distraction. To achieve this I created white space either side of the content, narrowing the page and focussing the viewer (you're locked in right now, aren't you!). I also incorporated a title tile to display the article title clearly and created a header and footer for the article with all information the viewer might expect. These title tiles are also used on most pages of the site, making it absolutely clear which page you are on and adding further consistency. 

So the design was now complete. We had headers, footers, tiles, form elements, headings, body and more in all screen sizes. Such as the way we operate at ComputerMinds, this was all subject to adjustment as the project grows and more people get involved the requirements may change. As I said before, this is not a problem when using Sketch with the reusable elements.

Next up, we were to try something new - creating the front end using a pattern lab!