Laptop view, version 2.

Website Design 2

Work for version 2 started in early 2018, with an official launch in late April.

Crossed out different device view, version 1.

The post-mortem

With six months of web development experience under my belt, I knew what coding changes needed to be made. But what design issues were present in version 1?

Header, version 1.

Lack of information

Only three words described me; engineer, developer, designer. Even though a resume link was directly underneath, there still was a lack of overall information about me on the site.

Projects view, version 1.

Lack of signifiers

The images on the homepage gave no clue to the fact they were links to projects, and only changed state when hovered over. This issue was magnified on mobile devices (due to the lack of hover).

Layout issue, version 1.

Layout issues

Version 1 suffered major layout issues, particularly on large screens and on zoom. Vertically resizing the browser also broke the site’s visual structure.

The solution

Different device views, version 2.

So what major changes were made in version 2?

Development changes

Most of the layout issues were solved with a CSS feature called “flexbox” – a layout model that automatically arranged content depending upon screen size. The menu was also changed from a fluid width (20% of the screen size on desktops) to a fixed width, to increase visual consistency.

Version 2 also debuted the use of JavaScript and SVGs on the site. While the latter was used to display menu icons, JavaScript was mainly used to reveal the new hamburger menu options that appeared in mobile versions of the site.

It was also used to keep the copyright dates at the bottom of the page up to date (although later versions used the PHP echo statement).

Introducing JavaScript to the site allowed me to add features that would have been impossible to include otherwise.

Design changes

With the lack of signifiers a major issue, version 2 solved this by giving project images permanent titles – with hovering over these giving a brief summary of the selected project. These images were also presented in greyscale, to provide contrast with the website background.

Project hover states, version 2.
While project summaries were available if the user hovered over an image on desktop devices, this feature was unavailable on tablets and mobiles.

The site menu was also redesigned for easier navigation, with SVG icons being included to make actions more intuitive. It had three main parts; “about me” (complete with a small introductory bio), a “work” section (with links to projects) and a “contact me” section (with social media information).

Articles in the "Website Design" series

Want to read more?