MacBook Mock Up

4 Simple Things To Make Your Personal Website More Aesthetic

The purpose of this article is to highlight some small adjustments you can make to your personal site that will make a huge difference in usability and aesthetics. You don’t need to be an expert web designer or developer to make these changes. I’ve written this article after reviewing 100+ personal websites across the web which were custom built, WordPress, Square Space, etc. sites

1. Standardize your typography

Creating a standard typography for your site will make it easier for your users to recognize if the text on the page represents links/anchor tags, paragraph text, annotations, titles, and navigation links. Setting a standard typography means that the font and style used for paragraphs should be the same on every page of your application. (i.e. All paragraph text will be of font size 16px in Helvetica-Neue font. All text contained within buttons will be uppercase size 14px font.). That being said, all text with the same meaning or function should have the same font and text style.

Here is a simple typography generated via
Type Scale

type-scale

The folks over at Material Design also have a detailed typography scale you can use for reference.

2. Color scheme

For those who want to create a more aesthetically pleasing experience while users navigate your site, it may be worth spending a few minutes to create a matching color scheme for your website. I use often coolors.co to generate color schemes for my website builds.

Screenshot from coolors.co:

coolorsco

After picking a color scheme make sure you’re consistently making sure all your elements of the same function have the same styles. (i.e. All button on your page are green with white text which. Once your user sees this button once they will recognize all other green blobs with white on the page as buttons.)

3. Set max content width

All content on the page should be kept within a certain max with. When is last time you were on a web page on your desktop and your eyes had to move from the left side of the screen all the way to the right side of the screen to read a paragraph?

max-content

All content should be focused in one section so that it’s easier for a user to read.

4. Favicon

For those of you building a personal brand, I think having a favicon on your site will make you look that much more official and serious. Not having a favicon on your web page may make your personal site look incomplete and give the impression that it’s still under construction.

no-favicon

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.