Photography Portfolio Website Starter Guide

Rating: 0 based on 0 Ratings
  By Chris Yiu
Photography Portfolio Website Starter Guide www.sleeklens.com

If you are considering turning photography into a business, or you simply want to show your works to the public, you may need a portfolio website to gain publicity. Potential clients are more likely to collaborate with photographers with a serious website rather than those who only have a Facebook fan page. Therefore, if you are taking photography seriously, you should really start a portfolio site if you haven’t yet.

Choosing the Right Platform/Software

Undoubtedly, knowledge in coding and SEO does give your site a boost. But, thanks to the advanced technology, expertise in HTML, CSS, and all those messy codes is no longer a prerequisite for people to create a decent-looking website. You can get started even if you are a complete newbie to web design. In the following paragraphs, I will go through different platforms and software and you will see which one suits you the most.

Are you a newbie of web design and development?

If you know nothing about web design, you may consider those online website makers. You will get your site ready right away if you have prepared all the contents to be put on your site beforehand. These online website makers do not require any web development experience of the user. The user-friendly drag-and-drop user interface allows the user to create a decent website with ease. Don’t worry even if you are not a graduate of School of Design, there are tons of attractive templates to choose from. You may customize the template you have chosen or leave the layout untouched in case you are not familiar with design stuff.

Wix is one of the online website makers that enables you to create a web page within minutes. There are various readily usable templates available. You don’t need to bother with all the design work if you are not into it. Undoubtedly, there is no such a thing as a free lunch. Although you don’t need to pay a penny to start a website with Wix, their free subscription plan does include ads and you have to purchase their one of their premium plans in order to remove the unwanted ads.

There are tons of high-quality templates available on Wix.

Are you a graphic designer with basic knowledge of web development?

Apart from being a photographer, if you are also an experienced graphic designer or UI/UX designer, you’d probably want a greater flexibility over the layout of your website. Yet, you are not the HTML guy or CSS guy and coding plagues you a lot. If that’s the case, you may want to check out Adobe Muse. Adobe Muse is a WYSIWYG web design software and it is relatively new compared to other famous web developing software. The UI of Adobe Muse is very similar to the one of InDesign. Therefore, you will pick up the basics of Muse if you know InDesign. The user-friendly drag-and-drop interface allows you to create pages with relative ease. It supports master page function which resembles the one in InDesign. There are also copious plug-ins available on the official site of Adobe, which is designed to enrich the functions of your website such as reservation system, contact form or even merge a blog to your site. You can also add fancy loading and transition animation with those plug-ins. However, self-hosting of the blog is currently impossible with Muse unless you have subscribed to Adobe’s Business Catalyst plan. In other words, Muse is capable of constructing static website but not the dynamic one. You may purchase Adobe Muse by monthly subscription, which is the same as Photoshop.

The UI of Adobe Muse CC 2014.

Are you going to construct a personal website with an online shop and other dynamic stuff?

If that’s the case, you may consider WordPress.org (not to be confused with WordPress.com). WordPress.com is a free blogging service but you only have limited control over your site, whereas WordPress.org is a free Content Management System (CMS) which enables you to have full control on your site, but you will have to find a web hosting service and purchase a domain name by yourself. With a CMS, you can modify or update your site easily and manage it like a blog. There are also numerous professional templates and plug-ins available in WordPress. Unlike the aforementioned platform and software, you will need to do some configuration works after you downloaded WordPress onto your computer. According to their statistics, there are around 26% of websites around the world which are powered by WordPress. You may give it a shot if your personal website is not merely a portfolio site and you want to include an online shop, booking system, self-hosted blog and all those dynamic stuff.

Courtesy: tw.wordpress.org

Thanks to technology advancement, starting a portfolio website is no longer a pain in the neck. If you do not want to bother about coding, you may check out those online website makers such as Wix or the intuitive website design software Adobe Muse. If you want to build a relatively large-scale website with tons of dynamic elements such as online shop, you may want to try WordPress.

Principles and Trend of Design

Less is more.

– Ludwig Mies van der Rohe

Minimalistic Design

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

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.

Principles and Trend of Design

Flat Design vs Skeuomorphism

Flat design is not a new design philosophy. It is believed to be originated in Swiss design, which demonstrates a strong focus on order and clarity. However, flat design has only become an unstoppable trend since the release of Windows Phone operation system. The user interface of Windows Phone is minimalistic and… ‘flat’. All the unnecessary gradients and bevel are removed from the buttons, background and other parts of the UI. Since the adoption of metro style by Microsoft, other popular brands such as Apple and Google also redesigned iOS and Android respectively with flat design.

A website created with the style of flat design. (Courtesy: trefectamobility.com)

On the other hand, skeuomorphism was once a dominant philosophy of graphic design. Skeuomorphism is defined as the following:

This obscure word describes the way designs often borrow a particular feature from the past, even when the functional need for it is gone. Examples include pre-recorded shutter noises on smartphones to remind us of film cameras, or calendar apps that feature torn paper and metal rings.

– Sacha Greif

In other words, skeuomorphism aims at imitating the reality. It was meant to be intuitive to users. One of the typical examples is the little floppy disk icon in many software which represents saving files. But, floppy disks are no longer available in the market. Younger users may not be able to relate the floppy disk icon with its function. This is one of the major problems of skeuomorphism.

An iPad app with the leather-like user interface, which is a form of skeuomorphism. (Courtesy: Sacha Greif)

Flat design rises and replaces skeuomorphism due to various reasons. Firstly, websites designed with flat elements load blazingly fast compared to the traditional ones. It is because the elements in a website with flat design are often lightweight and it enables web browsers to render the page faster. Secondly, the minimalistic big buttons in flat design are favorable for mobile browsing. Thirdly, flat design is more compatible with responsive web design. Responsive web design is a relatively new technique that enables a web page to rearrange its own layout to suit the size of the browser. To sum up, flat design is the combination of minimalism and aesthetic.

Font

Choices of typeface do play an important role in web design. Before we move on, we will have to know some basics of the typeface. There are two main types of font, which are namely serif and sans-serif font. Serif font is the one with a serif at the end of a stroke and vice-versa for sans-serif fonts. ‘Sans’ is a French word which means ‘without’. You should know why those without serifs on the strokes are called sans-serif. The following is a guide on how to choose the right typefaces for your website.

A comparison between serif and sans-serif typefaces. (Courtesy: limcomputerart.weebly.com)

Firstly, serif fonts usually look elegant and traditional while sans-serif fonts give a sense of stylishness and modernity. You may actually combine the two fonts and it usually does the trick. For instance, assign a serif typeface to the heading of the page while using a sans-serif font for the content. Never attempt to put two similar fonts together. Audiences may find the typefaces inconsistent. Don’t forget to assign different weights to the texts for better distinguishment between important and supplementary texts. You may also want to combine fonts of similar time eras. Although it is fun to combine fonts within a page, never use more than 2 to 3 typefaces. They will mess up your website catastrophically.

The importance of font weight. (Courtesy: colorlib.com)

Thanks for reading. Good luck with your website!

Rating: 0 based on 0 Ratings
The following two tabs change content below.
I am a freelance photographer who specializes in architectural, landscapes,streets and fine art photography. I have been learning photography for nearly 5 years. I am currently collaborating with some HK-based photography sites such as DCFever.com and FotoBeginner.

Comments (2)

  1. Olivia Green Social Verified Buyer
     

    Great article, Chris.
    Wix is indeed a great website builder, but not particularly for photographers. There are some decent gallery themes available, but the major features that a photographer needs like proofing and e-commerce seem to be missing.
    Have shifted to Pixpa instead, and it has been one of the best decisions for my photography business. With clean intuitive themes, I’ve integrated a store with digital prints within the website. They also allow you to control the SEO attributes of individual content items including images. A little work on SEO and you enter into a completely new market of organic customers.

  2. Jonian Noxha Social Verified Buyer
     

    Hello, Chris!
    As for me your article is fantastic cause im working as photographer on freelance too! For another people like me and you i can suggest to use Wix, IM Creator, ZenFolio and some other from my list list cause those free website builders have more
    capabilities then WordPress and much easier in use.