https://marielharding.com Mariel Harding Tue, 01 Dec 2020 01:08:04 +0000 https://marielharding.com en https://marielharding.com/Nav-Arrows Tue, 01 Oct 2019 00:16:37 +0000 Mariel Harding https://marielharding.com/Nav-Arrows ︎︎ https://marielharding.com/Homepage Tue, 01 Oct 2019 00:16:40 +0000 Mariel Harding https://marielharding.com/Homepage Creating experiences for emerging and classic brands. https://marielharding.com/LifeData-1 Sat, 17 Oct 2020 17:39:35 +0000 Mariel Harding https://marielharding.com/LifeData-1 LifeData &nbsp;&nbsp; LifeData creates products that help researchers gather accurate data through timed surveys sent to people throughout the day. LifeData hired me to create a new logo, branding system and UI guidelines to reflect their unique and human approach to experience sampling technology. My Role: Freelance Visual Designer &nbsp; <img width="5928" height="3851" width_o="5928" height_o="3851" data-src="https://freight.cargo.site/t/original/i/ae8f07d729f27a2189ea9fd71717fc7d74f9e416769838ea4e3ae9a61291e381/lifedata-logo-photo-copy.jpg" data-mid="85881095" border="0" src="https://freight.cargo.site/w/1000/i/ae8f07d729f27a2189ea9fd71717fc7d74f9e416769838ea4e3ae9a61291e381/lifedata-logo-photo-copy.jpg" /> Creating a new logo that symbolized the connection between data and human life was one of the primary design goals. &nbsp; &nbsp; &nbsp; <img width="6893" height="4004" width_o="6893" height_o="4004" data-src="https://freight.cargo.site/t/original/i/ae872c002c4e73c5c49277d545e09ccb1b3071c4b21adf86bf4bfc9038e9da38/lifedata-4-01.png" data-mid="85881106" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/ae872c002c4e73c5c49277d545e09ccb1b3071c4b21adf86bf4bfc9038e9da38/lifedata-4-01.png" /> This was challenging to convey in a concise and simple way. After exploring lots of ideas, I landed on an icon that represents a thought bubble, and also suggests the upward trajectory of a chart. <img width="3334" height="2501" width_o="3334" height_o="2501" data-src="https://freight.cargo.site/t/original/i/e9a4a756cdb81a3816dba8f2c3bf19ec1d7fa3884c3ea39e97f1f0fee1a13ff6/portfolio-site-thumbnails-07.png" data-mid="85881107" border="0" src="https://freight.cargo.site/w/1000/i/e9a4a756cdb81a3816dba8f2c3bf19ec1d7fa3884c3ea39e97f1f0fee1a13ff6/portfolio-site-thumbnails-07.png" /> One of the primary uses for the icon is in LifeData’s experience sampling app, so having an icon that fit well into a square was also one of the priorities for the rebrand.&nbsp; <img width="4000" height="2667" width_o="4000" height_o="2667" data-src="https://freight.cargo.site/t/original/i/a52854632d82fe88e335e32131093359f7d13dc9078547157761fd64ea0cd49f/iphone-in-hand-icon-mockup.jpg" data-mid="85881093" border="0" src="https://freight.cargo.site/w/1000/i/a52854632d82fe88e335e32131093359f7d13dc9078547157761fd64ea0cd49f/iphone-in-hand-icon-mockup.jpg" /> The simplicity of the icon and logo allows for a friendly and flexible design system. The shapes in it can be echoed throughout the website and UI concepts in various ways.&nbsp; <img width="3200" height="1279" width_o="3200" height_o="1279" data-src="https://freight.cargo.site/t/original/i/b636295f11472a03447d41f550385964d1cb7c6aa478a5636b51e72fa5bbe5ca/LifeData-1280px-Grid.png" data-mid="85881129" border="0" src="https://freight.cargo.site/w/1000/i/b636295f11472a03447d41f550385964d1cb7c6aa478a5636b51e72fa5bbe5ca/LifeData-1280px-Grid.png" /> <img width="3384" height="2571" width_o="3384" height_o="2571" data-src="https://freight.cargo.site/t/original/i/f36db944c93398d8a687a3cb7827f3b8958c780ec646b17ba2ca645662bbf770/lifedata-web-app-2-03.png" data-mid="85881109" border="0" src="https://freight.cargo.site/w/1000/i/f36db944c93398d8a687a3cb7827f3b8958c780ec646b17ba2ca645662bbf770/lifedata-web-app-2-03.png" /> <img width="1590" height="1192" width_o="1590" height_o="1192" data-src="https://freight.cargo.site/t/original/i/8c39e57eda91d7f6225b7ce2234cd86da585230c5354634347b6b6b3921634e2/lifedata-email-signup.png" data-mid="86036200" border="0" data-scale="70" src="https://freight.cargo.site/w/1000/i/8c39e57eda91d7f6225b7ce2234cd86da585230c5354634347b6b6b3921634e2/lifedata-email-signup.png" /> <img width="2000" height="1272" width_o="2000" height_o="1272" data-src="https://freight.cargo.site/t/original/i/8ad462ee69818e859a501c6754d81b19f9b51dbbd6764680b8ee2d16fd2d7613/lifedata-login-2.png" data-mid="86039115" border="0" src="https://freight.cargo.site/w/1000/i/8ad462ee69818e859a501c6754d81b19f9b51dbbd6764680b8ee2d16fd2d7613/lifedata-login-2.png" /> At the end of the project, I created guidelines to cover the use of brand colors, typography, photography, graphics and the logo. &nbsp; <img width="3334" height="2084" width_o="3334" height_o="2084" data-src="https://freight.cargo.site/t/original/i/c8cd1b95247321c17cea9eafa3442c5f644162aa7f9c1a361d3dbd5067b72ca8/guidelines-background-07.png" data-mid="85881117" border="0" src="https://freight.cargo.site/w/1000/i/c8cd1b95247321c17cea9eafa3442c5f644162aa7f9c1a361d3dbd5067b72ca8/guidelines-background-07.png" /> <img width="1600" height="1200" width_o="1600" height_o="1200" data-src="https://freight.cargo.site/t/original/i/d43a53a5bf1f01a3b945f97f4a9817db649a421d266496ea9caca7612c8daa56/lifedata-brandguide.png" data-mid="85881127" border="0" src="https://freight.cargo.site/w/1000/i/d43a53a5bf1f01a3b945f97f4a9817db649a421d266496ea9caca7612c8daa56/lifedata-brandguide.png" /> <img width="3334" height="2085" width_o="3334" height_o="2085" data-src="https://freight.cargo.site/t/original/i/9e74ea7eeda6ab0e6500b4c93230834d84f0f95cd35b0f4cefde6457f50c9bc6/guidelines-background-01.png" data-mid="85881120" border="0" src="https://freight.cargo.site/w/1000/i/9e74ea7eeda6ab0e6500b4c93230834d84f0f95cd35b0f4cefde6457f50c9bc6/guidelines-background-01.png" /><img width="3334" height="2085" width_o="3334" height_o="2085" data-src="https://freight.cargo.site/t/original/i/de513c207c8263a20f29a4b2a260b92cfa1035683c977198bc83d10327ac03e7/guidelines-background-02.png" data-mid="85881118" border="0" src="https://freight.cargo.site/w/1000/i/de513c207c8263a20f29a4b2a260b92cfa1035683c977198bc83d10327ac03e7/guidelines-background-02.png" /> Basic UI design guidelines were established to help LifeData’s internal design team have a consistent baseline for designing and implementing the new brand look. <img width="2473" height="2303" width_o="2473" height_o="2303" data-src="https://freight.cargo.site/t/original/i/538ee078f03bf37746e86d13e383fae7a37a15cd19d4a0fa3f77224fad24f9b3/lifedata-design-system-ui-copy.png" data-mid="85881122" border="0" src="https://freight.cargo.site/w/1000/i/538ee078f03bf37746e86d13e383fae7a37a15cd19d4a0fa3f77224fad24f9b3/lifedata-design-system-ui-copy.png" /><img width="1104" height="526" width_o="1104" height_o="526" data-src="https://freight.cargo.site/t/original/i/adee77555a16ef3c6d34d0b0cee806ea7464a13f551186a651a3252c7341f93c/LifeData-1280px-Grid.png" data-mid="85881128" border="0" src="https://freight.cargo.site/w/1000/i/adee77555a16ef3c6d34d0b0cee806ea7464a13f551186a651a3252c7341f93c/LifeData-1280px-Grid.png" /> <img width="2969" height="2250" width_o="2969" height_o="2250" data-src="https://freight.cargo.site/t/original/i/01fdf752ab8f2f359433e3b64696387fcf618f3fcf466c38f713eca675fcd3d0/LifeData-sign-3-copy.jpg" data-mid="85881092" border="0" src="https://freight.cargo.site/w/1000/i/01fdf752ab8f2f359433e3b64696387fcf618f3fcf466c38f713eca675fcd3d0/LifeData-sign-3-copy.jpg" /> Photos used in this casestudy are from Generated Photos and Unsplash. <img width="1912" height="948" width_o="1912" height_o="948" data-src="https://freight.cargo.site/t/original/i/ae415178480b7958d6c3a6cd1637bdd7ede421fb26b0224afbe11b934a860bda/lifedata-pattern.png" data-mid="86039402" border="0" src="https://freight.cargo.site/w/1000/i/ae415178480b7958d6c3a6cd1637bdd7ede421fb26b0224afbe11b934a860bda/lifedata-pattern.png" /> https://marielharding.com/Everyday-Cycles-1 Fri, 16 Oct 2020 18:25:31 +0000 Mariel Harding https://marielharding.com/Everyday-Cycles-1 Everyday Cycles&nbsp; website, logo,&nbsp;branding Designed in collaboration with Farbod Kokabi <img width="7200" height="3560" width_o="7200" height_o="3560" data-src="https://freight.cargo.site/t/original/i/1dba1a5ff2ceb9c32dad6bc61116ec7c6a00f314ee58c3c4767239a8e7e8540f/everday-cycles-stacked.png" data-mid="85811718" border="0" src="https://freight.cargo.site/w/1000/i/1dba1a5ff2ceb9c32dad6bc61116ec7c6a00f314ee58c3c4767239a8e7e8540f/everday-cycles-stacked.png" />Everyday Cycles and Motion is a bike shop just outside of Chicago. Their goal is to get more people moving through bikes, and they wanted their logo and website to reflect that mission. They hired my friend and talented designer behind Geographic North, Farbod Kokabi, to help them come up with an identity and website to launch their shop. Farbod asked me to help out with the logo mark and designing the pages for their site.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<img width="3241" height="3065" width_o="3241" height_o="3065" data-src="https://freight.cargo.site/t/original/i/cfdc7158b310bda160c49af4044ee1769ac2ee6b00b72171bb188b9738e66c54/gears.png" data-mid="85811725" border="0" data-scale="83" src="https://freight.cargo.site/w/1000/i/cfdc7158b310bda160c49af4044ee1769ac2ee6b00b72171bb188b9738e66c54/gears.png" /> The mark we created is a pair of abstract, yet friendly bike gears that we felt had a dynamic motion and balance. We paired this with a minimal geometric typeface designed by Wilhelm Pischner, Grotesk S H, and a simple color palette of white, black, teal and orange.<img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/94f8884f46d5c1a4cc1b2c16fa30780eaec014d743cc155499f1b89f97809880/type-color-everyday-bikes-01-01.png" data-mid="85816346" border="0" src="https://freight.cargo.site/w/1000/i/94f8884f46d5c1a4cc1b2c16fa30780eaec014d743cc155499f1b89f97809880/type-color-everyday-bikes-01-01.png" /> We then designed a fully responsive website with an online shopping experience that showcased all the bikes and gear Everyday Bikes offers, as well as highlighted their personal expertise and knowledge about commuting and bike maintenance. <img width="1356" height="926" width_o="1356" height_o="926" data-src="https://freight.cargo.site/t/original/i/77bf8a4fbd65455dd6e726abb13ea41067bab24e214459a8d0a546549bb4ab89/everyday-bikes-desktop.png" data-mid="85813360" border="0" src="https://freight.cargo.site/w/1000/i/77bf8a4fbd65455dd6e726abb13ea41067bab24e214459a8d0a546549bb4ab89/everyday-bikes-desktop.png" /> <img width="361" height="596" width_o="361" height_o="596" data-src="https://freight.cargo.site/t/original/i/bd2a9947d7c047ce9cc0f64820f8136dd4266caa8838e06edee7b7ffb4a4df7f/Everyday-mobile-home.png" data-mid="85826500" border="0" src="https://freight.cargo.site/w/361/i/bd2a9947d7c047ce9cc0f64820f8136dd4266caa8838e06edee7b7ffb4a4df7f/Everyday-mobile-home.png" /> <img width="1396" height="1876" width_o="1396" height_o="1876" data-src="https://freight.cargo.site/t/original/i/1eff55c317928b3503143ef60e9bcbbbce8197630589574a1c11702a6b04943e/Frame-1.png" data-mid="85863595" border="0" src="https://freight.cargo.site/w/1000/i/1eff55c317928b3503143ef60e9bcbbbce8197630589574a1c11702a6b04943e/Frame-1.png" /> <img width="1388" height="1224" width_o="1388" height_o="1224" data-src="https://freight.cargo.site/t/original/i/2b285fa9be79073d46f264441a983c16aa15731ce2ac2c1ecb95bbf4da89ed18/Frame-4.png" data-mid="85863638" border="0" src="https://freight.cargo.site/w/1000/i/2b285fa9be79073d46f264441a983c16aa15731ce2ac2c1ecb95bbf4da89ed18/Frame-4.png" /> <img width="1356" height="926" width_o="1356" height_o="926" data-src="https://freight.cargo.site/t/original/i/dfff0799aa04a67b0a1c28b551396d007156383d9400d17cdddb3cae97b553e6/Desktop---2.png" data-mid="85827360" border="0" src="https://freight.cargo.site/w/1000/i/dfff0799aa04a67b0a1c28b551396d007156383d9400d17cdddb3cae97b553e6/Desktop---2.png" /> <img width="1386" height="2412" width_o="1386" height_o="2412" data-src="https://freight.cargo.site/t/original/i/ae0a2d92b023d636d77a96d809a0490ae21b48a0a4d0cfc57b1be5df52fad92b/Frame-6.png" data-mid="85863640" border="0" src="https://freight.cargo.site/w/1000/i/ae0a2d92b023d636d77a96d809a0490ae21b48a0a4d0cfc57b1be5df52fad92b/Frame-6.png" /> <img width="1404" height="2484" width_o="1404" height_o="2484" data-src="https://freight.cargo.site/t/original/i/7b8915c7440bf54dddb320b24052d121b6243f7ec279cf454421042cf5e8369b/Frame-3.png" data-mid="85863637" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/7b8915c7440bf54dddb320b24052d121b6243f7ec279cf454421042cf5e8369b/Frame-3.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/4db86da38727311c8d67a450e455467229d094b98a2c6e782de559d630357b0d/everyday-bikes-mobile-versions.png" data-mid="85826988" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/4db86da38727311c8d67a450e455467229d094b98a2c6e782de559d630357b0d/everyday-bikes-mobile-versions.png" /> <img width="1920" height="1128" width_o="1920" height_o="1128" data-src="https://freight.cargo.site/t/original/i/be50cda2829ca05ba4510823ebfff9ca3408bf25ba432af94a5f19c4f88160bc/everyday-bikes-header-flow-bg.png" data-mid="85862077" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/be50cda2829ca05ba4510823ebfff9ca3408bf25ba432af94a5f19c4f88160bc/everyday-bikes-header-flow-bg.png" /> &nbsp;&nbsp; <img width="2956" height="4434" width_o="2956" height_o="4434" data-src="https://freight.cargo.site/t/original/i/8c697415f0f1e7097f104cbbb224e58ad9923e840eba2ea6006b8a97027bae82/everyday-buttons.jpg" data-mid="85814675" border="0" data-scale="60" src="https://freight.cargo.site/w/1000/i/8c697415f0f1e7097f104cbbb224e58ad9923e840eba2ea6006b8a97027bae82/everyday-buttons.jpg" /> <img width="4121" height="3809" width_o="4121" height_o="3809" data-src="https://freight.cargo.site/t/original/i/9aff909aee328a70c2fca23b88c2538abaae29ed6340d6a29b38d3f4746d0349/everyday-cycles-tape.jpg" data-mid="85811720" border="0" data-scale="94" src="https://freight.cargo.site/w/1000/i/9aff909aee328a70c2fca23b88c2538abaae29ed6340d6a29b38d3f4746d0349/everyday-cycles-tape.jpg" /> <img width="1503" height="2015" width_o="1503" height_o="2015" data-src="https://freight.cargo.site/t/original/i/50b492d2af4297d4b3367b03a44ceb10ecd1fca6112418b44f84f4b4915c1611/24255027_759303127600515_579251612935975352_o-1.jpg" data-mid="85811727" border="0" data-scale="99" src="https://freight.cargo.site/w/1000/i/50b492d2af4297d4b3367b03a44ceb10ecd1fca6112418b44f84f4b4915c1611/24255027_759303127600515_579251612935975352_o-1.jpg" /> https://marielharding.com/Nav-1 Tue, 01 Oct 2019 00:16:40 +0000 Mariel Harding https://marielharding.com/Nav-1 Any Crisis™About︎︎ https://marielharding.com/Coca-Cola-Global-Platform Tue, 01 Oct 2019 00:16:41 +0000 Mariel Harding https://marielharding.com/Coca-Cola-Global-Platform Coca-Cola GO! PlatformWeb design, Global platform A systematic global platform for Coca-Cola’s top brands. Responsive and mobile-friendly with a clean backdrop and user interface to let the content shine. <img width="1200" height="896" width_o="1200" height_o="896" data-src="https://freight.cargo.site/t/original/i/ce8dbf61a22a037beb95a57dfaa960b133b7e1d4d3ce139c78008581448fd8b6/01-go-logo.png" data-mid="51725745" border="0" src="https://freight.cargo.site/w/1000/i/ce8dbf61a22a037beb95a57dfaa960b133b7e1d4d3ce139c78008581448fd8b6/01-go-logo.png" /> Creative Director: Stefán KjartanssonSenior Designer: Mariel Harding <img width="1200" height="677" width_o="1200" height_o="677" data-src="https://freight.cargo.site/t/original/i/4c767fea92ed3374695a6ef5991c63a1d86ea9d1991a4ee450a73389da50c426/03-go-logo.png" data-mid="51725746" border="0" data-scale="94" src="https://freight.cargo.site/w/1000/i/4c767fea92ed3374695a6ef5991c63a1d86ea9d1991a4ee450a73389da50c426/03-go-logo.png" /> One universal interface was designed for a platform that supported multi-lingual sites as well as easily translated to each brand’s color scheme. <img width="1200" height="778" width_o="1200" height_o="778" data-src="https://freight.cargo.site/t/original/i/4c07e5f86e91ec0b4bdebd4619ea9e3186f4bfc73f788013afd59a66669f93f6/04-go-logo.png" data-mid="51725759" border="0" data-scale="74" src="https://freight.cargo.site/w/1000/i/4c07e5f86e91ec0b4bdebd4619ea9e3186f4bfc73f788013afd59a66669f93f6/04-go-logo.png" /> <img width="1000" height="772" width_o="1000" height_o="772" data-src="https://freight.cargo.site/t/original/i/28aaba9ef9197c8370988dcd058d7d9d428c284d1f1a92285b58c8f70c270b9d/01_billion.gif" data-mid="51848970" border="0" src="https://freight.cargo.site/w/1000/i/28aaba9ef9197c8370988dcd058d7d9d428c284d1f1a92285b58c8f70c270b9d/01_billion.gif" /> <img width="1325" height="1405" width_o="1325" height_o="1405" data-src="https://freight.cargo.site/t/original/i/06f1b88d611967e3720c771e4a2f0b15140507ed13c1259ead8282398d098ef8/go-local.jpg" data-mid="51725750" border="0" data-scale="80" src="https://freight.cargo.site/w/1000/i/06f1b88d611967e3720c771e4a2f0b15140507ed13c1259ead8282398d098ef8/go-local.jpg" /> https://marielharding.com/Coca-Cola-Global-Toolkit Sat, 22 Aug 2020 14:30:02 +0000 Mariel Harding https://marielharding.com/Coca-Cola-Global-Toolkit Coca-Cola Global Toolkitweb design, global platform, design system A digital platform and toolkit for Coca-Cola comprised of code and design elements that allows each market to harness the power of the Coke brand, customizing what’s important to it, while maintaining site consistency around the globe. I was the lead designer on this project for two years. I helped design the initial concept and additional components as the Coca-Cola markets needed them.&nbsp; Creative Director: Stefán KjartanssonSenior Designer: Mariel Harding The homepage design features an oversized header that really gives the classic Coca-Cola logo script emphasis and room to breathe. Hero Images drop down behind the logo in a unique way that catch the users attention. Progress bars keep track of which image it’s on and allow the user to control the image carousel.&nbsp; <img width="1294" height="997" width_o="1294" height_o="997" data-src="https://freight.cargo.site/t/original/i/5cda4f0b256fd1d422f18e89ae9ea5800958ccd3ec98625a4f4bf2e6fcdbd399/coke-product-1.jpg" data-mid="80569763" border="0" src="https://freight.cargo.site/w/1000/i/5cda4f0b256fd1d422f18e89ae9ea5800958ccd3ec98625a4f4bf2e6fcdbd399/coke-product-1.jpg" /> Putting a site's content front and center is emphasized in the design. A neutral backdrop and interface allows the brand's personality and content to shine. For the Coca-Cola brand, the website is based on a gray color palette and classic typography while proportioned to give the brand a larger-than-life impact. <img width="1077" height="6367" width_o="1077" height_o="6367" data-src="https://freight.cargo.site/t/original/i/e5adbc9fe3eb7749620e181f63ce64209ade577c41b2804f7d1a534c8e6e62de/02-coke-website-home-2.jpg" data-mid="80570487" border="0" src="https://freight.cargo.site/w/1000/i/e5adbc9fe3eb7749620e181f63ce64209ade577c41b2804f7d1a534c8e6e62de/02-coke-website-home-2.jpg" /> &nbsp; &nbsp; <img width="3334" height="2727" width_o="3334" height_o="2727" data-src="https://freight.cargo.site/t/original/i/be79899605d30f971af9572f3fe3fc36ef9ea0761f11b50b031bc13379a9694d/coke-framework-UI-02.png" data-mid="80574044" border="0" src="https://freight.cargo.site/w/1000/i/be79899605d30f971af9572f3fe3fc36ef9ea0761f11b50b031bc13379a9694d/coke-framework-UI-02.png" /> <img width="992" height="744" width_o="992" height_o="744" data-src="https://freight.cargo.site/t/original/i/54a919e41344629aca7c37e72c2dc9b410bd3324e136de864f0bd52e08c259c1/coke_before_after.jpg" data-mid="80577433" border="0" src="https://freight.cargo.site/w/992/i/54a919e41344629aca7c37e72c2dc9b410bd3324e136de864f0bd52e08c259c1/coke_before_after.jpg" /> The end result of creating the toolkit was stackable and rearrangeable components that allowed each market to have a responsive, easy-to-update site with as many or as little layers as needed. <img width="988" height="741" width_o="988" height_o="741" data-src="https://freight.cargo.site/t/original/i/7e2bef85190ab235631c9713a44410f479bf10c9d1949010dccdffee8ef48d7f/coke_long_short.jpg" data-mid="80577603" border="0" src="https://freight.cargo.site/w/988/i/7e2bef85190ab235631c9713a44410f479bf10c9d1949010dccdffee8ef48d7f/coke_long_short.jpg" /> <img width="1068" height="730" width_o="1068" height_o="730" data-src="https://freight.cargo.site/t/original/i/0d647b7c917f24c7af88f31c62d51cc92e57afb820041f1ca6e5e8ffb61d3844/go_responsive.jpg" data-mid="80563828" border="0" src="https://freight.cargo.site/w/1000/i/0d647b7c917f24c7af88f31c62d51cc92e57afb820041f1ca6e5e8ffb61d3844/go_responsive.jpg" />The responsive framework and toolkit for Coca-Cola were so well received, our agency was hired to design eight additional versions for the top “sparkling” brands: Sprite, Minute Maid, Fanta, Powerade, Fuze Tea, Burn, Ciel, and Diet Coke. More about that here. <img width="1200" height="677" width_o="1200" height_o="677" data-src="https://freight.cargo.site/t/original/i/4c767fea92ed3374695a6ef5991c63a1d86ea9d1991a4ee450a73389da50c426/03-go-logo.png" data-mid="80563811" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/4c767fea92ed3374695a6ef5991c63a1d86ea9d1991a4ee450a73389da50c426/03-go-logo.png" /> https://marielharding.com/Tin-Drum-1 Tue, 01 Dec 2020 01:08:04 +0000 Mariel Harding https://marielharding.com/Tin-Drum-1 Tin Drum&nbsp; branding, website, mobile <img width="1000" height="725" width_o="1000" height_o="725" data-src="https://freight.cargo.site/t/original/i/5062ad2028de499c593cb8af246cc227f27d90ef33cc720405d2c2c60a3f7c7f/01_tindrum_logo.png" data-mid="90673144" border="0" data-scale="58" src="https://freight.cargo.site/w/1000/i/5062ad2028de499c593cb8af246cc227f27d90ef33cc720405d2c2c60a3f7c7f/01_tindrum_logo.png" /> A compact, yet memorable mark and easy to use website was the goal for the Tin Drum rebranding. As a restaurant chain, they had to be aware of restrictions for outdoor signage but wanted a bold and flexible branding system. <img width="2400" height="1600" width_o="2400" height_o="1600" data-src="https://freight.cargo.site/t/original/i/826e238864a6882e7b15b224e058f701fcb162c379078fd71252e6b87024ebd3/Frame-10.png" data-mid="90674312" border="0" src="https://freight.cargo.site/w/1000/i/826e238864a6882e7b15b224e058f701fcb162c379078fd71252e6b87024ebd3/Frame-10.png" /> Creative Director: Stefán Kjartansson Art Director: Mariel Harding The U in the logo, or “U-con” as it eventually was named, became a central, flexible building block for the brand. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<img width="904" height="1000" width_o="904" height_o="1000" data-src="https://freight.cargo.site/t/original/i/adff9da18084b27678168c4f9e46eea1069d11fb2e57eb52d5dfb1f4aea10641/02_tindrum_logo-ucon.png" data-mid="90673147" border="0" data-scale="70" src="https://freight.cargo.site/w/904/i/adff9da18084b27678168c4f9e46eea1069d11fb2e57eb52d5dfb1f4aea10641/02_tindrum_logo-ucon.png" /> A memorable icon for use on its own in digital applications or as a pattern. <img width="1065" height="774" width_o="1065" height_o="774" data-src="https://freight.cargo.site/t/original/i/6cf62f2a094f2ba72192a890fc0d46ec96a3227ff80ad8d942e8215deeb13c38/ucon_pattern.png" data-mid="90673148" border="0" src="https://freight.cargo.site/w/1000/i/6cf62f2a094f2ba72192a890fc0d46ec96a3227ff80ad8d942e8215deeb13c38/ucon_pattern.png" /> <img width="1600" height="1200" width_o="1600" height_o="1200" data-src="https://freight.cargo.site/t/original/i/49a611b44d05c20642e2a3f5e19695d2182f370e02aa66c20439da533cd95555/portfolio-site-thumbnails-11.png" data-mid="90673161" border="0" src="https://freight.cargo.site/w/1000/i/49a611b44d05c20642e2a3f5e19695d2182f370e02aa66c20439da533cd95555/portfolio-site-thumbnails-11.png" /> We designed a site that featured Tin Drum’s beautiful food photography and delicious dishes, as well as a full online menu and ordering system. <img width="1532" height="1206" width_o="1532" height_o="1206" data-src="https://freight.cargo.site/t/original/i/a1736ffbbc4f6b4bd2b8bf9a5b73ca3d2ec4bd354fd7ceb46cbfe3699bd4b3a7/tindrum-home-2.png" data-mid="90675419" border="0" data-scale="80" src="https://freight.cargo.site/w/1000/i/a1736ffbbc4f6b4bd2b8bf9a5b73ca3d2ec4bd354fd7ceb46cbfe3699bd4b3a7/tindrum-home-2.png" /><img width="1380" height="2288" width_o="1380" height_o="2288" data-src="https://freight.cargo.site/t/original/i/15181c18a386f1f8b42d11a2ab308f241398e9478df79a388b247c4b1bf51336/Menu-Page.png" data-mid="90675113" border="0" data-scale="71" src="https://freight.cargo.site/w/1000/i/15181c18a386f1f8b42d11a2ab308f241398e9478df79a388b247c4b1bf51336/Menu-Page.png" /><img width="1280" height="1309" width_o="1280" height_o="1309" data-src="https://freight.cargo.site/t/original/i/d68ee50f384bbe6c3ce4d46276e1a34fab2d284c27524ea150c24fd8d875a35a/Tin-Drum-Locations-Page.png" data-mid="90720011" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/d68ee50f384bbe6c3ce4d46276e1a34fab2d284c27524ea150c24fd8d875a35a/Tin-Drum-Locations-Page.png" /> The website was also designed to be fully responsive and optimized for users visiting the site via a mobile phone. <img width="2400" height="1420" width_o="2400" height_o="1420" data-src="https://freight.cargo.site/t/original/i/2ea446e964cc4f3d8100714f3ce81ad73463b7cd1dbf94788d75426adaa8db79/Home-Page-Responsive.png" data-mid="90675552" border="0" src="https://freight.cargo.site/w/1000/i/2ea446e964cc4f3d8100714f3ce81ad73463b7cd1dbf94788d75426adaa8db79/Home-Page-Responsive.png" /> For Tin Drum’s marketing materials we created playful illustration style that incorporated hand drawn elements and snapshots from various Tin Drum locations. <img width="2400" height="1600" width_o="2400" height_o="1600" data-src="https://freight.cargo.site/t/original/i/bee651f4e7caf0baefea510ee4de908ac98386f91e663d3d0f5dc019b3290754/collages-tin-drum.png" data-mid="90675809" border="0" src="https://freight.cargo.site/w/1000/i/bee651f4e7caf0baefea510ee4de908ac98386f91e663d3d0f5dc019b3290754/collages-tin-drum.png" /><img width="2400" height="1600" width_o="2400" height_o="1600" data-src="https://freight.cargo.site/t/original/i/b85dd0d1a6745347532f712041ade3a4ec1e19274bf3065cc798c24cb9c1619a/collage-tin-drum.png" data-mid="90675803" border="0" src="https://freight.cargo.site/w/1000/i/b85dd0d1a6745347532f712041ade3a4ec1e19274bf3065cc798c24cb9c1619a/collage-tin-drum.png" /><img width="1876" height="2322" width_o="1876" height_o="2322" data-src="https://freight.cargo.site/t/original/i/996073f91c1e2b39f28bb3041d307241e401600b63e5534240afea8e17b40cbf/03_tindrumcollage.jpg" data-mid="90673153" border="0" src="https://freight.cargo.site/w/1000/i/996073f91c1e2b39f28bb3041d307241e401600b63e5534240afea8e17b40cbf/03_tindrumcollage.jpg" /> <img width="1200" height="800" width_o="1200" height_o="800" data-src="https://freight.cargo.site/t/original/i/18414f257ca26964c0cb68031e86b24c9096498552862e3298dc242f90dbad7b/tshirt.jpg" data-mid="90673149" border="0" data-scale="83" src="https://freight.cargo.site/w/1000/i/18414f257ca26964c0cb68031e86b24c9096498552862e3298dc242f90dbad7b/tshirt.jpg" /> <img width="947" height="624" width_o="947" height_o="624" data-src="https://freight.cargo.site/t/original/i/5a45ec29fea7060bc3140b2b7a6d3aa2938d5536599f93887a33fd2c8102e4c1/td_brandbook-crop.jpg" data-mid="90673158" border="0" data-scale="100" src="https://freight.cargo.site/w/947/i/5a45ec29fea7060bc3140b2b7a6d3aa2938d5536599f93887a33fd2c8102e4c1/td_brandbook-crop.jpg" /> https://marielharding.com/Campside-Media Sat, 02 Nov 2019 16:01:54 +0000 Mariel Harding https://marielharding.com/Campside-Media Campside MediaBranding, Identity &nbsp; &nbsp; Campside is a group of world-class journalists creating a podcast company. Dedicated to sharing compelling non-fiction stories, they wanted to connect the dots between talented storytellers and quality podcast production. Campside came to me seeking a logo and brand strategy to help launch their new endeavor.&nbsp;My Role: Freelance Visual Designer What I designed:&nbsp; logo, branding strategy <img width="3403" height="1800" width_o="3403" height_o="1800" data-src="https://freight.cargo.site/t/original/i/b4d67fdf63dce515c374256e4723ef3f00ebfddf6f49880f3ee311f05282f49b/Campfire-studies-2-01.png" data-mid="54729195" border="0" src="https://freight.cargo.site/w/1000/i/b4d67fdf63dce515c374256e4723ef3f00ebfddf6f49880f3ee311f05282f49b/Campfire-studies-2-01.png" /> Initial logo concepts for Campside Media &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;The design brief for the logo was open, “something emblematic of....fire,” and to make sure “it doesn’t convey glamping.”&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img width="4368" height="2913" width_o="4368" height_o="2913" data-src="https://freight.cargo.site/t/original/i/a34b7043a055db83a728ec201e68c0c1a89843f06f891bbffeec73bfb78068c2/card-campside.jpg" data-mid="54371476" border="0" src="https://freight.cargo.site/w/1000/i/a34b7043a055db83a728ec201e68c0c1a89843f06f891bbffeec73bfb78068c2/card-campside.jpg" /> After exploring a variety of concepts, we landed on a simple, yet curvacious icon of fire in a “magenta” red and black color scheme. <img width="3744" height="5528" width_o="3744" height_o="5528" data-src="https://freight.cargo.site/t/original/i/eef80a2f1cd5bb27ffbcb1c4dcb584cf7be3710be1ecbbaee557b8cc83708a0a/campside-shirt.jpg" data-mid="54371434" border="0" data-scale="99" src="https://freight.cargo.site/w/1000/i/eef80a2f1cd5bb27ffbcb1c4dcb584cf7be3710be1ecbbaee557b8cc83708a0a/campside-shirt.jpg" /> <img width="3724" height="5586" width_o="3724" height_o="5586" data-src="https://freight.cargo.site/t/original/i/73b88a2eddfedb0d27de3b45645de996bd3a9083f9a9e2473fbabd90f58c3aea/iphone-twitter.jpg" data-mid="54371442" border="0" data-scale="98" src="https://freight.cargo.site/w/1000/i/73b88a2eddfedb0d27de3b45645de996bd3a9083f9a9e2473fbabd90f58c3aea/iphone-twitter.jpg" /> <img width="2956" height="4434" width_o="2956" height_o="4434" data-src="https://freight.cargo.site/t/original/i/3a6294c4ee756dbb7c00851c89744328a0bbd28534192177b9f77fe12a8eac12/campside-buttons.jpg" data-mid="54371433" border="0" src="https://freight.cargo.site/w/1000/i/3a6294c4ee756dbb7c00851c89744328a0bbd28534192177b9f77fe12a8eac12/campside-buttons.jpg" /> <img width="5597" height="3731" width_o="5597" height_o="3731" data-src="https://freight.cargo.site/t/original/i/d8e4c9912daa8d65c29bfb83248b88505b127e982df4242500dd1ce2fd0b8a3d/campside-ipad.jpg" data-mid="54371435" border="0" src="https://freight.cargo.site/w/1000/i/d8e4c9912daa8d65c29bfb83248b88505b127e982df4242500dd1ce2fd0b8a3d/campside-ipad.jpg" /> <img width="5760" height="3840" width_o="5760" height_o="3840" data-src="https://freight.cargo.site/t/original/i/b215223244b3f93a37c599a2f09dc7a75b4b02fedb8e3319270e11bd86860bee/campside-icon-card.jpg" data-mid="56821890" border="0" src="https://freight.cargo.site/w/1000/i/b215223244b3f93a37c599a2f09dc7a75b4b02fedb8e3319270e11bd86860bee/campside-icon-card.jpg" /> https://marielharding.com/MCI-Construction Tue, 18 Aug 2020 16:49:27 +0000 Mariel Harding https://marielharding.com/MCI-Construction MCI Construction branding &nbsp;&nbsp;Branding and website concept for a new construction company, MCI.My Role: Freelance Visual Designer What I designed:&nbsp; logo, website concepts, brand applications <img width="1998" height="1304" width_o="1998" height_o="1304" data-src="https://freight.cargo.site/t/original/i/0d8af063fedd2fb8787c77699824fd7748d7cad002300b5019eafca24a59f338/MCI_bl_logo_2-01.png" data-mid="80223609" border="0" data-scale="82" src="https://freight.cargo.site/w/1000/i/0d8af063fedd2fb8787c77699824fd7748d7cad002300b5019eafca24a59f338/MCI_bl_logo_2-01.png" /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Initially, I strove to include a building in the logo lockup but eventually we arrived happily at a much simpler and versatile set of initials that still conveys a feeling of construction. &nbsp; &nbsp;<img width="1089" height="666" width_o="1089" height_o="666" data-src="https://freight.cargo.site/t/original/i/b68238b2a4e803a2dab12d819a9f839e3271da628899b7a284b4332103d470d2/MCI-logo-02.png" data-mid="80223264" border="0" src="https://freight.cargo.site/w/1000/i/b68238b2a4e803a2dab12d819a9f839e3271da628899b7a284b4332103d470d2/MCI-logo-02.png" /> Initial logo ideas for MCI. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;For the brand applications, I decided to really embrace the color of “safety orange,” and went with strong pops of orange color and paired with restrained typography. <img width="3744" height="5616" width_o="3744" height_o="5616" data-src="https://freight.cargo.site/t/original/i/6af71ba844ccf13ddb22c4a3d120886bf4faaa3cc1ebe4de3dae1c77a9698d05/MCI-wall.jpg" data-mid="80233139" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/6af71ba844ccf13ddb22c4a3d120886bf4faaa3cc1ebe4de3dae1c77a9698d05/MCI-wall.jpg" /> <img width="4000" height="3200" width_o="4000" height_o="3200" data-src="https://freight.cargo.site/t/original/i/826c514cd76e18e0c413abc370801443180b02d727c9e7649b8506444b7fdd9d/MCI-card.jpg" data-mid="80245457" border="0" src="https://freight.cargo.site/w/1000/i/826c514cd76e18e0c413abc370801443180b02d727c9e7649b8506444b7fdd9d/MCI-card.jpg" /> <img width="1397" height="910" width_o="1397" height_o="910" data-src="https://freight.cargo.site/t/original/i/9d60ea7383987f9f1d910bc619f45047dd8950c317f9f26def38529cfb353bdc/MCI_website-01.png" data-mid="80246586" border="0" data-scale="79" src="https://freight.cargo.site/w/1000/i/9d60ea7383987f9f1d910bc619f45047dd8950c317f9f26def38529cfb353bdc/MCI_website-01.png" /> <img width="5760" height="3839" width_o="5760" height_o="3839" data-src="https://freight.cargo.site/t/original/i/5f4697854cbc31bd29f55c0c6bd36828cb12c9a199b79200ba6005684c49ed4b/MCI-hat.jpg" data-mid="80248146" border="0" src="https://freight.cargo.site/w/1000/i/5f4697854cbc31bd29f55c0c6bd36828cb12c9a199b79200ba6005684c49ed4b/MCI-hat.jpg" />