Cutting Edge Design with Demodern

Strategy & Branding
The websites strategy is cutting edge, interactive, holistic, engaging, and innovative. The purpose of the website is to show the viewer who the company is and what they do. People interested in using the service that DeModern provides and people interested in working for DeModern are most likely going to be satisfied with the website. The website uses space, font size, and images to keep the viewer engaged. The information is balanced with composition. The whole website is about design thus their website design should have (and does) a lasting impression. The content is prioritized well. The first few pieces of information prove to be the most important. The visual hierarchy is very impressive. The video really grabs the viewer and allows them to be exposed gradually to the other media and visual components of the site. They even explicitly state their design strategy, which is to establish common objectives and success factors while focusing on the big picture. I think the website displays this quite well. They want the user experience to be as pleasant and enjoyable as the aesthetic experience. And finally they obviously incorporate appropriate technologies to complete the design.

Design
The design of the site is unique. They introduce the website with a silent video of the work place. The first thing you see is people laughing and smile and a title that types: “welcome”. This video is a series of clips showing how the employees work together and enjoy the work environment. This initial sneak peak of the company instantly makes you feel comfortable, happy, and curious. The navigation bar is hidden but can appear by clicking the icon on the top left at any time. The navigation bar is not immediately visible perhaps to allow the website viewer to stay on the main page. The main page can easily be scrolled through to get information about the company. The main page is a series of pages/sections that have contrasting backdrops when appropriate. The first few sections are closely related. First is the video, then their mission statement, and then information on previous projects with pictures. These first three pages gives the viewer a sense of what the company does. These pages are a good introduction and transition nicely to the rest of the information on the main scrolling home page. The main scrolling page continues with a page on their design process, after that is a list of their clients logos (so the viewer will recognize what type of companies they work for), and then a section about the designers. These three pages really allow the viewer to understand how and why the company designs. To end the page is a game you can play. The game really leaves the viewer having a sense of who DeModern really is. The company is serious yet fun. They are committed to their design mission and at the same time are committed to making people happy. The website starts and ends in a unique, interactive, and positive way. Following every section is a link to get more information about the particular topic. The design allows the viewer to understand the most important details about the company but allows the opportunity to branch off and get a thorough understanding of a particular aspect of the company (i.e. the designers, products). Information is grouped together in blocks, which really simplifies the site and allows the visual hierarchy to flow. The pages all have a similar layout, which also simplifies the sites content (visually). The size, color, and style of the fonts are very comfortable to look at. They allow the titles to be bigger and bolder while the descriptions are grey. The pictures really stand out and let the product speak for itself.

Screen Shot 2015-03-30 at 9.16.30 PM

Technologies
The website uses HTML 5. Transform matrix on the images so that they slowly zoom when you scroll over them. They use all .pngs and one .jpg. They use google analytics, google font API, JQuery fro javascript framework, lightbox for phtoto gallery and javascript framework, modernizer for javascript framework, requireJS for javascript framework, and three.js for javascript graphics.

Leave a Reply