Get a Quote

National Mattress

Below we have outlined many of the little details and all the thought that went in to your landing page design.

Project Showcase

Warm, Simple, Clean

Our goal with this design was to create a nice clean and recognizable design that users will instantly feel comfortable with. We wanted to create a warm overall feel using white space and simple gradients which tends to give that comfortable feeling users should experience while shopping for their perfect mattress.

Project Image

Colour

We've utilized the National Mattress red throughout creating solid anchor points and accent areas to draw the eye around the page specifically to the important elements such us the main header, and call to action items that will lead the user to other important areas of the website.

Typography

We have selected a clean and simple sans serif typeface for all the type on the design to reflect the look and feel of the current branding. This font is web safe and will render correctly across all browsers and platforms.

Project Image

The Responsive Advantage

A responsive design allows the interface to be more accessible to users. The design stretches and forms itself to every screen size, so that every user gets the best possible experience.

Desktop

The Desktop version of the design is optimized for viewing on a laptop or a monitor. Every element of the design will become larger and more spread out or smaller and closer together depending on the specific size of the screen.

jQuery

The Desktop version of the design is optimized for viewing on a laptop or a monitor. Every element of the design will become larger and more spread out or smaller and closer together depending on the specific size of the screen.

Main Navigation

The header area of the website is optimized for ease of usability. This is where the main navigation, including the mega menu drop down is located to create a navigational hub for the whole site.

Mega Menu

With an advanced CSS drop down menu, all of the content on the website is available to the user in just one click. This creates a very smooth navigation experience.

Actionable Content

One of the most important functions of the home page is to direct the user where to go. This is why much of this design is dedicated to this purpose. Actionable Items in the form of hover overs that surround the featured products making it clear to the user what they will be linking to.

Footer

We've utilized a simple footer layout including the main about us sections and most important menu items to lead the user back into the main areas of the site once they reach the end of any page. We've also included all social media links to help users navigate towards those respective websites.

Tablet

The tablet version of the design is similar to the desktop version, except that some graphics are condensed to fit much better at the smaller resolution.

Mobile

For mobile devices, all the content moves into a one column centered layout so that all the images and text can remain large enough to be seen on a much smaller screen. Also many functionalities have been simplified for a touch interface, such as the main navigation.

In Conclusion

We believe that this design gives National Mattress a modern and professional web presence which is sure to leave a memorable impression on their clients. This is a design that breaks the mold and isn't afraid to be bold without sacrificing on usability. If you have any questions, please contact our Creative Director.

Downloads

Get a Free Quote

Request a free proposal from Geek Power Web Design and get started on your new website today!

We see every new project as an opportunity to indulge our passion for web design and web development. We truly love what we do and we're always excited to start a new website!

@
Geek Power - Toronto Web Design