Single Page Websites
Single page websites have become an evolving trend with recent strengthening within the design community. The format sounds simple at first but with strong design concepts and clever execution, a single page website can stand out more strongly than the more complex, multi-page alternative. If the content is focused and organized properly, a single page design can draw the viewer in and engage them without overpowering their attention spans. There are several uses for a single-page design and I am going to review sitepoint.com’s “15 Creative Single Page Web Designs” article published on September 3rd, 2013 with my own critique of the successful and less successful aspects.
Davide Baratta is an Italian Graphic and Web Designer who used the single-page design to present his portfolio online. The site has a strong use of white space throughout with a simple and subtle texture as the background image. Most of the text is a charcoal grey with a single instance or using orange to highlight his profession.
The start of the page has a large hero image that alternates at a pretty fast pace with several examples of Baratta’s work. In the upper right corner, there is a horizontal navigation featuring the 3 primary sections of his site: the home, portfolio and contact information. The page is in Italian, but much of his imagery makes the page easy to interpret.
Below the hero image, is a quick “about me” section including a bar graph on the right that represents his strengths in the Adobe Creative Suite. Below that he has a tiled grid portfolio. The images are all interactive and can be clicked for larger versions. Finally, the page closes with the “contact” text input fields.
The overall page is short but well designed to contain most any information a prospective employer would need. It is highly organized and smart about what it contains and what it leaves out. It is an interesting combination of minimalism and thoroughness.
As the site says in its first sentence, “Reverend Danger” is a digital design agency that specializes in interactivity. The page contains no background image and is primarily presented in hues of blue. There are several block-styled characters that are unique in their style, but also come off as a little confusing. Some characters are clear to interpret what they are while others are harder to clearly identify what they are or what is supposed to be happening.
The navigation of the site is difficult as it is long with no apparent links to jump to an important section you may be interested in. You are basically “along for the ride” and are forced to scroll down throughout the entire body which seems to be approximately 30% of actual content as opposed to “visual stylings and humor”.
The site seems to alternate with quirky humorous content and actual important information that a potential client may be looking for. Even when they are presenting information, it is usually cloaked in the “charater” of the site. They present themselves as specialists in “harmonious interactive design”, but the actual samples they provide are only available at the end of the page and are surprisingly different in presentation than the actual page you have to navigate to get to them. I would be hard-pressed to make any kind of comparisons in style. The style of the “Reverend Danger” site seems more like a marketing gimmick for a video game than a business site.
Another web design company with a more simplified design is pusulaweb.com. The main section of the page is an island in the middle of an ocean and at the bottom of the page, you begin to be able to view the area below the surface of the ocean. There are 5 links in the image for “Case Studies”, “Partners”, “About Us”, “IPhone Apps” and “Contact Us”. Each link moves the page to the same area below the surface but different content.
I tried each link but they all go to the same place with the same Sea Turtle and the same anchor. I was expecting a few different locations and a little more information. Although the navigation for this site was easy to understand and use, and the content was quicker to access, the overall presentation of the design seemed pretty static for a company dedicated to web design. I reviewed some of the pages they designed and found them to be impactful and creative and much more engaging than their primary site.
They do excellent work on sites for other companies, but I don’t think their own site is a good representation of their ability.
A Graphic-Design and Branding company based out of Houston, Texas, “Always Creative” uses a locked horizontal navigation at the top of the page which allows for quick access to whatever content you are looking for. Although the page scrolls vertically, the primary content sections of the site also incorporate vertical scrolling for a more “in-depth” look at their process, portfolio and company.
The portfolio itself is set up in a three by three grid and clicking on any of the images causes a panel to scroll over from the right and give you a full-page presentation of that particular company’s branding work. You can also scroll this panel left and right to see the samples of the different companies they have branded for. As this panel does not have any method of “scrolling” or navigating back to the original section of the page, it’s interesting to classify this as a “single page”. My initial reaction was to disagree with the classification, but I noticed that the web address never changes from “alwayscreative.net” into any different address.
The overall design appears to give the appearance of a site that is as wide as it is tall. It creates an illusion of going far right and left off of the main body, when in fact, it is merely vertical. The navigation functions smoothly as it transitions from content to content and thanks to the locked navigation bar, no matter where you are in the site, you can immediately jump to wherever you need to go.
Badr is a foodstuff company that was founded in Tehran. Their website utilizes what is known as “parallax scrolling” which gives the effect of viewing through multiple layers in a three-dimensional space. The site is primarily black with a rounded and serrated window that scrolls at a slightly faster rate than the imagery visible through the portal. The imagery consists of beautiful high-resolution photographs of the food they sell.
As in the previous site reviewed, it seems a little confusing as to how this site classifies as a single page with the “menu” link on the left, which then takes over the entire page with a bright yellow textured background and a visual ordered list allowing you to scroll up and down with full views of the food teased in the parallax scrolling or a “vertically-aligned” horizontal nav bar tht allows you to click directly to the section you want (of the center column) and then click the image of the center column. This takes you back to the appropriate section of the main “black page”. There are even section of the main site that have links to “slideshows” that overtake the main site. If this is truly a single page, it is definitely fascinating and puzzling how the design allows for so many different presentations and formats in a single area.
This was one of the more fascinating websites in the list. Quechua appears to be a clothing company that caters to outdoors activities such as hiking, camping, etc. As you scroll down the page, there is a dance of imagery all across the page with pictures scrolling at different speeds and in different directions. The images show people climbing mountains, camping or just enjoying outdoor activities and some of the pictures have white dots on the clothing they wear. The dots, when activated, take the site to one side to show the item clearly with a brief description and cost.
On the left of the page is a static series of 5 circles connected by a continuous line. This is the site’s vertical navigation. If you hover the mouse over it, the name of the section fades in and clicking the link takes you to that section automatically, although not necessarily in a “quick manner”. It doesn’t leap to the section you want so much as automatically scrolls you to that section at a faster pace. I suppose they did the work and really want to make sure you see the effect.
Although the site is beautiful and definitely fun to navigate, it doesn’t provide an easier method to find any specific item or items you are looking for. There is no kind of filter to only look at shoes or backpacks, etc. The effect is still stunning and would definitely intrigue the casual shopper to browse their entire catalog, just to see how the page presents the content in such a dynamic fashion.
“Every Last Drop” is essentially an interactive public service announcement for water conservation. It is reminiscent of watching a cartoon in the way it is designed. You can either scroll down the site, which creates a smooth transition from scene to scene. The page is designed to be a journey from beginning to end, so there is no method of navigation to get to a specific section of the site.
You follow the main character through his day and as you go along, you receive small amounts of information concerning how much water the average person consumes both through their own actions and through the activities going on around him.
The site does an excellent job of engaging the viewer through the fun graphics and small, easily digestible bits of information. At the end of the “day” you can view a video to obtain more information about how to save water. There is a noticeable mechanism at work in that it forces you to go to the end of the site. If you stop at some point and try to “rewind” or scroll up to see a previous section again, and then try to advance to the section that follows that one, the page will speed past it back to the farthest section you reached previously and attempt to move forward from there. As you reach the end, you can start over and navigate forward from there.
The “My Provence Festival” is a yearly creative art competition meant to promote the Bouches-du-Rhone as a destination. The site has a fixed horizontal navigation at the top of the page and each section of the site takes up the browser on its own. There is no capability of gradually scrolling through the content as scrolling immediately slides the next section up or down, replacing the previous one.
The most unique section I found on this page was the “creations” area that shows a full page grid of pictures of a man and woman viewed from behind. If your mouse cursor comes into contact with any of the individual squares, the image is immediately replaced with one of the works of art featured in the competition.
The design of the site fits well with the content in that it gives the feeling of creativity in a surrealistic environment, for example… the “Jury” section showing male and female legs underneath a strange half-sphere. There is a lot of imagery that is used and not really explained. There are several instances of tall, narrow pyramids as some kind of symbol for the event and much of the imagery has a 1950’s quality to it as well.
The navigation bar at the top of the site makes it easy to get to the content you want, but the flow of the site makes you want to explore it section by section.
Buchholzer is a catering site with a brilliant use of color and parallax scrolling. This page is in German and as you scroll down, you come across samples of the food they offer, circular shapes and sectional fields of color floating in the background and scrolling at different speeds.
The design gives an almost dreamlike quality of falling and at the same time, makes the food seem “light”. There are several links within the page that opens a large grey panel to the left with more in-depth information – should it be needed – without cluttering up the flow of the main page.
On the upper right of the page is a very simple vertical navigation that quickly slides the page to the section you want to read or it will open the grey panel on the left to provide information you are looking for.
I believe this site is for a French Graphic Design firm that specializes in 3D rendering, animation and presentations for business. “Teapot Creation” shows off their rendering work in a scrolling 3D environment. Cups and saucers in the foreground scroll past at various speeds,giving it that sense of dimensionality that is represented in their work portfolios. This was one of the better sites in representing themselves and their work within the design.
The use of color in the page is sparse. The majority of it is at the beginning and even then, it’s only the brown from pieces of toast, small green bushes and tiny red dots. I would have like to see more of the page in color to show off their skills more. As it stands, it almost appears to be limited to black and white objects, even though I know it’s not true.
The navigation on the right side of the page is unique in that it is represented as a line broken into 5 sections. Only the current section shows the name next to it, unless you hover over it.
Moka is a Graphic Design house based in Argentina. They appear to specialize in branding and digital media. The design of the site is similar to the Davide Baratta website reviewed earlier in that they provide just what is needed by potential clients and not try to dazzle the viewer with too many visual tricks.
The logo and horizontal navigation are set up as a header for the page and as you begin to scroll down, the header shrinks and locks to the top of the page so it is always available should you need to move to a different section of the website quickly. The overall color scheme is black and cyan on a white, non-textured background. The next section is a four by four grid of tiles showing off the company portfolio images and when you hover the mouse over the individual images, a slightly transparent field of color appears over it with a summary of what you are looking at.
The next section provides brief descriptions of the company, the services they provide and the staff. The section following next is probably the least successful part of the site. The “Some of Our Clients” area has a bright cyan heading, but each of the client names and logos beneath it are very close in value to the white background, making them nearly invisible unless you hover over them with your mouse cursor. If you were simply scrolling down the page, you would probably miss them completely. Even the map to locate their business incorporates the black, white and cyan palette – which I thought was a nice touch. So often, the map that is included looks pasted on.
This is kind of a strange website for a musician or band. iamousback.com is very small and you don’t get much of a feel for what the music is about from the site itself. There is a logo that looks like it was drawn on with finger-paint and behind it are two images that alternate at regular intervals – and asteroid and a starry sky. Underneath this are four panels with circles containing images that are difficult to identify. These panels create a slight hovering effect when you “mouse over” them and clicking them plays one of the artist’s songs.
The only other content on this site provides links to email, Facebook and where to buy the album. The site seems to be designed for those who are already fans because you won’t find out anything about the artist on this site. In fact, the majority of the content on this page appears to be intended to direct you elsewhere, whether it’s Facebook or a site called Bandcamp, intended to sell the album and the individual songs. As a matter of fact, after clicking the link to iamousback.bandcamp.com, I find there is more actual information about the artist there than on the single-page site. It makes the original site seem almost unnecessary.
I’m assuming this website no longer exists as the link only sends it the Facebook page.
This page is similar to the “Every Last Drop” site as it presents itself in the form of a public service announcement. It uses parallax scrolling and very bright colors and illustrations to inform about the amount of unnecessary interruptions involved in attempting to communicate with one another at work. Several infographics, interesting statistics and funny characters keep you reading and absorbing the content until the end of the page with an unassuming blue bar set as a link stating “Don’t Become Another Statistic”. Activating this link takes you to the actual site that they intended for you which is the Atlassian company selling you productivity and communication software. The site also has a responsive design that is viewable at several different sizes.
Ian James Cox
Ian James Cox is a freelance digital designer that has designed a very unique way to showcase his skills. The background texture is crumpled paper and the content, including the navigation on the left sidebar, looks like it was made with a black magic marker. The text has a hand written quality and, along with the illustrations, are in black and white.
Scrolling down the page creates the feel of following a hand drawn map and gives the illusion of a huge space that allows you to scroll left and right off the sides of the page, even though you are only technically moving up and down. As you follow the map, you come across locations dedicated to work Ian has done for other companies. The first stop shows his work on a children’s version of the BBC network including a link to the site. Each stop along the map has samples of artwork and animations and the map appears to scroll in all different directions and twisting and turning around corners.
The design gives the page a real sense of character, right to the end of it where you can leave a message for the artist. The text fields also appear to be hand-drawn. The only drawback I had about the site was the navigation and how it jumps from section to section. As you click the link for the section you want, the screen absolutely races along the pre-determined path of the map until it reaches your destination. While it fits with the map motif, it is somehow visually erratic. It would probably work better at a slower speed so you can see the transition rather than a rapid fire of unidentifiable squiggles and images.
I believe the popularity that single page designs currently enjoy are due to the need to quickly digest information without taxing our attention spans. To succeed in this, the website has to be easy to understand, easy to navigate and have bite-sized bits of information
From these selections, I believe the pages for Davide Barrata and Moka are the most successful designs for the use of single pages. Although they do not have the creative “tricks of the trade” such as interactivity or parallax scrolling, they are beautifully organized and provide just what is needed for content and do not over-burden the viewer with information for the sake of simply having more content.
Baratta’s website was meant as a portfolio of his own work as was Moka’s for their business. They keep the information brief and easy to digest and the visuals minimal so as not to draw attention away from the content. The images of the work they want to present are organized into grids that allow you to either click for a larger version and a closer look or to hover over it for a brief summary overlaying the image.
If you are a client looking to hire a Graphic Designer, the main things you want to know are who are they, what skills do they possess, what does their work look like, what are their references and how do you contact them. These websites provide what is needed rather than spending a lot of time and effort trying to entertain the viewer.
The website for Badr Foods was confusing and, in my opinion, least exemplifies the “single-page” concept. Although it possibly was technically only a single page, the way it was designed gave it the appearance of having several different pages and multiple forms of navigation. In a nutshell, it didn’t “feel” like a single page and it seemed unnecessary to design it as one if it was only going to appear as a regular multi-page site.
It gives the impression that the designer was attempting to show off his ability to take a single page and make it behave like a multi-page site without any reason other than “because they can”. The other sites were much more creative as single pages and the artistry was in being obvious that it was a single page.
For my next exercise, I want to design a website for an artist who is just getting started and doesn’t already have one. I have been following a singer who has gotten his start on YouTube as a cover-artist. Sam Tsui has become and internet phenomenon that has gained additional exposure on The Oprah Winfrey show and as the internet correspondent for NBC’s “The Sing Off”.
He has just recently released his first album of original songs and has been touring with Alex Goot. He has a You Tube channel and a facebook page, but not a regular website. I think this will give me a little more freedom to design something without trying to purposely distance myself from an established website.