161 Followers
·
Follow

DESIGN / ADOBE XD

Part 2: The design

Portfolio website refresh

Image for post
Image for post

Following on from the rather rash decision to redo my personal website (you can find part 1 here), I wanted to talk through the designs I have pulled together. I’ll outline the requirements for the design, discuss the decisions I made along the way, and highlight any tools that I used to help me.

Spoiler alert, the design is above in a cliché responsive mockup.

Requirements

  • Single page: I just don’t feel that the site is going to be comprehensive enough to have multiple pages. It would be far more efficient for both me and any visitors to have everything on one page.
  • Light and dark mode: The site should work and be accessible in both light and dark modes, and include a toggle for users to switch the theme.
  • Blog: My blog currently lives on Medium, so I want to be able to highlight some of my key stories, and link out for users to be able to see all my posts.
  • Contact form: I wanted a very basic contact form to give anyone who wanted to get in touch an easy way to do so.
  • Low cost: This is just a personal website, so I didn’t want to be paying for icons, stock images or fonts.

Other than that, it needs to have an outline of who I am, what I do, and a picture that would hopefully make me look more approachable than I am in real life.

Colour

Elsie shot first with pink. Eliza, who in any normal situation would have said pink, chose purple. I expect to make it clear she didn’t agree with Elsie on anything.

Image for post
Image for post

I wanted to have a primary colour that really popped throughout the design, both in light and dark mode. The purple and pink allowed for that, so the rest of the pallette was targetted at text colours, and backgrounds.

Accessible

It highlighted the fact that when putting white text on top of the pink it was not compliant unless I bumped the text size to 18. I needed to keep the pink as it was for the bulk of the site due to the contrast between the different background colours, and it didn’t fit in with the rest of the design to change the button text size to 18. I was therefore able to take the suggestion from ColorShark for the button colour in dark mode.

Image for post
Image for post

Icons

Iconmonstr

Image for post
Image for post

The icons will be one of the main uses of the primary colour throughout, and will be used to break up the whites and greys of the text and content.

Typography

Google fonts

Image for post
Image for post

Full designs

Below I’ve attached the desktop dark and light designs.

The designs will of course be subject to change when I go to code, and don’t look too much into the content!

Dark mode

Light mode

Experience of Adobe XD

My first hurdle with XD, was to learn the new keyboard shortcuts, and once learnt, to stop using the Sketch shortcuts that are a now a part of me. There were also some other key differences, like how the masked layer goes above the content it masks (not below it), but I wasn’t looking for an Adobe version of Sketch, so this was all fine.

I was running it on a 2015 MacBook Pro, and for my money, it seemed a lot smoother and the performance was better for me when compared to similar projects in Sketch.

There were a number of minor annoyances I encountered. For example, how you could preview your designs on an iPhone/iPad anywhere (great!), but that the fonts aren’t embedded, so your designs don’t like how you designed them (not so great). There were a few things like this, that just left me feeling that on the whole the software isn’t there yet.

In summary, I’d still heavily advocate for using Sketch in a business environment, but for personal ad hoc projects — considering that it’s free to use — Adobe XD will be my go to in future.

What’s next?

Written by

Front end developer who likes to design. Lover of technology, 80’s music and Dominic Toretto.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store