For this article, we selected 55 design studios and web development studios, analyzed their portfolio sites and identified popular patterns of designs for such sites. The main purpose of this study was to provide freelancers and design studios with useful guidelines for creating their own portfolio.
We brainstormed the most important design-related questions and asked designers from around the world what decisions they should most often make when creating designs for a portfolio site. We also asked the designers to tell us exactly which questions they would like to see analyzed in this article. As a result, we got a list of 40 questions relating to the design of the site portfolio, which we grouped by importance. And, in the end, we were looking for a good combination of design studios and beautiful sites of small and large agencies.
Next, we created a list of these 40 questions and walked through them for each of the sites of selected design studios, making notes for ourselves on each of them. In general, this study took 75 hours.
This article presents the preliminary results of our study of website designs portfolio. Below we will discuss the visual design, structure, layout and navigation of portfolio sites. We also reviewed the details of each section of such sites, such as “About Us”, “Customers”, “Services”, “Portfolio”, “Contacts”. Of course, you are not required to follow all the tips in this article. Instead, simply use these tips to identify something of your own that can be used in your designs, which is distinctive and easy to remember.
')
1. Light design against Dark.
The main question to be answered when creating a portfolio site is to create a visually attractive dark website (which means using large and bold fonts and bright colors) or a soft and light website (a website with a simple structure and light typography).
Surprisingly, according to the results of our research:
- 82% of portfolio sites have a light design with natural and soothing colors. The backgrounds of these sites are light shades of gray and yellow and not pure white (for example, Happycog , SimpleBits , 80/20 and Concentric Studio ).
- 29% of portfolio sites have very vivid, bright colors (for example, 45royale , Hicksdesign , Duoh , Frexy and Odopod ).
- Dark sites are much more likely to have more typography (for example, Adaptd , OrderedList , Carsonified , Blue_Flavor , SidebarCreative, and pod1 ).
2. How many columns?
Interestingly, many of the portfolio sites vary in the number of columns between sections of the site. The “Clients” and “About Us” pages usually have 2 columns, while the main page has from three to four columns that show important information in a compact form. In fact, we noticed that pages get more and more columns: every sixth portfolio site that we saw had at least one page with four columns.
According to our research, some websites risk experimenting with non-standard designs or navigation using JavaScript or other methods of original layouts. Most of the portfolio sites have traditional block page layouts, with two or three clearly separated columns and a simple and convenient navigation menu.
carrot creative has an original layout from a single page using javascript navigation, which is unusual and memorable, but not necessarily intuitive.
Also, most portfolio sites consist of many detailed pages, with relatively deep subsections. Minimalist one-page portfolio sites are also rare. Of the sites that we investigated, only 5.4% had a simple and minimalistic design (and more specifically
Neutron Creations ,
Fish Marketing and
80/20 ).
3. Introduction block at the top?
Portfolio sites usually have a large introductory block in the header of the page, which contains a brief friendly description of the services provided and the advantages that the client will have if he uses their services. The block, as a rule, contains colorful images and large typography. He conveys both the image of the entire company and all of its employees, making it equally professional and friendly. Such blocks are usually located immediately below the logo, on the first page.
According to our research, 79% of portfolio sites have an introductory block at the top of the site, in some form. We also noticed that some of the sites discard the introductory blocks in favor of showing their latest work (for example,
concentric studio ,
HUGE inc. And
Wishingline ). On such sites, a small “About Us” link is placed on some other place on the page, usually at the bottom of the page.
Site
45royale Inc. has a friendly intro text on the main page. He reports that this site is owned by a company that is located in Georgia (Georgia) and that creates light, unique and user-friendly websites and web applications.
4. Alignment layout.
In the 90s, layouts were traditionally left-aligned with either a vertical menu on the left side or a horizontal menu in the header. This has changed with the increasing use of monitors with a wide resolution. More and more designers create their designs, aligning the layout in the center so that the gaps around the edges balance it. We noticed a tendency towards a more original right alignment at the beginning of the year, but in this study we no longer found a site with a right aligned portfolio.
According to our research,
- there are no right-aligned layouts,
- 89% of site layouts are centered,
- the rest have either original adaptable layouts ( Method and Carrot Creative ), bright background images that fill the free space on the page (for example, Duoh ) or simply empty spaces left as is (for example, Ideo , maybe.for.you and Area17 ) - of course you will see this free space if you have a higher resolution monitor.
5. Alignment of the navigation unit.
Where in the layout to put the main navigation block on the site? The question is non-trivial and often leads to disputes between designers. Surprisingly, our research has shown that the majority of website designers in a portfolio place the main navigation block in the upper right corner of the layout. Actually:
- 80% of portfolio sites have a large horizontal navigation menu,
- 51% have a horizontal navigation menu with right-aligned items (for example, Concentric Studio , Mark Boulton Design ).
- 16.4% have a horizontal navigation menu with left justified items (for example, Squared Eye , Adaptd , BarbarianGroup ),
- 11% have a horizontal navigation menu on the entire width of the page with large interactive elements (for example, buffalo , SimpleBits ).
Vertical navigation is rarely used and other approaches (for example, horizontal navigation at the bottom of the page) can be seen on non-traditional layouts, although rarely.
Site
Area17 has a layout and navigation aligned to the left. Each of the navigation elements is a rather large interactive element.
6. Design a search query input field.
While many portfolio sites are rather small and provide users with only some information about the services provided and about the company, some portfolio sites are quite voluminous and represent various topical studies, contain a blog and detailed information about each of their large projects. In general, if a site contains a lot of information, the site search function can be useful for site users. As it turned out, very few companies integrate the search function into their portfolio sites.
- 89% of the portfolio sites that we studied did not have a search function,
- Only 11% of the sites had a search query field, usually a simple field. Most of the owners of such portfolio sites have their own blog, which they regularly update (for example, pod1 , OmniTI , fortysevenmedia , Ideo , Viget ).
7. Flash elements.
Flash, which is a technique for rich interactive designs, seems to be losing its popularity among web designers, at least among those that create portfolio sites. The reason probably is that some Flash effects can be replaced by advanced JavaScript methods that are often available in popular JavaScript libraries as user-friendly modules.
Slideshows, animation effects, and transition effects can now be created using JavaScript solutions that are easy, fast, and simpler. Rich Flash animations and video effects are replaced by simpler JavaScript techniques. Although Flash is sometimes used, for example, to dynamically change text.
The
BKWLD site is one of several portfolio sites in our research that use heavy Flash files throughout the site.
In our study, only 3.7% of all portfolio sites used a large number of Flash animations and components (in particular,
Lift Interactive ,
Bkwld, and others, but mainly for slideshows and presentations). It is likely that this is due to the fact that we did not include in our list of studies those web studios that create interactive websites, Flash design studios or video production studios.
8. Where to put contact information?
One of the important goals of our study was to understand how designers convey contact information in general. Should customers click on the “Contact us” button in order to contact the design studio? Or are the contact details placed on the topmost visible place on the page? Or maybe designers prefer to put contact information at the bottom, in the place where most users expect to see it?
The sites that we analyzed put contact information in almost all areas of the page: in the header, on the left side, on the right side, at the bottom of the page, even in the middle. But we also noticed some interesting patterns. Please note we were interested in the following:
- where is the link to the “Contact us” page,
- where the contact information is actually located.
It turns out that:
- only 12.7% of portfolio sites have a phone number in the header of the page (for example, Things That Are Brown , Headscape , Clearleft and Concentric Studio ),
- only 9.1% of sites have an email address in the header of the site (for example, buffalo , Kyan media ),
- the mailing address is usually not specified anywhere (54.5%), either indicated at the bottom of the site (40%), or indicated in the header (5.4%),
- The “Contact” link is usually located in the upper right corner (71%) and / or at the bottom of the site (45.4%),
- the wording “Contact” (59.7%) and “Contact us” (21%) are the most popular for links to pages with contact information.
9. Page “About us”.
The “About Us” page on portfolio sites is used to present team members, explain studio philosophy and to prove company experience and professionalism. This page gives the studio a personal touch and, if created in a proper way, inspires the confidence of potential customers.
The “About Us” page on
Weightshift.com shows group members and talks about them.
The “About Us” page is mandatory for most portfolio sites: 89% of the reviewed portfolio sites had links to the “About Us” page in the main navigation menu (exceptions are
31three ,
Huge Inc and others).
The level of detail you use to represent your studio is up to you. 59.1% of the portfolio sites that we studied did not have additional pages and offered visitors a brief and compact overview. Photos of team members, their personal data and information about the development process is very often found on such pages. The overall tone of the text is usually informal, friendly, and sometimes even funny. The most popular formulations of links to the “About Us” page are “About” (43.6%), “About us” (27.3%) and “Who we are” (7.2%).
10. List of customers.
One of the clear signs of professionalism and a good reputation in the industry is a solid list of clients your company has worked with. Of course, the more powerful the customers on the list, the more likely that potential customers will pay attention to your studio. Our experience has shown that potential customers always look at the customer list, research and reviews when they are looking for a design studio. Therefore, we were surprised to find only a few studios that had a separate page with a list of their clients.
The list of customer information on the Squared Eye site contains information about all customers with whom the company has worked. With such names on the list as the Gates Foundation, the United States Institute for Peace, Fox Broadcasting Company and the United States Postal Service, the company seems trustworthy.
Of all the portfolio sites that we analyzed, only 47.2% have a list of customers (either as a separate page or located on the main page). In most cases, clients are presented in the form of their logos, which lead to separate pages for each client, containing a detailed description of the work done, as well as feedback from the client. The most popular link formulations for such pages are “Our clients” (46.1%), “Clients” (39.6%) or “Client list” (15.4%).
11. List of services page.
Given the fact that visitors usually come to such sites for the search for services, it is advisable to create a separate page or section on the main page called “Services”. Potential customers usually have a fairly good understanding of what they are looking for (dynamic design, print design, web design, CD / DVD cover design, etc.). Based on this, it would be a good idea to show on the site a list of services provided.
The services page on the
Singalfeuer site
provides a very brief summary of the services offered. Icons and small illustrations are used for good effect.
67.2% of the portfolio sites that we studied have a separate page with a list of services. The rest put this information on the “About Us” page or on the main page. The “Services” pages sometimes have additional pages (31.5%), but in most cases a single page is quite large and detailed.
Linking your portfolio page with a service page is certainly a good idea, because it connects theory with practice and shows clients what your studio is really capable of. The most popular formulations for links to the “Services” page are “Services” or “Our Services” (75.7%), followed by “What we do” (10.8%).
12. Portfolio page.
Obviously, potential customers want to see what a design studio is capable of. Does it fit their style? What aesthetics does it adhere to for visual design, typography and convenience? Do their designs look intuitive and nice? These are the questions that potential customers want to hear the answers when they are interested in any design studio. Based on this, a solid presentation of previous work can convince the client to contact the design studio.
Case Studies Huge Inc : An example of one dozen fairly detailed case studies.
In general, be selective when choosing works to show in your portfolio and give visitors the opportunity to select and filter projects by style, industry, and time. Also provide some information on the project, or even provide a detailed case study, customer reviews and submit a workflow. Unfortunately, very few studios have done it.
Judging by the results of our research:
- 7.2% of sites have no portfolio at all,
- 12.7% of sites show only screenshots and logos, without any information,
- 16.4% of sites briefly present projects near the logo and / or screenshots,
- 63.6% have very detailed individual pages for each of the projects done, including case studies, reviews, slideshows with project screenshots, drawings and sketches (for example, Bright Creative , Weightshift , Huge Inc. , Happy Cog , 45royale ).
- Surprisingly, the most popular formulations of links to a portfolio are “Work” or “Our work” (47.2%), then “Portfolio” (27.2%).
13. Workflow page.
In fact, the workflow page is best created as an additional page for the “About Us” page. However, some designers want to present their workflow in more detail. While 74.5% of portfolio sites do not have a workflow page at all, other sites for this purpose have fairly voluminous pages, where they represent the entire development process, so that potential customers know what both parties can expect.
45royale website
workflow page : the company explains what their workflow consists of and how customers will take part in the design process.
Of course, a good idea to explain to potential customers how they will be involved in the design process. The most popular formulations of links to this page are “How we work” or “Work with us” (42.8%), “Process” or “Our process” (35.7%) and “Approach” (7.1%).
14. The page with contact information.
If everything goes well and your portfolio deserves the interest of visitors, then the contact information page will be their final destination. Do your best to make the process of communication with you as easy as possible. Make sure that the client can provide all the necessary information through the web form. You can also provide your customers with your phone number, email address and postal address, the more the better. Providing information on how to get to you, buttons on profiles in social networks, virtual business cards are also good ideas.
The
OmniTI studio contact information
page has information on how to reach them, the office address, personal contact information, virtual business cards, phone numbers and information on business hours. It also gives information on whether the office is currently closed or not. This is an example of a good contact page.
According to our research:
- 9% of sites do not have a separate page with contact information (instead, they show contact information at the bottom of each page),
- information on how to reach them (often with an interactive Google map) is on 45.4% of sites (!),
- 83.6% show the phone number and email address on the page with contact information,
- 76.7% show the mailing address on the page with contact information,
- 69% of studio sites have a web form to contact them,
- 14.5% offer virtual business cards for download, usually located next to an email address,
- Links to profiles in social networks such as Facebook, Twitter and LinkedIn are also frequent (14.5%).
15. Special functions and additions.
We also noticed several distinctive design elements that design studios offer their potential customers.
One popular approach is to provide some kind of project request form or proposal that potential customers will have to fill in with the basic details of their project (for example:
Mark Boulton Design ,
stuff and nonsense ,
45royale ,
Duoh and
Clearleft ).
Also, some design studios offer a tool for planning projects (for example,
buffalo ,
Happy Cog and
45royale ) or help clients determine the price of a project (such as OnWired (http://onwired.com/contact/)) or more detailed price guidelines. (as is done on
BlueFlavor ).
Buffalo Studio's online project planner (http://planner.builtbybuffalo.com/) guides users through convenient forms for creating technical specifications, making the process of filling out fields easy and preventing mistakes or providing insufficient information.
Other interesting things we noticed were chat windows on the contact page (for example,
Agami Creative ), “Stress Meter”, which shows whether the studio has free resources or not (for example,
Bright Creative ), project price calculator and presentation “Opportunities and Skills” (usually in PDF format).
16. Other finds.
We also found that:
- none of the portfolio sites has a frequently asked questions (FAQ) section,
- 76.3% of portfolio sites have at least one blog. And many portfolio sites have two or more blogs,
- 14.55% have a mailing function (for example, bkwld , area17 , buffalo , Viget and 45royale ),
- 9% provide a detailed sitemap (for example, Ideo , OmniTI , pod1 , Erskine Design and Wishing Line ).
Results
- 82% of the sites that we analyzed have a light design, with natural and soothing colors,
- 79% have traditional block layouts, with two or three clearly separated columns and a simple, conveniently located navigation menu,
- 79% have some kind of introductory block at the top of the site,
- in 89% of sites layout is centered,
- 80% have a horizontal navigation menu with right-aligned items,
- 89% do not have a search function,
- only 3.7% use heavy Flash components throughout the site,
- The link to the contact information page is located in the upper right corner in 71% of cases, and / or at the bottom of the site in 45.4% of cases,
- 89% have the “About Us” link in the main navigation menu,
- only 47.2% have a page with information about the company's customers,
- 67.2% have a separate page with a list of services provided,
- 63.6% have separate pages for each of the implemented projects, which contain case studies, customer reviews, slideshows with screenshots, drawings and sketches,
- 74.5% of sites do not have a workflow presentation page,
- The contact information page should contain information on how to get to the studio office, telephone number, email address, postal address, virtual business cards and an online form of communication.