In the last chapter of Photography Portfolio Website Starter Guide, I have gone through various geeky stuffs such as web design softwares and platforms. Make sure to check it out if you missed it. After you chose the appropriate to create your site, you may need to learn some fundamental principles of design in case you have none experience in graphic designs. These guidelines will help your site stand out from the crowd.
Less is more.
– Ludwig Mies van der Rohe
The above quote from the famous German architect Ludwig Mies van der Rohe perfectly sums up what minimalism is all about. Excessive decors on your site could be annoying and distracting to your visitors. In most cases, visitors usually visit a portfolio site with a specific purpose. For instance, they may want to see your works or contact you through your website. If your website is flooded with irrelevant contents and decorations, people could just get lost on your site. They may also lost their interests on you and your works if they cannot navigate to the page they intend to visit. In addition, it is also important for you to grab visitors’ attentions within a matter of seconds. Therefore, I strongly recommend the approach of minimalistic design.
A portfolio website that adopt the approach of minimalistic design. (Courtesy: Gregoire Vella)
This approach emphasises clean and sleek design where only necessary elements are kept. Keep your contents simple. Use simple and short sentences. For instance, add a concise heading for the About Me page like ‘I shoot photographs, I design websites.’ instead of ‘I’m an experienced photographer who specialises in blah blah blah.’ You may add all the detailed bio below the heading. But it is a must to keep your heading as catchy and simple as possible. Apple is an exemplary example in this aspect. They always have a well-polished heading for the iPhone, MacBook and other product pages. Those headings compel audiences to scroll further for the details of their products. It works in the same way on portfolio websites.
The compelling heading on a product page of Apple official site. (Courtesy: Apple.com)
Besides, you should replace texts with graphics whenever possible. ‘A picture is worth a thousand words.’ If you arrange your graphics appropriately, your audiences are more likely to grasp the contents promptly. You may then add short and concise texts next to the corresponding illustrations to provide supplementary explanations. The following screenshot shows an example from my website. This page is about a photography workshop. When you see the three illustrations, you will know this part covers the details of the workshop such as venue, number of people and the price of the workshop. If I had put all the information in plain text, people would have probably ignored the clumsy texts and leave my site.
An example from my website. (chris-yiu.com)
Layout is the way you arrange the contents within a page. While designing the layout of a page, we have to strike a balance between aesthetic and usability. The following are some of the prevailing trend of layout in 2015 and 2016. The trend is unlikely to fade away soon.
2a. Modular (Grid) Layout
Modular layout has been widely used in recent years. The user interface of Windows Phone and the layout of Pinterest are some of the typical examples. This type of minimalistic layout is perfect for displaying large amount of contents and encourage people to stay on your site for longer as every grid is basically clickable. Usually, each grid only displays a relevant picture and the title of the page that the grid is linking to. Therefore, you will be able to show various ideas on a page in a neat way as only minimal texts are put grids. In addition, grid layout is also good for demonstrating your photographs as it allows you to show the thumbnails of your pictures.
A website with grid layout. (Courtesy: Yvan Rodic)
2b. Long Scroll Layout
Frame layout has became history due to its poor user-friendliness. Long scroll layout becomes one of the dominant website layout since then. Nobody complains about this layout due to its resemblance with the layout on mobile devices. We will place all the navigation stuffs and important information on the top of the page with a height of, say, 1080px which is a common height of a full HD monitor with a hero image in the back. A hero image usually fills the background of a page and it brings great visual impact to visitors. Then, you may place a catchy title or tagline on the hero image.
A page with a hero image. (Courtesy: Mikko Lagerstedt)
The part below the hero image is used for displaying the contents of your site. They can be your works, experiences or maybe your clients. Usually the contents are displayed in rows. One row for one type of content. Rows are distinguished with different colors. For example, red for the part below the hero image, followed by white, light gray and dark gray for the footer of the page. Please see the following screenshot.
Dividing rows with colors. (chris-yiu.com)
In the next chapter, we will continue the discussion on the principles and trend of web design on the aspect like flat design, use of fonts and colors.