De Knegt & Leeflang is a company that specializes in Christmas gifts. During my internship I designed a new conceptual website for the company, taking in every piece of relevant data and shaping it via extensive wireframes to a visual design of the new website.
Designing a large website that contains a lot of data can be difficult. To approach this problem, I gathered all information that the website needed to display and organized it into different sections, that would become the main navigation of the website.
Next, I started organizing this information per page. To avoid going into too much detail visually, I zoomed out and layed out every page into mini wireframes. I found this technique useful as you can see the entire page during the design process and you can really balance the information that you’d like to display on every page.
The image above is a detail view of a wireframe for one of the pages. It divides the page into different sections. The header and footer are consistent across the design of the entire website. The text on the left describes the contents of the respective sections.
The visual design of the website needs to reflect the identity of the company. For De Knegt & Leeflang, the design needs to be classy and cosy and have a Christmas-like warm atmosphere.
Navigation and header
The navigation and header open the website and is the first thing the visitor sees. The navigation should be clear and easy to understand, which is why I chose to underline the active state: to tell the viewer where he currently is on the website. The DKLL brand should be immediately visible for the viewer to recognize the website they’re visiting. The nature of the company implies a Christmassy and cosy feel throughout the website. The large header image seduces the viewer to learn more about the collection of Christmas Gifts that DKLL has selected.
To me, typography is one of the most important elements of every website. I started designing this website by its content through the wireframes and the selection of different fonts was one of my first actions. The typography needs to be balanced and guide the eyes of the viewer. I chose clear and easy to read typography and bright and clear call-to-actions to help the user where to go next.
This grid full of Christmas gifts contains all the preselected combination gifts which should be easy to order online. There are clear call to actions. The user can select any of the Christmas gifts to learn more and easily order Christmas gifts to their liking online. For a more personal composition of Christmas gifts, you can always contact the company to discuss your wishes.
The footer draws a clear line between the activities of the company. On the left side, you can easily access more information about the company. The column in the middle links the user to the different products of the company and the column on the right directs the user towards the different daughter brands of the company.
Full visual design
Above are some of the components that make up the composition of the visual design of the different pages. If you’d like to see a full page, please click here.