{"id":24066,"date":"2021-05-14T15:00:41","date_gmt":"2021-05-14T13:00:41","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=24066"},"modified":"2022-01-14T10:50:48","modified_gmt":"2022-01-14T09:50:48","slug":"zermatt-case-study","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/zermatt-case-study\/","title":{"rendered":"Zermatt Multi-concept Agency Theme: A Case Study"},"content":{"rendered":"

[vc_row][vc_column][vc_empty_space height=”3px”]

\n\t
\n\t\t\t\t\t<\/p>\n

About the Project<\/h2>\n

\t\t\t<\/div>\n<\/div>

\n\t
\n\t\t\t\t\tZermatt is a multi-concept agency theme inspired by the rawness of brutalist designs and the simplicity typical of the Swiss Style. Its distinct visual identity and strong character developed from melding the core principles of the two styles with contemporary design tendencies.
\n\t\t\t<\/div>\n<\/div>[vc_empty_space height=”30px”][\/vc_column][\/vc_row][vc_row][vc_column]
\n\t
\n\t\t\t\t\t<\/p>\n

Awards:<\/h2>\n

\t\t\t<\/div>\n<\/div>

\n\t
\n\t\t\t\t\t<\/p>\n

Best UI Design \u2013 CSSDA<\/u><\/a><\/span><\/h3>\n

\t\t\t<\/div>\n<\/div>[vc_empty_space height=”1px”]

\n\t
\n\t\t\t\t\t<\/p>\n

Best UX Design \u2013 CSSDA<\/u><\/a><\/span><\/h3>\n

\t\t\t<\/div>\n<\/div>[vc_empty_space height=”1px”]

\n\t
\n\t\t\t\t\t<\/p>\n

Best Innovation \u2013 CSSDA<\/u><\/a><\/span><\/h3>\n

\t\t\t<\/div>\n<\/div>[vc_empty_space height=”1px”]

\n\t
\n\t\t\t\t\t<\/p>\n

Special Kudos \u2013 CSSDA<\/u><\/a> (Final Judge’s Score 8.08)<\/span><\/h3>\n

\t\t\t<\/div>\n<\/div>[vc_empty_space height=”55px”][\/vc_column][\/vc_row][vc_row][vc_column]

\n\t
\n\t\t
\n\t\t\t
\n\t
\n\t
\n\t\t\t\t\t<\/p>\n

The Approach<\/h2>\n

\t\t\t<\/div>\n<\/div>

\n\t
\n\t\t\t\t\tWe\u2019ve always strived to transcend common web design practices and set new trends. Each new project presents a chance for our creatives to challenge their inventiveness and experiment with various styles and techniques. So, when the time came to create a new multi-concept theme<\/a>, we decided to craft a somewhat idiosyncratic project that eschews the subtle, polished visual identity. Instead, we were interested in devising a raw, bold, yet appealing look, suitable for digital agencies, architecture studios, museums, galleries, and magazines.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”37px”]
\n\t
\n\t\t\t\t\tWe decided that the best way to achieve this was to amalgamate brutalism with the Swiss Style a.k.a. the International Typographic Style.<\/span><\/span>\t\t\t<\/div>\n<\/div>[vc_empty_space height=”36px”]
\n\t
\n\t\t\t\t\tBoth of these styles are known for their inclination toward functionality and the heavy use of typography. They focus on readability and stripped-away, clean designs, void of superfluous embellishments. But no matter how crude these two styles may be, they are by no means prosaic. In fact, they offer a lot of room for experimentation, resulting in the creation of aesthetically pleasing and exciting designs. We considered those principles a perfect fit for our project and we used them as guidelines for Zermatt<\/a>, an authentic multi-concept agency theme that personifies and celebrates the hallmarks of brutalism and the Swiss Style.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row][vc_column]
\n
\n \"Zermatt <\/div>\n<\/div>[vc_empty_space height=”50px”]
\n
\n \"Zermatt <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”50px”]
\n\t
\n\t\t\t\t\t<\/p>\n

The Design<\/h2>\n

\t\t\t<\/div>\n<\/div>

\n\t
\n\t\t\t\t\tThe use of a mathematical grid and sans-serif typography is one of the most obvious characteristics of the Swiss Style, with the latter heavily deployed in brutalist works as well. From the moment we started developing the first moodboards for Zermatt, we decided that precisely those two elements should be the staples of the theme\u2019s design. \t\t\t<\/div>\n<\/div>[vc_empty_space height=”38px”]
\n\t
\n\t\t\t\t\tThroughout history, grids have always been used to stimulate user\u2019s content comprehension. Even the first manuscripts and books relied on a grid system to arrange words in a way that would make them easier to read. Today, grids are applied in all media forms – wherever there are photos and texts there\u2019s also a grid system. In print, digital, and, in particular, interactive design, grid lines act as somewhat of a backbone for a project. We use them to achieve hierarchy, create a better layout structure, and organize content by placing it into rows and columns. But horizontal and vertical grid lines do more than just merely separate the content. In fact, the omnipresent grid system in Zermatt creates a connection between page elements no matter how divergent or separated they may be. It also ties all of the theme\u2019s layouts into a visually cohesive unit and provides them with a sense of consistency. Moreover, the grid system ensures all sections attract an equal amount of viewers\u2019 attention and incites a more fluid visual communication with the observer.
\n\t\t\t<\/div>\n<\/div>[vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row][vc_column]
\n
\n \"Zermatt <\/div>\n<\/div>[vc_empty_space height=”50px”]
\n
\n \"Zermatt <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”58px”]
\n\t
\n\t\t\t\t\tAs for typography, we held tight to the idea that less is more and upheld the Swiss Style principle that fonts, as one of the fundamental elements of design, should be simple in order to communicate with viewers in a clear way. We knew that, if we wanted to ensure great readability on Zermatt, a sans serif typeface would be our best choice. We experimented with various fonts and finally settled on Google\u2019s DM Sans font – a clean, easy-to-read sans serif type we ended up applying throughout the theme. We ruled in its favor not only for its simplicity but also because of its subtle geometric character that complements Zermatt\u2019s somewhat robust character.
\n\t\t\t<\/div>\n<\/div>[vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row][vc_column]
\n\t
\n\t\t
\n\t\t\t
\n\t