[UI/UX] Design Decisions behind this website.
Category: [Non-Professional] Website Design, UX
​
Project authors: Mahir Amer
Tools/Skills used: Human-centered Design, Typography, Research, Information Architecture, Graphic Design, Interaction Design, Adobe Illustrator, Wix Studio, Canva
​
Sections: Market Research | Information Architecture | Font | Typography | Layout & Spacing | Some Quirks
​
​
The story: It's common for people to put up their work on a website so that hiring managers are able to get a better, more introspective look into their applicants.
​
This means putting a lot of effort into conveying a message - one that you wish will separate you from the rest of the herd, show your attention to detail, and highlight you as a designer. But wait. If that sounds like a design project, that's because it is. So why not treat the ideas that went into this website as a case study in and of itself? When you think about it, it makes you wonder why more and more people don't showcase one of the more gruelling projects in their portfolio - the portfolio itself.
​
The Problem: Recruiters who have a lot of applications, but not a lot of time.
​
The aim: To showcase my interdisciplinary interests efficiently and make recruiters' interactions with my website as pleasant as possible.
​
To put this project in context, I need to first understand who my audience is, what I am trying to say, and how my 'competitors' have said it.
​
​
​
​
Market Research
​
I do not know recruiters/hiring managers personally, and hence, most of my findings are from people who have broken into the UI/UX community or even reviewed other portfolios themselves. Here are the takeaways:
​
​
​
-
Takeaway 1: Keep it simple. Recruiters have minutes to scroll. Avoid elaborate animations especially if they take longer to load.
​
-
Takeaway 2: Don't follow veteran portfolios. Veterans are already established and their portfolios are more toward admirers/fans of their work.
​
-
Takeaway 3: Recruiters like to see your work, but they're interested in how you think....and learn new things.
​
-
Takeaway 4: Recruiters assess portfolios on laptops/desktops, but might share them via mobile. Make sure the mobile version is presentable.
​
-
Takeaway 5: Simple navigation. "Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other." - Doherty Threshold | Laws of UX
​
-
Takeaway 6: 2 people to think about A recruiter and a hiring manager/team lead. A recruiter will determine baseline qualifications; a hiring manager might take more time to read. Make sure your website provides depth when needed.
Information Architecture
To understand how the information should be laid out, let's get back to Takeaway 6 which suggests that I am catering to the needs of 2 personas: a recruiter and a hiring manager.
Persona 1: Recruiter
-
Interested in an overview of skillset.
-
Unlikely to read through projects.
-
Likely to read descriptions/tags.
-
Needs to be able to find contact info quickly.
Persona 2: Hiring Manager
-
Interested in particular attributes.
-
Likely to read through projects.
​​
Image 1: Information Architecture catered towards fast navigation based on the specific needs of each persona. Recruiters can get a quick overview using featured projects, whereas hiring managers can take a deeper dive into an individual project.
Font: Inter
​
Most text on this website is written using Inter. I wanted to look within the Sans-Serif space because the Serif embellishments manifest themselves in a messy way in large paragraphs. Since this website should highlight my writing, it ought to be clean in bulk.
I also believe design should be more than just eye candy and good design should be “read and studied” rather than “seen and admired” which inspires simplicity. I really liked Apple's San Francisco font, but it requires licensing. Inter looks similar and is rated highly within the UI/UX community due to its x-height, legibility and consistency.
​
Know Thyself....
​
As designers, we emphasize understanding clients (and rightfully so). However, designers undervalue understanding themselves. We have to be aware of our own inclinations. I can, if allowed, spend 5 hours choosing the right wallpaper for my phone. A good wallpaper (or good font, in this case) is super important, don’t get me wrong. However, spending a disproportionate amount of time on one detail means paying less attention to potentially more useful aspects such as usability. Besides, familiarity is a useful aspect of UX, so why not choose a tried-and-tested font family for my website?
​
Oh, and also, for occasional use, I wanted a more decorative font that complimented Inter and for that, I chose Monotype Bakersvillle.
Typography
​
With the font now selected, we move on to conveying emphasis using a combination of font sizes, styles, weights, colours, and, on rare occasions, a different font altogether.
​
​
​
This is a Title/Heading, 64px
This is a Sub-title/Sub-heading, 32px
This is an interesting point or quote, 32px
This is a paragraph, 20px
This is a brief summary, 16px
This is a (slightly grey) caption, 16px
​
​
​
​
-
The minimum size of the font is 16px.
Most displays today have a width and a height that is a multiple of 8. Choosing a font that is a multiple of 8, therefore, ensures that the font fits snugly into whichever display you are viewing this website on and is rendered properly. ​
​
-
The font sizes progress geometrically.
I used a geometric progression in accordance with Weber's law, which suggests that if the font sizes changed linearly, you wouldn't notice the differences very much. Headings have to be starkly different from paragraphs and a geometric progression helps achieve that in a manner that is consistent.
Image 2: Linear vs. Geometric progression of font size. Notice how the geometric progression grows faster and therefore offers a better guide for choosing fonts that convey more emphasis. Each next step is noticeably different in the geometric progression, unlike in the linear progression where they are hard to discern unless placed right next to each other.
I did make an exception to my own rules, however, when I chose the font size for paragraphs to be 20, simply because 16px is too small for long-form text, and 24px, the next multiple of 8, is too big. May the UI/UX gods forgive me!
Other font-related design choices:
​
Almost everything is left-aligned:
I tried to place elements where the eye expects them to start. This ruled out centre-aligned and right-aligned. A justified alignment stretches the font beyond how it was designed, and it ends up looking boxy and over-corrected- a no-no! ​
Moreover, the left-aligned text is more in line with our F-reading patterns.
​
Font Spacing is done with reference from 'Accessibility for Teams' guidelines (accessibility.digital.gov) :​
This means paragraphs have a line spacing of 1.7, and everything else has one of 1.4. This resource was also immensely helpful in determining the typographical hierarchy.
Image 3: F-shaped reading pattern seen by Eye-tracking heat-map by ​Nielsen Norman Group.
Layout & Spacing
​
Since this website will be home to content of different types - images, articles, captions etc. I wanted to use a simple layout system that offers enough order to keep me - the designer - sane and also provides enough flexibility for it to be a pleasant experience for the viewer. For all these reasons and more, I took my inspiration for the layout from Swiss-style posters and the Swiss grid. Of course, the 8pt rule still applies, which is to say that the grid, and buffers in between are all spaced at some multiple of 8. Even spacings between an image and text, or an image and a caption is a multiple of 8.
​
My layout rules have been broken here and there, though.
This box is 112 px wide. It separates text from images.
References:
The following resources were crucial in informing my design choices.
​
This is 64 px wide. It separates captions from images.
Image 3: The gridlines for the layout for this website, as used on the 'Writing' page.
Some (interesting..?) Quirks:
​
Articles on the Writing page go Sepia :
When you click an article you want to read on the Writing page, the background gradually turns reddish-brown. This is to soothe the eyes and allow you to read at length.
​
Proportional Article descriptions :
The Dark Knight Rises article I wrote has about 5x as many words as the article about Sketching; its description is also about 5x as big! I did this to provide a potential recruiter with proportional information. To read a longer article will take more of your time so you should have a better idea of whether it is worth your while.
​
White Space :
As you can tell from browsing there's plenty of white space on this website. This is done to 1. allow for some visual breathing room, and 2. to put more emphasis on what's important in the middle of the screen.​
​
It also forces me to think and write concisely, since I have less space.
​
Canon in D​, Website Music :
You may have noticed the play button on the menu. It plays a very beautiful rendition of Canon in D by Johann Pachelbel. If you haven't noticed it, here it is:
​
​
​
It is an unusual feature to have on a website, but orchestrating a good experience includes considering as many of our senses as possible. I hope it soothes you like it has soothes me. I chose to learn the violin primarily to one day play this beautiful piece.
​
Don't worry, Canon in D was produced before copyright laws were invented and therefore is exempt from its requirements.
​
Grit & Grace :
The footnote of this website states "Grit and Grace." In an interview Irish actor Liam Neeson said those are words he would like to be remembered by. I found them beautiful and powerful. They are values to live by, and I, too, would​ like to be remembered by them.
G & G
"I think subconsciously people are remarkably discerning. I think that they can sense care."
- Jony Ive
​
And that is precisely what I wanted to achieve with my website. It's simple on the surface, and most people will be unaware of the idea behind some of the design choices but I want the user to come and feel cared for, as though someone had spared a thought.
References:
-
Crash Course: UI Design. A recap of my design workshop… | by Jeff Wang | HH Design | Medium