3DPrint.com is a online news organization dedicated to the 3D printing industry. In 2018 they requested an update to their website with a number of requirements. These included:
1: A fresh and professional new feel
2: A site that looks first and foremost like a “news” site
3: A clear distinction between news content and ads
4: An improved site structure
The site design process began with the reimagining of the site map. The existing content structure was complex, hard to navigate and in many cases the content was duplicated across multiple pages.
Taking inspiration from sites like Bloomberg, I restructured the home page to include the most recent news items at the top of the page, with the remaining important content elements included below for quick access, while relegating other items to alternate pages.
The wireframe was developed in Sketch with an intent to show a high level variant of the site design. It showed where content would be placed, and how elements would relate to each other. This was presented to the client via the InVision app. for approval before moving further into the project.
The prototype was created in Sketch from a continuation from the wireframe and using existing content from the old site. The color, typography, graphic elements and photography were included to provide the client with an accurate visual of how the site would look, before any coding took place.
The color palette was limited to white, black and occasional red to highlight important features, and to maintain the fresh and professional feel the client requested. This new color system also inspired an update to the 3DPrint.com logo.
The typography was selected for ease of use and universality. A clear heirachical system was developed for the headers, body copy, to tags, to assist in the user experience of the densely packed site.
An elaborate top menu system was developed so that with a mouse hover, additional content would be displayed allowing the client to add pertinent information for potential new articles or events.
Sticky Side Blog Menu
While scrolling down an article, a sticky side menu was designed so that important elements can always be within a click of the mouse, including social media links and related articles.