How’s about some color? This portfolio website has some serious personality, and the work is loud and lively as it moves about.
The projects are prominently displayed in a three-column grid, but the section for the team members breaks away from the grid and uses the space in an interesting way. The content is scattered around the page, although the website does have structure each section is set off by a different background color. I really like the transparent navigation bar, which opens the page up a little, revealing the content underneath. Upon loading, it greets you with a quirky photograph and prompts you to scroll down, where the navigation appears and eventually affixes to the top. When viewing a project, you can exit by hovering over the heart. The little heart in the top-left corner is the navigation for the whole website, it swivels into an “i” on the home page. The transitions tell you a bit about the projects, and you can navigate using the arrows.
The work seems to be haphazardly scattered, breaking away from too clean and predictable an approach. Luke Finch’s portfolio has a fun and friendly layout. This single-page website has an original and clean layout that it easy to use. As you hover over a diamond, it fills with a description of the work. The center diamond is the nameplate, which isn’t too prominent and so doesn’t detract from the work. The studio’s work is displayed in diamond shapes of different sizes that fit together. I love this layout, simple yet so visually interesting.
The layout of this site is comfortable for the user. However, it doesn’t feel boxy and constrained but has a more open feel - this is due to the ample space given and the use of rounded corners. The content below is laid out in a three column grid with two main columns and one smaller side bar. The arrows indicate movement and fluidity and encourage the user to scroll down toward the content. The navigation bar at the top and the submenu are confined to the middle column of a three-column grid, maintaining the user’s focus at the center.Īs the page loads, a fun 3D line animation starts to fill the screen. When you click on a flavor, information overlaps this submenu, allowing you to click through the assortment of cookie flavors. Below is a colorful list of the different cookies the company makes, but these also serve as buttons in a submenu. As you scroll down, the navigation shrinks but remains fixed at the top. The automatic slideshow plays in the background, with the main navigation bar at the top. They aren’t necessarily perfect still, browse through them, and maybe, just maybe, your creative genius will be sparked. Well, the following websites have some quite… unusual layouts. Creating Exciting And Unusual Visual Hierarchies.Beyond The Boring: The Hunt For The Web’s Lost Soul.Creative And Innovative Navigation Designs.As usual, we have to put ourselves in the users’ shoes: What do we want them to see first? How will your message be best communicated? We have to ask these questions before we start designing, because the layout will shape the rest of the design. Therefore, you need to carefully think through how you lay out content.Īn original, creative layout goes a long way to improving the user experience of a website, although not letting your creativity get in the way of usability is important. It also sets the aesthetic of the website. It guides the user through the sections and tells them what is most important. The layout is the foundation of your website.