How to Build a portfolio site

Now that you know what to put on the website, it’s time to think about the look of the site. Designing (not developing) the site was the most time consuming task I had to go through. Deciding the theme, colors, typography, images to be used can sometimes be so confusing. I scraped 3 templates that I had built from scratch, each template that took days to develop. But I will still recommend spending as much as time (if you have) you want in designing your portfolio site. Because, design conveys lot more than written words. While researching for the colors to be used, I read it somewhere that “people buy a product because of its color”. Strange but true. Here, I will just detail about the selection of designing elements.

Themes, colors, typography, images all have a hidden physiological effect on the reader.

The Colors You Will Need

While designing the site, you should have at least 4 colors—background, primary, secondary and an accent color. Keep these colors constant throughout all the pages of your site.

Colors

Background Color-The color to your page background

Primary color-The color of your title, menus, logos, hyperlinks, CTA elements

Secondary color-This color should ideally be the complimentary or opposite of your primary color. This color can be used to highlight your currently active menu or hover effects

Accent color-this color is will be a shade of your primary color. This can be used for element borders giving a consistent look to site.

The Fonts You Will Need (Typography)

Typography deals with the selection of right fonts for the right matter. Get yourself familiar with the terms Serif and Sans-Serif. A Serif font has small lines tailing from the edges of the letters.Sans Serif fonts do not have such tailing lines at the edges. Sans is suitable for reading on printed media, Sans Serifs are effective for texts viewing on screen. There are thousands of freely available fonts that can be used on your site. But again, limit the number of fonts you use because too much types of fonts distracts reading.

Fonts to use

Line0 Font-Line0 is the very first line users will read on your site. Chose an attractive font for this text. Don’t reuse this font anywhere on the site except the Line0. Use your primary color for this one.

Heading-the font for the headings of paragraphs

Sub heading-the font for the sub headings of paragraphs

Text-the font for the actual text of your content

The Images

The effect a great image can have on the viewer is unparalleled. Choose the images that suit your working domain and match your color theme. Other things you need to decide about the images are the image theme, square or rounded corners, bordered or no border, color of the images, shadow effects etc.

How to Actually Start Designing

Now that you have selected all the required design elements, it will be the time to actually design the site. But instead of starting to code the design, I suggest to prototype it. Prototyping is the process of creating a representative object of the end product. A lot of professional prototyping tools exists for web developers (for example, Sketch). But even the most simple tools can also come handy while designing the site. Here is how I've designed my site using the most basic tools-

Start Designing

Use MS Paint (!) to see how your chosen colors will actually look

Use MS Word (!) to check if the fonts you have selected match with each other.

Search for images (when using an image from the Internet, make sure it does not have copyright, or verify if you can use it with proper attribution i.e. by giving credit to the original author of the image)

Select the right UI element for the right content

Experiment with your selection. In designing, there’s no formula. Designing is about creativity. Every design is ‘great’ if you like it, ‘bad’ if you don’t. A portfolio site does not require too much of complex processing power at backend but demands an attractive, cool and eye-catching look at the front end so, invest time in designing your site. I spent weeks in deciding the look of my site and scraped 3 designs built from scratch.