One Page Design
One Page Web Design
One page websites are a popular design style in the modern age. The reasoning behind its popularity is that all the site’s content is contained to one page. This layout is especially beneficial for mobile layouts because instead of having to navigate between several pages, it allows the user to easily navigate one page that contains all the site’s content. This also allows the designer to create the one page under a singular unified picture of what they wish to convey to their audience. Listed below are three successful examples of one page design from the websites of Kit Kat, Colourcode, and Pixel Lab.
Kit Kat’s one page website is meant to give a visual breakdown of what a Kit Kat is, share the history behind Kit Kat, and express some selling points of Kit Kat candy. The audience for the website is for users of all ages, but perhaps more-so adults than children given the mildly advanced vocabulary used. The site’s design approach was to break down the Kit Kat by each layer as new content is introduced. Some key visual elements that establish the style and the mood is the breaking down of the Kit Kat and the color scheme. These aspects establish the style and mood because they follow the Kit Kat color scheme of red and white, staying true to the brand, and by breaking down the layers of a Kit Kat, the user has a better idea of what they are eating. I truly feel that this website is successful, given my previous remarks. One of the only aspects I feel falls short is the navigation links on the right hand side of the page. When you click on the name of the section you wish to jump to, it does not jump you to that part of the website, which I found to be a slight disappointment.
When faced with responsiveness, Kit Kat’s website is almost fully responsive when resizing the browser window. When you narrow the browser window, the images are fully responsive, however, the text is not. If the browser window is made narrow enough, the text gets cut off and is unable to be read, which is an issue. Other genres or art or design this webpage relates to is other candy commercials, such as this Reese’s Take 5 commercial. In the commercial, the candy being pushed up through the different toppings is being “constructed” layer by layer. The designer, as other designers have, likely thought that as they transitioned from layer to layer, this allowed for a smooth way to introduce and define information and sections, notably in a unique manner. I imagine the designer designed the site this way because it is a clever way to transition between information while allowing the user to see the product in its entirety. In my opinion, this is an effective layout method because it flows smoothly and fulfills its purpose. I think content that does well with this layout is food products, or products that can be broken down by layers, so perhaps products such as Legos. Content that would fall short with this layout without be solid products that cannot be broken down.
Colourcode’s purpose is to randomly generate color palettes for users. The audience of the webpage is individuals seeking to find inspiration for color palettes or hoping to randomly generate color palettes. The design approach taken is utilizing a majority of the webpage to display the colors in the color palette. On the left hand side there are options for selecting different types of color palettes and downloading the created color palettes. Key visual elements that establish the style and mood the website are the color blocks and the menu bar. There are small details that contribute to the visual elements, such as how the color wheels beside the title of each color scheme consists of only colors within the defined color scheme. I found this website to be entirely successfully. It allows users to add more or less colors to their palette, it is simple and able to quickly be picked up by first time users, and offers a variety of color palette options. In terms of its design, I believe it is successful because there is not too much going on within the page and the colors used in the menu bar on the left hand side do not get overpowered by the changing colors in the color palette.
Colourcode’s website is completely responsive. When the browser window size is reduced, the information is condensed, but fully visible. The text adjusts to the size of the window as well as the color shade boxes. Other genres or art design it relates to other color palette generating websites. Specifically, the website it reminds me is coolors.co. It is a bit ironic because I have actually had to use this website for a class before, so I am rather familiar with the format and design of the website. I imagine the designer was going for a simplistic design that was intended to be user friendly and easy to use. They likely designed the site to be such and to serve its sole purpose of creating color palettes. Overall, I believe this website has an extremely effective layout. The flow of the website is notable, its usability is admirable, and I did not find anything that would lead to me to say it was ineffective. I believe the content that worked the best was the menu bar on the left hand side of the page and the color palette boxes. If I were to say anything need to improve on the website, it would be the size of the menu bar adjusting when the size of the browser window is changed.
The purpose of the Pixel Lab’s website is to give a background on the company, showcase featured work, and allow for user and business interaction. The interaction between the two parties is conducted by the user leaving their name, email, and a message for the company in their Contact section. The audience of the website appears to be individuals interested in web design and development and the design approach is to transition between sections with distinction that capture different content so that it appeals to users. All these sections can be found in the menu bar at the top and they scroll you down the page to section of your choosing when clicked upon. Some key visual elements that establish the style and mood are the visuals, the color scheme, and the transitioning of background colors between sections. The visuals showcased on the webpage are more significant than other webpage’s images because this company conducts web design, so if the user is pleased with the visuals incorporated and the overall design of the site, then the user is more likely to be confident and interested in working with the company. Given that notion, I find this to be yet another successful website. The reason I attribute success to this website is it effectively appeals to its audience, it has considerably good usability, and maintains a well designed layout.
As for responsiveness, this website is easily the most thoughtful in terms of resizing. Out of all the three examples mentioned, I truly appreciate Pixel Lab’s approach to responsiveness because of its thoughtfulness and usability. Instead of making the only changes to images and text size, Pixel Lab actually changes the design of the page as needed when the browser is smaller or larger. Other genres or art or design this website reminds me of is the color scheme and imagery in this blog post. In my opinion, when creating this website, the designer made it a point to not include excessive information, to showcase the company’s abilities in respect to the services they offer, and to maintain good usability on the user’s behalf. They designed the site this way to maximize the user experience. Overall, I found this to be an effective layout method. Referencing an earlier discussion in relation to this website, I believe the effective layout plays into the successfulness of the website. Aspects of the website that showcase the content very well are the menu and the transition between sections. If I had to recommended one aspect of the layout to be improved, it would be the way the title begins to get more and more lost in the opening image as you scroll down.
Thoughts about One Page Design
One-page sites might evolve in the future as web design and our devices change because the demand of how to be responsive will change. As new devices emerge, the way webpages are set up will have to be adjusted accordingly. Currently, when creating a website, it is important to adjust the website for a desktop layout, a tablet layout, and a landscape and portrait mobile layout. These sites work on phones because of responsiveness. A simple example of a difference between a desktop layout and a portrait mobile layout may be how the menu is displayed. In a desktop layout, the menu can be laid out on the webpage in full versus on a portrait mobile layout the menu may be presented in an accordion style. Through the difference of these layouts, a user can learn how broader trends different between each layout. An example of this is how the content may be presented more vertically or more horizontally depending on the layout being used. Also, border and padding, text size, image size, etc. differs depending on the layout being used. Several broader topics can be better understood as to how they differ between layouts through the observation of and research on different device layouts.