DESIGN / ADOBE XD
Part 2: The design
Portfolio website refresh
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
There were a few key things I wanted to do with the website update, and the design needed to incorporate these in:
- 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
The colours used in a website are incredibly important. They are one of the main things that catch your eye when you visit a site. So I decided to consult some experts in the field; my two daughters, Eliza (5) and Elsie (3).
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.
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
I also made sure that the colour contrasts for all elements were AA compliant. There are a number of tools out there that can help with this. ColorShark is a good option as it gives suggestions on what to change colours to when they don’t comply, and also in app colour blindness simulation.
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.
Icons
It’s always nice to keep the icons in the same design language. It’s easy to spot out of place icons, or when they’re being sourced from multiple services.
Iconmonstr
I sourced all the icons from iconmonstr. It provides attribution free icons for your projects, and has a great selection of icons in vector formats.
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
I spent some time battling with the typography on the site. I tried a few font combinations for headings and body text, but ultimately it just felt that the designs were leaning towards having a single font for both.
Google fonts
Google has a great catalogue of free to use fonts, and my go to font for years has been Open Sans. And after trying out a number of different and some very similar fonts, I didn’t feel like moving away from Open Sans for this design.
Full designs
I created full designs for mobile, tablet and desktop. It makes my life so much easier if I know before I code what a thing should look like at different screen sizes.
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
As a heavy user of Sketch, I felt it was a good excuse to try some new UI design software. I initially trialled Figma, which seemed very similar to Sketch, so I felt at home immediately. However, I was underwhelmed by my options to export designs if I ever wanted to move things to Sketch. And there was always a niggle in the back of my head that Adobe XD is pretty much free with most of the features I’d need as an individual.
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?
So now I’m happy with the designs, I’ll be looking to start cutting some code. I’ll most likely be using Gatsby and Netlify for the project, both of which I haven’t used before. I’m eager to get started and to see what I learn along the way!
