Going behind the scenes

So you've been on my website, had a good look around and your stomach isn't turning inside out and your eyes haven't fallen off, as that wouldn't be very good at all. Hopefully, you like it so much that you would like to know about some of the processes and tools I used behind the scenes to develop this website. If that person is you then you're in for treat as that is exactly what this two-part series is about, so let's get right to it.

Research

Before I started coding my website, I had to do a bit of sniffing around the web to see what website portfolios were currently out there and to give me any inspiration on how I could make my website unique from the rest. Similar to a competitor analysis in a way. I came across some beautiful websites such as eanhalpin.io, riccardozanutta.com and indiantypefoundry.com.

All of these sites had their own unique style, so I began to look at areas of each site I liked that I could potentially add to my website. So for example, on the Indian Type Foundry website I found the way they created the grid line effect on certain sections of the website to be very appealing. This is something I liked as it kind of gives the user a brief behind the scenes look into the structure of the website and how it follows a kind of grid system, which is something you don't normally see on other websites.

After searching through a handful of these websites, I created a mood board that contained screenshots of all the sections of these websites that I liked. By creating this mood board it helped give me some early design ideas and prepared me for the design process.

Design

The design process of my website was quite tricky as being a typical web developer, I wanted to get right in and start coding my website. However, I had to be a bit more professional so I took a little step back and began to look at some design processes in order to come up with a solid design and layout for my website.

Style guide

I started off by creating a style guide, which is simply a set of design rules that I would follow when designing my website such as what font types to use, what the colour scheme of my website will be, what icons I will use etc. There are many templates that you can use for free if, like me, you aren't comfortable creating your own. The template I ended up using was a HTML and CSS coded style guide from Cody House, which was super easy to customise to my needs. I have published my style guide online so feel free to take a look.

Style guide of Alex's website showcasing the website colors, favicons and the logo.
Final style guide of my wesbite

Wireframes

With the style guide in place I moved on to creating a wireframe to get a solid idea of what the structure and layout of my website will look like. Because I can't draw to save my life, I decided to create a more visual wireframe than just using pencil and paper. I used an application on my MacBook called Sketch which is an amazing design application. Sketch is packed with features such as creating artboards for different device sizes, being able to preview your work on your devices in real-time, share you work online and more. I used this application to create a mobile and desktop wireframe for the homepage of my website.

Initial mobile and desktop wireframes of Alex's website with a pink, white, light grey and dark grey color scheme.
Initial mobile and desktop wireframes

After creating my initial wireframes, I decided to look closely at the colour scheme I chose. My reasoning for this is that one of my aims was to make my website as accessible as I could make it and choosing which colours to use is vital to achieving this because I needed to make sure I had a good contrast of colours to make it easier for people who have visual disabilities to read the text on my website. Using the WebAIM colour contrast checker, I found my core brand colour (pink) performed poorly and wasn't suitable. To find a better colour, I visted a website called colorsafe.co which generates accessible color palettes based on the WCAG Guidelines. With the help of the colorsafe.io website I changed my core brand colour to blue, with a hint of purple, which performed much better on the WebAim colour contrast checker.

Final mobile and desktop wireframes of Alex's website with a bluey purple, white, light grey and dark grey color scheme.
Final mobile and desktop wireframes

Adding uniqueness

To make my website unique I focused on the navigation for mobile devices. I wanted to make a navigation that wasn't hidden from the user, clearly visible and easy to navigate. I came up with the idea of having a navigation that was fixed at the bottom of the screen with text and icons. Kind of like a navigation you find on an iOS app and some android apps. The reason I went with this design is that a lot of people are using smartphones. According to an article from smartinsights.com, 80% of internet users own a smartphone. I wanted to keep that mobile kind of feel that users experience when using mobile apps and having a bottom navigation makes it comfortable for users to reach the navigation items with one thumb interactions. A great article from uxplanet.org explains more on the importance of bottom navigation for mobile apps.

Mobile navigation on Alex's website showcasing icons as well as text.
Mobile navigation with icons and text

To be continued

That brings an end to part one of this post. Hopefully you have soaked up some good information about my research and design process and are now eager to know the processes I took to build my website. In part two, I will discuss the tools I used such as Gulp and Sass and discuss the workflow I created that made building and deploying my website seamless and painless. I will also talk a bit about which browsers my website supports. For those who are really eager, you can take a look at my repo on GitHub and see my workflow in action.


Bibliography

  • Dave Chaffey. (2016). Mobile Marketing Statistics compilation. [ONLINE] [Accessed 13 November 2016]. URL: Smart Insights
  • Nick Babich. (2016). UX Design for Mobile: Bottom Navigation. [ONLINE] [Accessed 30 September 2016]. URL: Ux Planet