Website Design 2
Work for version 2 started in early 2018, with an official launch in late April.
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?
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.
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).
Version 1 suffered major layout issues, particularly on large screens and on zoom. Vertically resizing the browser also broke the site’s visual structure.
So what major changes were made in version 2?
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.
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).
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.
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
- Previous site designs
- Website Design 1: The First One
- Website Design 2: The One That Fixed The First One
- Website Design 3: The One That Moved To A CMS
- Website Design 4: The One That Did User Research
- Website Design 5: The One That Defined The Article Reading Experience
- Website Design 6: The One That Got Showcased By Fixing The UI