Tag: redesign2020

Design process: Picking a frontend framework

Web framework

Front end frameworks first appeared on my radar in about 2016. They made so much sense. Why start coding from scratch every time? Why not build an approach of best practice, accessible, semantic, browser compatible code that covers common elements like the grid, typography and interactive elements like buttons and forms.

Bootstrap wasn’t the first but it was definitely the breakout from the group.

Developed in house at Twitter, Bootstrap was made available for free as an open source project. Very quickly Bootstrap was marginalised in the web development community because it was abused and often used as the defacto style of a website or application when this was never the intention.

The other main go to framework that I use is Foundation by Zurb. This was around before Bootstrap but came on my radar because it was stripped back somewhat but also a more fully fledged approach because it also included email and app versions.

It’s good to know both but even better to specialise in one. They evolve through versions and the markup changes so as a developer, you need to keep up with the pace.

Check these frameworks out on their websites where they have a wealth of documentation to help learn them but more importantly they help you learn proper, semantic coding.

Where does this fit in my redesign project?

The next step in the redesign project is to lay out the sketch designs in raw, unstyled HTML based on a framework.

Take a look at these two images. One is a design from Sketch of the target layout. The other is the raw layout based on the Zurb Foundation framework.

The next post will outline the process to create the layout and then slowly align the various elements to match the Sketch design.

Desig process: Using Foundation locally

Dowload Foundation

Websites need to work on a web server so when you want to develop locally, you need to mimic the live environment on your machine.

I use MAMP to do this and it’s available for both Mac and Windows. It’s super easy to install and then you get all the benefits of a live environment with an Apache web server and PHP support.

For now though, it’s just going to be used primitively as a server to display an HTML version of the new website.

Design process: Picking a font

Picking a font

When I select fonts for projects I tend to use Google Fonts. The collection is free to use, available to download and works across the web.

Gone are the days that websites could only use system fonts that come with computers. OK, in 2020, email is still an issue but pick a similar fallback and go forth with your edgy font selections.

Design process: Selecting colours

When creating a new look and feel for anything, the necessary building blocks will be difficult at first.

How are they going to all blend together to create the brand you desire.

As time progresses and you have the fundamentals in place, it becomes easier and easier.

So, where to start? I tend to start with the colour palette. You can’t really feel a design in black and white, so colour is integral.

Documenting my redesign

AJ Smallwood website 2017

After 14 years, I’ve finally closed my Ltd company, Coast Design. Along the way, I’ve learned to do so much but very rarely do I get the chance to document my learning or even demonstrate it on a project of my own.

Recently I’ve passed many of my clients onto various contacts who I know can take on the different elements of web design and digital marketing.