{"id":10677,"date":"2020-08-14T15:00:56","date_gmt":"2020-08-14T13:00:56","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=10677"},"modified":"2020-12-11T18:22:01","modified_gmt":"2020-12-11T17:22:01","slug":"die-finnhutte-case-study","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/die-finnhutte-case-study\/","title":{"rendered":"Die Finnh\u00fctte Architecture 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\tDie Finnh\u00fctte is an architecture and interior design theme with an innately contemporary aesthetic. Everything in Die Finnh\u00fctte, from its layouts and interface to its imagery and typography, developed naturally from the core foundations of minimalism and clarity of form.
\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 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

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

Special Kudos \u2013 CSSDA<\/u><\/a><\/span><\/h3>\n

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

\n
\n \"The <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”49px”]
\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\tAs a company with quite a few trained architects in its collective, we\u2019ve always remained mindful of Mies van der Rohe\u2019s credo that \u201cLess is more\u201d. While many today consider this a clich\u00e9 or perhaps even a truism, its importance to generations of architects (and designers) cannot be overstated. And it\u2019s a concept we held firmly in our minds when planning out Die Finnh\u00fctte<\/a>. Farnsworth House, Villa Savoye, and Glass House are just a few of the buildings we looked to for inspiration. Each of these architectural achievements attests to the strength of der Rohe\u2019s principle and displays a deep understanding of the importance of clear forms, defined shapes, and carefully selected details. So we decided to apply this moderate approach as faithfully as possible to Die Finnh\u00fctte\u2019s layouts and interface.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row content_text_aligment=”center”][vc_column]
\n
\n \"Die <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”49px”]
\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\tOne of the first things we created for Die Finnh\u00fctte was its logo. We wanted the logo to be purely typographical, so we started experimenting with a selection of fonts. Overpass, the typeface we ultimately chose, is based on clear, well-defined lines, reminiscent of thin, modern columns. These lines further inspired the design of some of Die Finnh\u00fctte\u2019s main interface elements, like its menu openers, navigation, hover animations and active item markers. Apart from these extremely restrained and functional forms, the theme has no additional decorative elements.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”38px”]
\n\t
\n\t\t\t\t\tSticking to the principle of less is more, we decided to use Overpass throughout the theme. What we found so interesting about this typeface is that even though it\u2019s built on these clear lines, it still isn\u2019t quite perfect. Some of its strokes, like those on the letters \u201cd\u201d and \u201cn\u201d, are thicker, giving it some warmth and perhaps even a certain charm. We balanced this out with the sturdier, condensed Oswald font used above the main titles.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row content_text_aligment=”center”][vc_column]
\n
\n \"Die <\/div>\n<\/div>[\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=”58px”]
\n\t
\n\t\t\t\t\tWhen it came to designing the theme\u2019s layouts, our goal was to make sure the portfolio projects and imagery had sufficient breathing room. We knew this was the content our clients would care most about. So we created large, light areas around these focal points, as evident right from the get-go on Die Finnh\u00fctte\u2019s main home<\/a>. Notice the asymmetrical arrangement of imagery and white space within the slider and the way the entire page is composed of spacious, alternating sections of white and light grey. Most of the theme\u2019s homepages are based on this idea of \u201cairy\u201d layouts.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”38px”]
\n\t
\n\t\t\t\t\tWe also developed a few brand new layout concepts specifically for Die Finnh\u00fctte, including several custom portfolio single<\/a> designs, as well as a fresh take on the vertical project showcase<\/a>. We did extensive research for the portfolio singles, carefully choosing the most important information to display on each one. The vertical showcase, on the other hand, came somewhat naturally. It played perfectly into the theme\u2019s airy feel, with the projects unraveling as you gently float past them.\t\t\t<\/div>\n<\/div>[vc_empty_space height=”60px”][\/vc_column][\/vc_row][vc_row content_text_aligment=”center”][vc_column]
\n
\n \"The <\/div>\n<\/div>[vc_empty_space height=”48px”][\/vc_column][\/vc_row][vc_row][vc_column]
\n\t
\n\t\t\t\t\t<\/p>\n

The Animations<\/h2>\n

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

\n\t
\n\t\t\t\t\tWith der Rohe\u2019s words still in mind, we decided to base all motion in the theme around one core set of animations. And since imagery is such a key component of Die Finnh\u00fctte, mask animations seemed a natural choice. By placing an opaque mask layer above our images, and then removing it in a smooth motion, we created the effect of slowly revealing each image in the theme. This is especially noticeable in the uncovering animations. As you scroll through each page, the most important elements unfold before you, drawing your attention and imbuing the theme with a subtle but significant dynamicity. \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