ZURB The ZURBlog is where we discuss design interaction and strategy. We use design thinking to challenge businesses and designers to improve the products and services they create. http://zurb.com/blog/posts en-US zurb/bloghttps://feedburner.google.com A Growing Foundation Family: Foundation for Sites 5.5 is Here <img src="http://www.zurb.com/blog/system/images/1481/original/yetis3.png?1418428368" alt="Illustration of the two Yetis together"/> <p>There are so many amazing things happening with Foundation right now and we're excited to share it all. Hot on the heels of <a href="http://foundation.zurb.com/apps/">Foundation for Apps</a>, we released an amazing update for <a href="http://foundation.zurb.com/">Foundation for Sites</a>. This release, v5.5, brings some great updates and lots key fixes. On top of that, the community stepped up with some well-written pull requests that allowed us to really strengthen this release.</p> <h3 class="regular" id="foundation-community-crushes-it">The Foundation Community Crushes It!</h3> <p>Previously we talked about how the <a href="http://zurb.com/article/1350/5-ways-the-foundation-community-br-is-cru">Foundation community is crushing it</a>. The big challenge: dropdowns that weren't behaving like they were supposed to, breaking out of the page boundaries. Five different people submitted their versions of a fix for this hard issue. After weeks of going through multiple iterations with the different attempts, a hero emerged: <a href="http://www.tangerineindustries.com/">Corey Snyder</a>, who submitted <a href="https://github.com/zurb/foundation/pull/5986">a pull request with a great solution</a>. We tested it in many different browsers and devices, and found it's a huge improvement and now dropdowns stay in the viewport much better. A big thanks to Corey!</p> <p>This is what we love about our community! On top of this huge win came many other fixes If you're into all the details, see them <a href="http://foundation.zurb.com/docs/changelog.html">here.</a></p> <ul> <li>Abide got some some love and now validations work better.</li> <li>Split buttons can now support <a href="https://github.com/zurb/foundation/commit/9f0b4b9d3705835b012dc62c74b71a7160344509">2 different events</a></li> <li>And Accordions <a href="https://github.com/zurb/foundation/commit/18cef991f9a50acf2c78652b4a2641b80889d2b0">no longer tied</a> to <code>dd</code> and <code>dt</code> elements.</li> <li>Dropdowns now <a href="https://github.com/zurb/foundation/commit/8563604b8fcf1292956bc4a08677ef3a3fa7c79f">automatically close</a> when a link is clicked</li> </ul> <p>&hellip;and a bunch of other great improvements.</p> <h3 class="regular" id="unified-front">A Unified Front for a Common Problem</h3> <p>The new Foundation for Apps and Sites really compliment each other. That's why we are making Foundation a family of tools for responsive design. Building a responsive web app with Foundation for Apps? You'll need a sweet marketing site for smooth on-boarding and dialed in SEO. Because of this, we will continue improving Foundation with your help. All of us will need to make responsive sites for years to come, and Foundation will continue to evolve to solve current and new problems. </p> <p>Given the <a href="http://zurb.com/quips/2451">ever increasing</a> mobile search traffic it's crazy that <em>only</em> <a href="http://www.guypo.com/rwd-2014/">18.7% of the top 100</a> sites are responsive! That's a huge opportunity for growth and we'll continue to need the right tools to feed this revolution. Some of the industries that have the <a href="http://www.marketingweekly.com/web-strategy/top-3-industries-for-responsive-web-design/?mode=featured">largest growth potential</a> are news providers, banking, and academic institutions. Perhaps the largest sector for growth opportunity is in E-commerce. According to an <a href="http://http://zurb.us/1vxzN7S/">article by Inc.com</a> going responsive increases average conversion 10.9%. <h3 class="regular" id="looking-forward">Looking Toward the Future</h3> <p><a href="http://zurb.com/article/1280/foundation-5-blasts-off--2/">Since Foundation for Sites (5.0)</a> was released Nov 22, 2013, there have been <a href="https://github.com/zurb/foundation/compare/v5.0.0...master">2895 commits</a>! We're stoked to have such awesome community support and it encourages us to push the limits of what this framework can be. As the 5.5 release makes Foundation for Sites a more solid codebase we can look toward the next version of Foundation. There's a huge community 'wishlist' on GitHub that we're watching watching and commenting on. Additionally we can talk about just a few items on our roadmap.</p> <ul> <li><strong>The entire family on one CLI</strong> &#8212; Wouldn't it be rad if you could whip up a Site, App, or Email project with one simple command? It would save setup time and resources. We also think less dependencies would be nice.</li> <li><strong>Re-factor the Foundation JavaScript</strong> &#8212; A lot of the remaining issues revolve around how the Foundation JS components work with each other and how they work in a single-page-app. Taking a queue from Foundation for Apps, we'll make the JS API uniform across all components. This means each component uses the same code to open, close, and toggle.</li> <li><strong>Get less specific</strong> &#8212; Foundation is great for staying out of your way when you're ready to style your site. It can be better. Certain components will get a thorough cleaning to make the selectors less specific.</li> </ul> <p>These are just a few of the great improvements to come with the next Foundation for Sites.</p> <p>As we move forward with Foundation for Sites, we will continue to bug-fix and improve the existing components. We learned a lot out of building Foundation for Apps from the ground up and came up ways to make Foundation easier to use and learn, how to make better UI plugins, and how to make the different versions of Foundation to act, well, more like a family. As the needs of our community continue to evolve, so will the tools we need to create superior responsive sites. The future of Foundation is very exciting!</p><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/zurb/blog?a=HLmM-uyvG4E:pn47NQ9UuXk:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/zurb/blog?d=yIl2AUoC8zA" border="0"></img></a> </div> Fri, 12 Dec 2014 15:02:00 -0800 http://feedproxy.google.com/~r/zurb/blog/~3/HLmM-uyvG4E/1364 http://zurb.com/blog/1364 http://zurb.com/blog/1364 100 Days in Tavern <img src="http://www.zurb.com/blog/system/images/1478/original/Tavern_Light_Bulb.png?1418337699" alt="light bulb of ideas"> <p><a href="http://www.zurb.com/tavern">Tavern</a> began with this goal: challenge our fellow designers to define the broader, fuzzier concepts or product design. We'd do this by debating a single question a day, exchanging ideas on what it means to be a product designer. A question that had to be asked and answered in the ticking clock of 24 hours. More than a 100 days later and after some 5,000 contributions, our comrades in design ran with the challenge. </p> <p>Some articulate and outstanding designers, such as <a href="http://zurb.com/tavern/users/ren-walker">Ren Walker</a>, <a href="http://zurb.com/tavern/users/bryce-howitson">Bryce Howiston</a>, and <a href="http://zurb.com/tavern/users/antonin-januska">Antonin Januska</a>, are questioning and challenge ideas, which is <a href="http://zurb.com/article/1357/are-you-ready-to-become-a-product-designe">the core of being a product designer</a>. And that's exactly what Tavern is about. The community is shaping up to be the place, as well as the structured environment, that is giving extreme focus on aspects of product design that aren't always easy to articulate, for everyone building product &mdash; from designers to managers to marketers. </p> <h3 class="regular">A Product Design Question a Day</h3> <img src="http://www.zurb.com/blog/system/images/1480/original/Tavern_Question.png?1418337846" alt="Asking a question"> <p>Of all the folks we've let into Tavern, not all are designers. There are folks who are involved in every aspect of building product. There are CTOs, design managers, creative directors, engineers, developers, CEOs, marketers, and business developers. With all those folks, centering Tavern around a <a href="http://zurb.com/article/1327/a-product-design-question-a-day-introduci">single product design question a day</a> allowed us to focus ourselves &mdash; and the community &mdash; around an answer we could frame. </p> <p>The new format has provided an arena for some truly thought-provoking answers that go beyond <a href="http://zurb.com/article/1323/the-dribbblification-of-design-and-what-w">the rah-rah comments</a> typically found on portfolio sharing sites. Not that there's anything wrong with those sites, but they can't easily showcase the way you think about the design problems. </p> <p>The frame of one question in 24 hours has given us and others a space to quickly give insight into how they thought about design in shorter bursts. There have been specific questions to more abstract ideas, such "Is Design Art?" and we've tried to balance with specific, technical questions, such as: </p> <div style="padding-left: 50px;"> <p><strong>What is your preferred CMS? </strong></p> <p>Tavern-goer Jan wanted to know <a href="http://zurb.com/tavern/q/0f46d738-e779-4b1a-84ca-59a2b7d324dd">what CMS people preferred to work with and why</a>. We had 66 answers and comments. Some preferred WordPress while others took the stance that it was project dependent. But what we learned the most is that everyone has a preference that's almost like why some people prefer Coke to Pepsi. </p> <p><strong>Do tools like Macaw, Reflow, Webflow have a place in a designer's tool kit?</strong></p> <p>Another Jan on Tavern (yep, there are two of them!) asked <a href="http://zurb.com/tavern/q/33313252-2a55-4c7d-a1c3-439dd0ebf5ac">about whether his fellow Tavern-goers used those specific tools in their workflow</a>. Some thought they did. Others not so much, finding that they weren't an adequate replacement for Photoshop. </p> </div> <p>And a few of our broader questions: </p> <div style="padding-left: 50px;"> <p><strong>What's your job title? </strong></p> <p>What's in a title, a job by any other name. Kidding aside, one of our most prolific Tavern-goers Ren <a href="http://zurb.com/tavern/q/737fc86b-07ad-467c-a599-5f610cc9c73d">asked folks to tell her their job title</a> and whether it accurately covered what they actually did. It was one of our most popular questions with 154 answers and comments! But the biggest takeaway &mdash; there wasn't one job title to rule them all! </p> <p><strong>How do you overcome your fear of asking questions and looking like you're inexperienced? </strong></p> <p>Rhia wanted <a href="http://zurb.com/tavern/q/6d89373f-7321-439b-bb80-7bc7590d50e4">some advice on how to ask questions</a> without looking like a n00b. Alicia had the top answer that day with the advice: "The discomfort of asking a question can last a few seconds. The discomfort of not knowing the answer can last a lifetime."</p> </div> <p>There's been a deluge of submitted questions with over a month queue in the backlog, all of them generated by the community, which is shaping up to be much much more than just a group of folks answering design questions. </p> <h3 class="regular">The What-You-Know Design Network</h3> <p>Tavern isn't just about answering a question. It's also about showcasing what you know. Because, let's face it, we all like to show off just a little. However, it's much deeper than that. Through their answers, designers are giving proof that they know what they are talking about. And they can get validation of their ideas from the community. </p> <p>Each person has a single point total based on the upvotes of contributors. Designers in Tavern are building or reinforcing their reputation as experts in their given field, through writing and debating. Right now, profiles are private as we work to build the site. However, we intend to help designers establish their know-how among their peers. </p> <img src="http://www.zurb.com/blog/system/images/1477/original/Ren.png?1418337688" alt="ren walker's profile"> <br/><br/> <p>From more than 16 years of practice, we've found that it's not enough to talk about ideas and concepts. You have to <a href="http://zurb.com/article/1359/the-right-brain-myth">commit to writing them down</a>. Tavern is the place where designers can practice that. And many of them are already doing just that. </p> <p>Bryce had the <a href="http://zurb.com/tavern/q/c42a5b76-8c09-43f2-9fb1-6e53e64cb8ee/a2148">top answer</a> not to long ago on our question on whether design requires a degree. Here's what he had to say: </p> <blockquote>Does a design degree equal ability to do a job? I'd say that's a resounding no! We've all meet people with degrees in various things who aren't fit to be hired.</blockquote> <p>Bryce added that he thought there is value to getting a degree, and listed in detail his reasons for thinking so.</p> <p>Laura, one of our prolific Tavern-goers, had <a href="http://zurb.com/tavern/q/d9793819-ef4b-44e7-ac55-aac6ad9ed4f1/a1231">a very good response</a> to a question on handling public criticism on open-source projects. While her answer wasn't voted the top answer that day, what she had to say was really valuable: </p> <blockquote>No matter the openness of the project, <strong>one should always embrace critique</strong> because a fresh set of eyes helps identify issues (most of the times). As people we always believe our input is the best, most insightful and utterly helpful to the recipient ... but as feedback-givers we should also know how to <strong>phrase that critique to say exactly what we want to say without being a bully</strong>.</blockquote> <h3 class="regular">Building the Future of Tavern </h3> <img src="http://www.zurb.com/blog/system/images/1479/original/Tavern_Gears.png?1418337709" alt="gears"> <p>We're innovating as we go and that's exciting! And we're learning a lot about what makes a great arena for designers to debate. </p> <p>We're learning more about the types of questions that apply to people. Broader questions covering the life of being a designer are crowd-pleasers and send engagement through the roof. Specific questions ask how you do your job tend to get fewer answers, but the depth of the questions are some of the best we've seen online. Eventually this will be an incredible resource for people who are learning product design as we add search. </p> <p>There have been insights in how people engage with the question of the day. Mondays are big days for contributions as people come off the weekend. If there's a seemingly good answer, or a "right" one, others feel that there isn't anything left to say. So they sit back and lurk, or merely comment on someone's answer. However, product design rarely afford the best answer right off the bat and some ideas are fuzzier than others. And questions can be hard for some to answer. We had a question on what would make designers leave a job and one person said he didn't want to answer because their co-workers might catch a glimpse of his answer. </p> <p>We're taking these lessons as we continue to work with designers in Tavern to grow the concept. Our goal is to give product designers a voice in the direction of the site. We've brainstormed a lot internally on the next features and common elements, including making Tavern more searchable. We've also considered how to bring more depth to the discussion without having to increase the overall commitment each day.</p> <p>We're letting designers into Tavern each week. If you're interested in sharing your experience and learning from others, request an invitation to join Tavern!</p> <div class="radius panel"> <form action="http://zurb.createsend.com/t/y/s/aatuu/" method="post"> <h5>Request an invitation to join Tavern:</h5> <div class="row collapse"> <div class="large-6 columns"> <input id="fieldEmail" name="cm-aatuu-aatuu" placeholder="Email address" type="email" required> </div> <div class="large-4 left columns"> <button type="submit" class="green button" style="padding: 8px 20px 8px;">Get Invited</button> </div> </div> </form> </div><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/zurb/blog?a=GV-W2fmQuwU:x4Yz6bBtK6U:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/zurb/blog?d=yIl2AUoC8zA" border="0"></img></a> </div> Thu, 11 Dec 2014 15:00:00 -0800 http://feedproxy.google.com/~r/zurb/blog/~3/GV-W2fmQuwU/1363 http://zurb.com/blog/1363 http://zurb.com/blog/1363 Foundation for Apps is Here! <a href="http://foundation.zurb.com/apps"><img src="http://www.zurb.com/blog/system/images/1473/original/blog-post-image.png?1417710979" alt="foundation for apps"></a> <p>The wait is over. Foundation for Apps is here. </p> <p>We've teased and teased you all over the past five months. But today is the day. We're stoked to finally release the newest member of the Foundation family and the first front-end framework created solely for building fully-responsive web apps. Now you'll be able build any kind of web app with one set of code.</p> <p>We've chronicled the journey from our new take on a grid, to the introduction to Motion UI, to our integration of MVC frameworks &mdash; and many of you followed along. We had tons of people reach out and help us make some huge, tough decisions. While it's been a long road with lot of planning, tons of code and a few restarts, we're really proud of what we've created with the help of our amazing contributors. And now we can't wait for you all to get your hands on it.</p> <p>We'd like to thank everyone who has helped us over the past few months with their feedback and assistance. With your help, we've created the first framework devoted to develop better, more polished responsive web apps. And we're looking forward to your help in continuing to grow Foundation for Apps. For now, we're pleased to show off the fruit of everyone's labors.</p> <a href="http://foundation.zurb.com/apps">Explore the New Foundation for Apps</a> <h3 class="regular">A New Grid</h3> <p>We love rows and columns. However, once a grid does truly flexible things &mdash; like swap between horizontal and vertical or move entire sections off-screen at different screen sizes &mdash; rows and columns don't work so well.</p> <p>Creating a new grid that handles complex, responsive, mobile-optimized and desktop-smart apps was one of our main goals. The new grid is based on Flexbox which, in addition to being cool, can be confusing. Foundation for Apps takes care of most of that complexity and gives some really great power to create complicated grids.</p> <a href="http://foundation.zurb.com/apps/docs/#!/grid">Check out the Grid</a> <h3 class="regular">Motion UI</h3> <p>Motion was a huge trend in 2014 &mdash; and it'll only get more popular in the coming year. So we created Motion UI to add movement to your web app with ease. This new set of classes and mixins helps you quickly add animations to your app. It also has easy motion-modifying classes that control the speed, delay and easing. </p> <p>But that's just the beginning. From there we added motion classes to view-swapping so you can add transitions between sections of your app. Then we added motion classes to certain components like modals, panels and notifications, so users can change the default animations to any of our pre-made ones &mdash; or even a custom one.</p> <a href="http://foundation.zurb.com/apps/docs/#!/motion-ui">Check out Motion UI</a> <h3 class="regular">Single-Page Web Apps</h3> <p>Apps need to be fluid &mdash; and page reloads can spell the death of a web app. For that reason, MVC frameworks have been wildly successful, and we decided it was the way to go. We got some good advice from our users and ZURB Studios clients on what to use. After getting their feedback, we went with AngularJS.</p> <p>Angular allowed us to templatize routing, making it super easy for anyone to create a single-page app without knowing JavaScript. We also converted our plugins to Angular directives, which makes creating components super fast: just prefix the component's name with zf- , and you're done.</p> <a href="http://foundation.zurb.com/apps/docs/#!/angular">Check out our Angular integration</a> <h3 class="regular">And One More Thing ... </h3> <p>We've done tons more with Foundation for Apps, and there are tons more we want to do in the near future. We're champing at the bit for all you wonderful people to start using our new framework and to get your feedback (or pull requests) on what we can do to make it even better.</p> <a href="http://foundation.zurb.com/apps" class="large green button">Get the new Foundation for Apps</a> <form action="http://zurb.createsend.com/t/y/s/axljt/" method="post" style="margin-top: 1.5em; padding: 1.5rem 1.5rem 0; background: #f4f4f4; border-radius: 3px;"> <h5 style="margin-bottom: 1rem;"><strong>Stay up to date with Foundation for Apps:</strong></h5> <div class="row"> <div class="large-6 columns"> <label for="fieldName">Name</label> <input id="fieldName" name="cm-name" type="text" /> </div> <div class="large-6 columns"> <label for="fieldEmail">Email</label> <input id="fieldEmail" name="cm-axljt-axljt" type="email" required /> </div></div> <button type="submit" class="green button">Get in Touch</button> </form><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/zurb/blog?a=NfW9Cc0YVbE:Zq0G_pzsKVk:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/zurb/blog?d=yIl2AUoC8zA" border="0"></img></a> </div> Thu, 04 Dec 2014 12:10:00 -0800 http://feedproxy.google.com/~r/zurb/blog/~3/NfW9Cc0YVbE/1362 http://zurb.com/blog/1362 http://zurb.com/blog/1362 Our New Angular Engineer Gives Us a Stronger Foundation <p>Often confused as a boy band runaway because of her gravity-defying hair and her tendency to belt out pop songs, our newest ZURBian's interests actually skew toward visiting aquariums and playing video games. So with that, please say hello to &hellip;</p> <h3 class="regular" id="jeanie-chung">Jeanie Chung, Angular Engineer </h3> <img src="http://www.zurb.com/blog/system/images/1472/original/jeanie-bio-pic.jpg?1417651179" alt="Photo of Jeanie Chung, our newest Angular JS engineer" /> <p>Jeanie hails from South Korea, but grew up in Chicago. She attended Washington University &#8212; the one in St. Louis, MO. After deciding that med school was not the life for her, Jeanie switched into engineering and earned a Bachelor's in Systems Engineering. Following her interest in the health sector's big picture, she became convinced that her goal was to save the world with engineering and public health.</p> <p>Things took a turn when she applied her engineering smarts and took a job at Razorfish, her first foray into web design. But it was hard to ignore her passion for public health, so she took a position at Northwestern University in Chicago with the Center for Behavioral Intervention Technologies (CBITS). There she would build apps and websites for collaborators and researchers, who aimed to address health behavior issues through technology. Her supervisor at CBITS loved to experiment with new technologies and frameworks. Jeanie soon found herself hacking through Angular JS, and although it was tough to get started, she soon learned its many ins and outs.</p> <p>When Jeanie rebuilt her personal website on Foundation and Angular, she began reverse-engineering our framework. That also prompted her to learn about ZURB. This led to a pretty great match where Jeanie can happily help us up our AngularJS game in Foundation for Apps alongside other ZURBians.</p> <p>So everyone please welcome Jeanie, our newest engineer!</p><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/zurb/blog?a=MdzbKau1OSQ:dS5xsqv8VMI:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/zurb/blog?d=yIl2AUoC8zA" border="0"></img></a> </div> Wed, 03 Dec 2014 14:07:00 -0800 http://feedproxy.google.com/~r/zurb/blog/~3/MdzbKau1OSQ/1361 http://zurb.com/blog/1361 http://zurb.com/blog/1361 2014 Design Award <a href="http://aiascv.org/design-awards/2014-design-award-winners/"><img src="http://www.zurb.com/blog/system/images/1463/original/zurb-building1.jpg?1417378847"></a> <p>Last year we moved into a fantastic new space after spending a year renovating a worn down, multi-tenant space. Today we're happy to share that our building was honored with a <a href="http://aiascv.org/design-awards/2014-design-award-winners/">2014 Design Award by the American Architects Institute of Santa Clara County</a> (home to some of the most recognized technology companies in Silicon Valley). </p> <p>We'd like to thank our architect and congratulate <a href="http://www.modulus.com/">David Fenster and Modulus</a> for an amazing job. After working in the space for the past year, we can attest to David's work as it continues to surpass the test of time! It's an amazing space and we're thankful everyday for the opportunity to work in a building specifically designed around the needs of our business.</p> <h3 class="regular">Interior Spaces Designed for Designers</h3> <p>After spending many afternoons learning and observing how we worked, Modulus was able to design different spaces for the needs of our team. They spent countless hours going back and forth with us discussing everything from lighting to acoustics. It was incredible. Designing for a bunch of designers isn't the easiest of jobs.</p> <p>Each room has a specific purpose and it provides our employees opportunity to spread out. Below are a few interior photos.</p> <p class="caption"><img src="http://www.zurb.com/blog/system/images/1464/original/zurb-building2.jpg?1417378859">One of our many brainstorm rooms- this one is called Dream is Collapsing.</p><br /><br /> <p class="caption"><img src="http://www.zurb.com/blog/system/images/1465/original/zurb-building3.jpg?1417378907">A view of the kitchen and eating area, the hub of our workspace.</p><br /><br /> <p class="caption"><img src="http://www.zurb.com/blog/system/images/1466/original/zurb-building4.jpg?1417378925">The Friday room is for meetings and guests.</p><br /><br /> <h3 class="regular">A Multi-Purpose Space</h3> <p>The design, city approval process and construction took well over a year to finish. By the end of the process, it started to get hard making constant decisions, but the team stayed focused up until the end.</p> <p class="caption"><img src="http://www.zurb.com/blog/system/images/1467/original/zurb-building-layouts.png?1417378953"> Here's the floorplan of the two story, 12,500 sq ft. building.</p> <p>The space has been used in many different ways. In the past year we <a href="http://zurb.com/article/1210/best-field-trip-ever-it-s-never-too-early">taught elementary students about design thinking<a/>, ran a <a href="http://zurb.com/article/1266/designers-ignite-a-revolution-in-health-c">healthcare hack-a-thon, <a href="http://zurb.com/article/1342/all-heart-and-no-sleep-mobilizing-nonprof">finished our 7th ZURB Wired</a>, and hosted numerous <a href=http://zurb.com/soapbox">Soapbox speakers</a>. <h3 class="regular">Before the Renovation</h3> <p>For those that are interested, we <a href="http://zurb.com/article/1054/a-peek-into-zurb-s-new-headquarters">captured some pre-construction and building images</a> in a previous blog post. As you can see, the team did an amazing job turning this old clunker into an amazing space!</p> <p class="caption"><a href="http://zurb.com/article/1054/a-peek-into-zurb-s-new-headquarters"><img src="http://www.zurb.com/blog/system/images/1468/original/pre-constuction-building.jpg?1417379864"></a><p class="caption"><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/zurb/blog?a=_LD8seWkekQ:x8gK_G63plg:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/zurb/blog?d=yIl2AUoC8zA" border="0"></img></a> </div> Sun, 30 Nov 2014 12:15:00 -0800 http://feedproxy.google.com/~r/zurb/blog/~3/_LD8seWkekQ/1360 http://zurb.com/blog/1360 http://zurb.com/blog/1360 The Right Brain Myth <img src="http://www.zurb.com/blog/system/images/1457/original/right-brain-myth2.png?1416955068"> <p>Designers have been told that they have a gift, or are somehow different or more creative. They've been classified as right-brain thinkers. We know the brain is divided into two hemispheres &mdash; the common notion, psychologically, is that the left side of the brain holds language and is more logical, while the right brain is more creative. <a href="http://ideas.time.com/2013/11/29/there-is-no-left-brainright-brain-divide/">The problem is, it's not true.</a> </p> <p>Creatives are right brain dominant, or so the theory goes. Over time we've perpetuated a myth that designers have been given special creative talents. It's hurting our ability to create great products. </p> <h3 class="regular">Moving Beyond Creative Stereotypes</h3> <p>Research has shown that it's not that simple. <a href="http://www.npr.org/blogs/13.7/2013/12/02/248089436/the-truth-about-the-left-brain-right-brain-relationship">We use our whole brain</a>. In our last <a href="http://zurb.com/article/1355/we-ve-lost-the-guts-to-think">article on gut-thinking</a>, we discussed the problem with companies not trusting designers &mdash; part of this lack of trust is built on the myth that creatives might lack the sense of logic or reason that comes with left-brain thinking. Designers perpetuate this logic by suggesting they have 'taste' and are better at all the user stuff. </p> <p>Taste is a component of design, for sure, but a more significant problem facing designers is that they're not learning to bring experiences together. There is research to perpetuate the idea that some are creatively gifted, but it's not because of their talents, but the <a href="https://people.goshen.edu/~marvinpb/11-13-01/Effects-of-Stereotypes.html">socialization that happens in our education system</a>:</p> <blockquote> Of 1,600 children aged three to five who were tested, 98% showed they could think in divergent ways. By the time they were aged eight to 10, 32% could think divergently. When the same test was applied to 13 to 15-year-olds, only 10% could think in this way. And when the test was used with 200,000 25-year-olds, only 2% could think divergently . . . Education is driven by the idea of one answer and this idea of divergent thinking becomes stifled.</blockquote> <p>Designers need to bring divergent thinking to organizations. They also need to find the overlap in critical thinking in different parts of an organization. To create real impact and success in companies, designers are going to have to work much harder at <a href="https://blog.bufferapp.com/connections-in-the-brain-understanding-creativity-and-intelligenceconnections">connecting their own experiences across disciplines</a> to create value for users.</p> <h3 class="regular">What We Know About the Brain</h3> <img src="http://www.zurb.com/blog/system/images/1458/original/what-we-know-brain.png?1416955077"> <p>The right brain, <a href="http://psychology.about.com/od/cognitivepsychology/a/left-brain-right-brain.htm">according to the left-brain, right-brain dominance theory</a>, is best at expressive and creative tasks. Abilities popularly associated with the right side of the brain include: recognizing faces; expressing emotions; music; reading emotions; color; images; intuition; and creativity. The left side of the brain is considered to be adept at tasks that involve logic, language and analytical thinking. The left-brain is described as being better at language, logic, critical thinking, numbers, and reasoning.</p> <p>While many of these core functions have their roots in a specific portion of the brain, the science is actually much more complex. The connective tissues that bind the left and right brain play a large role in amplifying thoughts:</p> <blockquote>It turns out though, that we use virtually every part of the brain, and that [most of] the brain is active almost all the time. Let's put it this way: the brain represents three percent of the body's weight and uses 20 percent of the body's energy. - Neurologist Barry Gordon of Johns Hopkins School of Medicine, <a href="http://psychology.about.com/od/biopsychology/a/myths-about-the-brain.htm">Scientific American</a> </blockquote> <p>The <a href="http://en.wikipedia.org/wiki/Corpus_callosum">corpus callosum</a> carries electrical signals between both sides of the brain. It stretches nearly the full length of the brain from behind the forehead to the back of the neck and is the dense network of neural fibers that make brain regions with very different functions work together. This part of the brain, however, is still a great mystery as scientists try to figure out how this complex network of neural fibers works. </p> <h3 class="regular">The Einstein Genius </h3> <p>A <a href="http://articles.latimes.com/2013/oct/10/science/la-sci-einstein-brain-connectedness-20131010">recent study on Einstein's brain</a> found that he had a larger corpus callosum than the average person. Interestingly, Einstein was an excellent musician and some studies have suggested that his interest in music may have contributed to this abnormality. <a href="http://www.goodreads.com/author/show/9810.Albert_Einstein">Einstein stated</a>, 'If I were not a physicist, I would probably be a musician. I often think in music. I live my daydreams in music. I see my life in terms of music.' </p> <p>What's interesting about one of the greatest thinkers of the last century is how he thought.</p> <blockquote>Einstein first described his intuitive thought processes at a physics conference in Kyoto in 1922, when he indicated that he used images to solve his problems and found words later (Pais, 1982). Einstein explicated this bold idea at length to one scholar of creativity in 1959, telling Max Wertheimer that he never thought in logical symbols or mathematical equations, but in images, feelings, and even musical architectures. -Michele and Robert Root-Bernstein, <a href="http://www.psychologytoday.com/blog/imagine/201003/einstein-creative-thinking-music-and-the-intuitive-art-scientific-imagination">Psychology Today</a> </blockquote> <p>One of the world's greatest thinkers thought in images. Amazing! But what is of more interest to designers is that he found words later. Today we might define this way of thinking as <a href="http://zurb.com/article/1349/the-problem-with-design-thinking-is-that-">design thinking</a>.</p> <p><a href="http://articles.latimes.com/2013/oct/10/science/la-sci-einstein-brain-connectedness-20131010">Another finding from the research</a> on Einstein's brain suggested that his genius may not have been caused by the size of his brain. Rather his brain was larger in those connected areas between hemispheres because he exercised those areas more than the average person. Researchers have found that enriched learning environments can help contribute to <a href="http://psychology.about.com/od/biopsychology/f/adult-neurogenesis.htm">the survival and integration of new brain cells</a>. It seems that genius maybe rooted in working different parts of the brain with regularity.</p> <h3 class="regular">Expanding our Design Literacy</h3> <img src="http://www.zurb.com/blog/system/images/1459/original/brain-divided.png?1416955086"> <p>Product designers must practice and expand the critical thinking parts of their brain to reach the rest of their organizations. Critical thinking becomes a bridge to connect with employees who might have been conditioned by society, traditional schooling and corporate structures to only think analytically. Designers can facilitate design thinking, but they need to overlap their experiences with the knowledge that organizations already hold, specifically critical thinking.</p> <p>Designers have the ability to show the rest of the organization how to bring experiences to the forefront &mdash; <a href="https://blog.bufferapp.com/why-we-have-our-best-ideas-in-the-shower-the-science-of-creativity">they practice more than the average worker to bring creativity to their work.</a></p> <blockquote>Artists showed lower activity in part of their frontal lobes called the dorsolateral prefrontal cortex during improvisation, and increased activity in another area, called the medial prefrontal cortex. The areas that were found to be 'deactivated' are associated with regulating other brain functions. </blockquote> <p>Design literacy across a business is necessary if companies are to become more design centric. At ZURB, we've been using <a href="http://zurb.com/article/1349/the-problem-with-design-thinking-is-that-">progressive design</a> to bring the knowledge of a team into the design process. Making connections is key to making this happen, as Steve Jobs eloquently captured in this 1996 Wired article: </p> <blockquote><p>Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn't really do it, they just saw something. It seemed obvious to them after a while. That's because they were able to connect experiences they've had and synthesize new things. And the reason they were able to do that was that they've had more experiences or they have thought more about their experiences than other people.</p> <p>Unfortunately, that's too rare a commodity. A lot of people in our industry haven't had very diverse experiences. So they don't have enough dots to connect, and they end up with very linear solutions without a broad perspective on the problem. The broader one's understanding of the human experience, the better design we will have. &mdash; <a href="http://archive.wired.com/wired/archive/4.02/jobs_pr.html">Steve Jobs</a></p></blockquote> <p>While the vast majority of workers stay siloed in their organizations, most designers are guilty of failing to learn across the organization. The over productionalization of design forces most organizations into a factory line of critical thinking, which kills innovation.</p> <p>So where do we start? Practice.</p> <h3 class="regular">Designer Practice Makes Designer Perfect</h3> <img src="http://www.zurb.com/blog/system/images/1460/original/brain-drawing.png?1416955098"> <p>In product design, you carry a lot of design decisions in your head. Learning to prioritize those ideas and get them written down allows our brains to focus on processing ideas &mdash; not carry the baggage of stress or product team problems. <a href="http://zurb.com/article/1355/we-ve-lost-the-guts-to-think">You can't make gut-thinking decisions with mental baggage</a>. In a production line model, designers spend too much time using their brains as production tools &mdash; which is ultimately a Photoshop button replacement.</p> <p>We've talked in the past about how <a href="http://zurb.com/article/1297/design-collaboration-is-lonely">design collaboration is lonely</a>. And for designers to truly collaborate in a meaningful way, there needs to be more attention to practicing critical thinking as part of the design process. Designers can't make the necessary connections across an organization without first learning and practicing to articulate their ideas. This happens through writing and sketching.</p> <p>For designers to be successful, getting ideas out of your head takes practice, but <a href="http://www.fastcompany.com/3023105/how-to-be-a-success-at-everything/5-surprising-ways-writing-makes-your-life-better">the effects of writing and sketching</a> have immense implications on the satisfaction of one's work. People feel more engaged, more productive, and have a greater sense of meaning in their work when they record even the most minuscule of accomplishments. Design teams can capture this power if they learn to harness these skills in designers. Most designers stop at visual communication. Or don't have the skills to articulate their ideas.</p> <p>Designers must learn to sell their ideas through writing them down. Persuasion happens with confidence, and learning to articulate ideas through words can help build confidence. Designers also <a href="http://zurb.com/article/1343/your-design-work-is-suffering-because-you">need to ask more questions</a>. While most professionally-trained designers have learned the art of the critique, most educational systems still lack the training necessary to drive the dialog through a complete design process with a cross disciplinary team. We started talking about <a href="http://zurb.com/article/1349/the-problem-with-design-thinking-is-that-">progressive design</a> recently and a clear benefit of learning to write in this model is that it encourages designers to sell and purge ideas to keep momentum in a project. </p> <h3 class="regular">Exercising Our Brains</h3> <img src="http://www.zurb.com/blog/system/images/1461/original/brain-workout.png?1416955106"> <p>We've committed ourselves to writing and <a href="http://zurb.com/tavern">fostering ideas in Tavern</a> to grow and shape product design. <a href="http://zurb.com/article/1313/design-feedback-requires-investment-and-w">With the shutdown of Forrst</a>, we asked ourselves how we could learn from inviting designers into discussions on a broad range of product design topics, all while keeping the format simple. We took the <a href="http://en.wikipedia.org/wiki/Charles_and_Ray_Eames#Philosophy">banana leaf parable</a> to heart. What can we write in a day on a topic? How does the commitment to these ideas shape the way we solve problems everyday? </p> <p>We're just over 100 days into Tavern. It's been an amazing opportunity to grow and learn with a group of designers. Learning to question and challenge ideas is a core part of what being a product designer is all about. Product design is a horizontal discipline that requires significant investments among team members. Tavern has become a structured environment to keep the learning extremely focused. One hundred days in, we've had nearly 5,000 contributions from some amazing and articulate designers like <a href="http://zurb.com/tavern/users/ren-walker">Ren Walker</a>, <a href="http://zurb.com/tavern/users/bryce-howitson">Bryce Howiston</a>, and <a href="http://zurb.com/tavern/users/antonin-januska">Antonin Januska</a>. </p> <p>As we explore the broader goals of product design with designers through Tavern and the University, we're also working hard to release improved tools that help design teams facilitate better design communication through an improved <a href="http://www.notableapp.com">Notable</a>. We're all in on trying to figure out how to build strong design teams through progressive design. We even share our team building exercises in our <a href="http://zurb.com/friday15">Friday15 site</a>.</p> <h3 class="regular">Progressive Design [Thinking]</h3> <p>Twitter quips, weather apps and Dribbble shots are part of the design lexicon. They've engrained simplicity in designers' heads and helped people find creative outlets. But there's a difference between creating a simple result and oversimplifying the problem. Being 'creative' or a' right brain thinker' isn't going to solve our problems without more attention to actual thinking. We solve this at ZURB through <a href="http://zurb.com/article/1349/the-problem-with-design-thinking-is-that-">progressive design by taking a practical approach to design thinking</a>.</p> <p>A designer's job is to help companies figure out how to make the complex, simple. This requires a commitment to selling ideas internally and moving their team through a creative process. <a href="http://zurb.com/article/1355/we-ve-lost-the-guts-to-think">It requires gut-thinking</a> &mdash; thinking that's evolved by overlapping convergent and divergent thinking, synthesizing company knowledge together with customer feedback and using experience to drive decisions. Effective designers must continually practice these skills in their work and find connections across organizations. It's not just a right brain activity. And companies shouldn't make it that.</p> <p>Companies need designers to make decisions from the gut to move quickly through a design process. But it's not going to happen without regular training and practice. Designers need to commit to ideas and sell visions that can be understood by a wide range of people across a business. When designers figure out how to do this, companies will in turn trust designers to think from their gut. </p><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/zurb/blog?a=zPKQpg-Eblo:WDoDCJY2cgE:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/zurb/blog?d=yIl2AUoC8zA" border="0"></img></a> </div> Wed, 26 Nov 2014 06:17:00 -0800 http://feedproxy.google.com/~r/zurb/blog/~3/zPKQpg-Eblo/1359 http://zurb.com/blog/1359 http://zurb.com/blog/1359 Are You Ready to Become a Product Designer? <img src="http://www.zurb.com/blog/system/images/1452/original/areyouready-header.png?1416945643" alt="Are you ready to become a product designer?"> <p>Five years ago, it was all about UX, but <a href="http://zurb.com/article/932/can-we-drop-the-term-ux-design-already-an">we saw through</a> that. At the time, we were pretty stoked about figuring out the best way to get to answers in product design (still are!). However, we realized that there aren't a lot of designers out there that understand what it <em>actually</em> means to be a product designer. </p> <p>UX is one part of it, but what are the rest of the pieces? This is the story of how you too can become a product designer. So stop being a <a href="http://mashable.com/2014/03/12/david-shing-aol/">UX/UI guru or prophet or whatever</a> and start solving problems.</p> <h3 class="regular">The Values of a Product Designer</h3> <p>Product designers not only need to have a core set of skills, but a few key values as well. Embodying these values is just as important as being able to solve an interaction design problem or code up a page.</p> <h4>Balancing customer needs and business goals</h4> <p>This is the bread and butter of a product designer &mdash; the baseline requirement. If a designer isn't able to do this, they're not a product designer. Why? Because product designers should aim to find that sweet spot between customer needs, business goals and technical feasibility. These three areas are what blur the lines between a designer and a developer in the "traditional sense," and the reason why we've done away with those tired concepts at ZURB.</p> <h4>Keeping an open mind</h4> <p>Product designers get excited about new ideas, and doesn't always shoot things down. In turn, they aren't afraid to question their decisions, or let other people build off their ideas.</p> <h4>Knowing when to say no</h4> <p>Conversely, a product designer also knows when to say "no." More importantly, she'll know how to say no &mdash; backing up her decisions with data, customer feedback or her own past experience. Because she understands the customer needs, business goals and technology, she's able to justify her design decisions and move the product forward rather than run around in circles.</p> <p>These values are a riff of our own <a href='http://zurb.com/about/values'>ZURBian values</a>. We consider everyone on our team a product designer, including engineers. So if skills are only one part of being an awesome designer, how do you turn these three values into practice?</p> <h3 class="regular">Breaking News! You're Now a Customer Advocate!</h3> <img src="http://www.zurb.com/blog/system/images/1451/original/breaking-news.png?1416945628" alt="Product Designers are customer advocates"> <p>You'll hear a lot of UXers talk about empathy, which sounds really warm and fuzzy, until you realize that you don't really know what that means in the context of a product. Here's what it really means: when a feature breaks in your product, you will do everything in your power to fix it for your users.</p> <p>Which goes to say, if you don't know what the problems are &hellip; you certainly won't figure out what future ones. Product designers need to invest themselves in customer problems to anticipate future problems that might come up.</p> <p>No one on the team is exempt from customer advocacy. Simply put, everyone involved in the product is a customer advocate, including designers, engineers and marketers. Typically, a designer won't interact directly with customers, and that can be incredibly detrimental to the design process, whether the designer is working on a client project or an internal one with a team. You can't think of customer advocacy as just a 'customer support problem" or an "engineering problem." It's your problem too!</p> <h3 class="regular">Engineers Are Product Designers Too</h3> <img src="http://www.zurb.com/blog/system/images/1453/original/designgeneer.png?1416945668" alt="Engineers are also product designers"> <p>Product design happens when decisions are made, and everyone should be decision-makers, including engineers. While designers should write their own code, engineers should likewise be trained in the same product design process. </p> <p>A small team with a designer/engineer pairing is one of the most effective way to build a product. The designer should be constantly asking the engineer for her feedback on implementation and technical feasibility, while also trying to stay in front of problems. In other words, they need to be continually collaborating. But in order to have a nimble team like this, you need to have a few things in place:</p> <ul style="font-family: 'ProximaNova', sans-serif; font-size: 17px !important;"> <li style="font-size: 17px;"><strong>Clear Communication</strong>: This goes without saying, but seamless communication with few barriers as possible is essential. The barrier could be really simple. Laura likes to send her deliverables over email and Bill only checks his inbox once a day. In this case both peeps need to figure out a communication method that works well for both of them. In other cases, the communication problems could be deeper, and the earlier you identify and work on them the better your process will be.</li> <li style="font-size: 17px;"><strong>Blurred Lines</strong>: Don't overdefine the roles. Designers should code their own design work, so they can continue to work through the interaction nuance that only really comes up once a design is in code. Engineers should also contribute to the interactions by giving feedback and sketching out ideas. After all, there's no room to get territorial in product design.</li> <li style="font-size: 17px;"><strong>Detailed Spec and Testing</strong>: Designers should clearly spec out their static code before they hand it off to an engineer. A typical designer-to-engineer handoff at ZURB contains two things: <ul style="font-family: 'ProximaNova', sans-serif; font-size: 17px !important;"> <li style="font-size: 17px;"><strong>Static Code</strong>: This is the complete static code for the feature in all its different variations and error states. This is delivered in a shared Git repo.</li> <li style="font-size: 17px;"><strong>Annotated Set</strong>: The feature spec is created by the designer in an annotated <a href="http://notableapp.com">Notable</a> set that highlights all the functionality that needs to be implemented.</li> </ul> </li> </ul> <p>These are the absolutely necessary pieces to a functional collaboration. We'll also usually create an issue in the Github repo to track discussions and updates around the feature, and use it to handle assignments.</p> <p>Of course, the designer's work isn't done with the handoff. That communication needs to be maintained during and after the feature is built, when it's up to the designer to comprehensively test every interaction in the feature. We use a spreadsheet for every major feature, and document every single interaction and state in that spreadsheet. We then test those interactions, and if an interaction is A-OK we mark it as green. Otherwise we highlight it in eye-bleedy red and create an issue in Github for the bug.</p> <p>It's so satisfying when this&hellip;</p> <img src="http://www.zurb.com/blog/system/images/1442/original/bugs.png?1416876068" alt="interaction test before" style="margin-bottom: 20px; border: 1px solid #ddd;"> <p>turns into this&hellip;</p> <img src="http://www.zurb.com/blog/system/images/1443/original/fixed-bugs.png?1416876078" alt='interaction test after' style="margin-bottom: 20px; border: 1px solid #ddd;"> <h3 class="regular">Those Who Don't Know History Are Doomed to Repeat It</h3> <img src="http://www.zurb.com/blog/system/images/1454/original/history.png?1416945691" alt="Product Designers should learn the history of their product"> <p>Effective product designers need to stay ahead of the rest of the team, which means that they'll often have to be the first person to spot a bug or come up with an idea. The best way to stay ahead is to know your own history. Efficiency is crucial to staying out in front, so designers have to be careful and not reinvent the wheel. For designers new on a product team that has existed for a while, this means doing a lot of homework to learn why certain design decisions were made, and why the product functions the way it does.</p> <p>As we build the new Notable, we were working on getting rid of the Organize feature because, through our own use and customer interviews, we found that people were mostly confused by the feature and never used it. Our design problem was: how do we maintain the existing functionality of the Organize feature, without tossing all that functionality into a separate confusing page? After a few iterations, we realized that we'd just reinvented the same feature and called it a different name. We ended up completely rethinking the functionality and its purpose, coming up with a much simpler solution.</p> <div class="twentytwenty-container" style="margin-bottom: 20px; border: 1px solid #ddd;"> <img src="http://www.zurb.com/blog/system/images/1445/original/old.png?1416934305" alt="Notable 1.0"> <img src="http://www.zurb.com/blog/system/images/1446/original/new.png?1416934316" alt="Notable 1.5"> </div> <h3>You Can't Solve Problems in Photoshop</h3> <p><strong>Studies show that 90% of designers will jump into Photoshop/Sketch to solve problems</strong><sup>1</sup>. Product Designers will <a href="http://zurb.com/article/1343/your-design-work-is-suffering-because-you">ask why five times</a> before implementing any feature. They'll create prototypes, run tests, check analytics data, talk to customers, and discuss ideas with their team. Notice how Photoshop isn't required for any of these things. Drop Photoshop and start designing products. <em>Unless you're working towards a deadline, in which case what are you doing reading this article?</em></p> <p>Designers shouldn't be using their tools as crutches in product design, because most of product design happens <em>outside the computer</em>.</p> <hr width="70";><p class="citation"> 1. Not a real study </p> </hr> <h3 class="regular">The Rise of the Gut Thinkers!</h3> <img src="http://www.zurb.com/blog/system/images/1462/original/nudge.png?1417037400" alt="Gut thinking product designers"> <p>So where does a product designer fit into a <a href='http://zurb.com/article/1349/the-problem-with-design-thinking-is-that-'>progressive design process</a>? A product designer should be the person <strong>driving decisions</strong>, even if they're not directly making the actual decision. The product designer has the experience and guts that allow them to influence informed decision-making among the team. We've learned two things about product design from working on our new Notable release:</p> <ol style="font-family: 'ProximaNova', sans-serif; font-size: 17px !important;"> <li style="font-size: 17px;">You need a really convincing reason for why you should add or remove a feature</li> <li style="font-size: 17px;">Getting those convincing reasons involves a lot of work that a typical designer isn't typically trained to do</li> </ol> <p>Take for example the next version of Notable. We wanted to make sure that we were maintaining all the existing features. Bryan sent the team a list of features that were in the old version that were missing from the new version. While working with the customer advocate through the list, we noticed the Nudge feature was on there, and our <a href="http://zurb.com/article/1355/we-ve-lost-the-guts-to-think">gut reaction</a> was, "who even uses that?" When we built the first pass of the new Notable, our first instinct was not to build the feature, and focus on features that were more valuable. We needed a good reason to convince Bryan that this feature wasn't necessary, so we turned to our analytics. We tracked the Nudge feature in the existing app for two weeks, and the results we found will shock you!</p> <p>Turns out, our gut was right! A <strong>mere 0.1%</strong> of our users used the Nudge feature in those two weeks. We were able to push back on the feature and focus on other more frequently used features.</p> <h3 class="regular">That's No Moon&hellip;</h3> <p>You might be asking yourself why anyone would want to become a product designer at this point. Well, because it's amazing. You get a feeling of certainty that you wouldn't get with say, a purely visual design role. Practicing product design trains you to think with your gut but not rely on it. Product design allows you to empathize with your users and make sure you're solving business problems too. Figuring out a great flow for your team is how you can get everybody on the same path, whether they speak Photoshop, Rails or Wookie.</p> <p>Product design is about teamwork, because it's really hard to learn to do all this stuff by yourself. Product design problems are kind of like the Death Star &mdash; they're big and intimidating, and can seem almost invincible. By identifying the problem, getting the right team, then getting that team to work together seamlessly you can take on any Death Star.</p><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/zurb/blog?a=rMjGZ903iJI:SQbX4i6arfI:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/zurb/blog?d=yIl2AUoC8zA" border="0"></img></a> </div> Tue, 25 Nov 2014 10:00:00 -0800 http://feedproxy.google.com/~r/zurb/blog/~3/rMjGZ903iJI/1357 http://zurb.com/blog/1357 http://zurb.com/blog/1357 We're Jazzed to Introduce Our Newest Marketer <p>Our newest marketer hit the right note when we first met him. Not only did he impress us with his marketing skills, but his musical talents were off the charts. So without further ado, let's introduce you to ... </p> <h3 class="regular">Daniel Codella, Marketer</h3> <img src="http://www.zurb.com/blog/system/images/1456/original/daniel_casual.jpg?1416952686"> <p>Daniel spent his high school years traversing the globe, learning about different cultures. Most of all, he learned about his passion &mdash; music. You see, Daniel is the son of two musicians, so you could say music is in his blood. He's released several indie albums and singles, and had a chance to work with Jason Slater, a former member of Third Eye Blind. </p> <p>Daniel was also a finalist in the John Lennon Songwriting Competition. Career wise, he thought he become a writer, but music kept calling his name so he pursued that instead.</p> <p>However, the music industry changed with the arrival of MP3s and streaming services. So instead of the sitting on the sidelines, he put on an event &mdash; "Sound Advice: Making a Living in the Music Industry" &mdash; to help him and his friends find a place in a changing musical landscape. At that event, Daniel met his future boss, president of Sonoma Wire Works, an audio software/hardware company. Soon after that, Daniel joined Sonoma's marketing team. As he says: </p> <blockquote>Connecting with people, and more specifically, connecting different groups of people, is something I really enjoyed and seemed to have a talent for.</blockquote> <p>Marketing seemed like a perfect fit for Daniel because he was able to combine a love of music and technology, as well as connecting different groups of people at the same time. Now he's pushing his love of technology and connecting with people even further as ZURB's marketer! And he's looking forward to learning more in the days to come: </p> <blockquote>Even though I have only been around the ZURBians a short time. I am already in awe of how dedicated the team is to being efficient. Everyone seems to be in love with learning, sharing and discovering new information.</blockquote><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/zurb/blog?a=UwfjI7VCRk8:1gxZuJd8K14:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/zurb/blog?d=yIl2AUoC8zA" border="0"></img></a> </div> Tue, 25 Nov 2014 10:00:00 -0800 http://feedproxy.google.com/~r/zurb/blog/~3/UwfjI7VCRk8/1358 http://zurb.com/blog/1358 http://zurb.com/blog/1358 There's Life Beyond the App Store <img src="http://www.zurb.com/blog/system/images/1431/original/blog-header.png?1416348280" alt="Illustration if app icons breaking free from a broken app store"/> <p>With the imminent release of <a href="http://zurb.com/article/1345/design-amazing-single-page-apps-with-the-">Foundation for Apps</a>, we've been chatting a lot about apps and how they're built. We've discussed the topic internally with our team, externally with our clients and with tons of our amazing ZURB friends. Much of that discussion revolved around not just how to produce apps, but what an app really is, how they differ from websites and even the future of where they'll go.</p> <h3 id="before-apps">Before Apps There Were Applications</h3> <p>In the early days of computers, apps &#8212; or applications as they were once known &#8212; were pretty much the entire computer experience. You'd take a physical object, such as a floppy, put that in your computer and then use the digital version of the application. It was amazeballs. With the emergence of the internet, we saw people attempting to take what was once reserved for operating systems and move it online. <a href="https://www.owasp.org/index.php/What_are_web_applications%3F">CGI Applications</a> like Hotmail created services that a user could access virtually from any computer in existence. And a flood of applications followed suit. Web apps became as commonplace as desktop applications in the early aughts. Users no longer needed to fire up Word or Excel to create simple documents, and instead turned to the web where they could collaborate with others on documents and spreadsheets.</p> <p>By the mid to late 2000s, web apps had become fairly ubiquitous in everything from email to CRMs to photo editing. Everything that could be done on the web was being done on the web. Then, along came smartphones and more importantly the invention of the App Store. Suddenly apps were being downloaded like it was 1999, and a resurgence of operating system-based apps were once again upon us.</p> <h3 id="native-apps">Native Apps Like It's 1999</h3> <img src="http://www.zurb.com/blog/system/images/1432/original/devices-1999.png?1416351106"> <p>Don't get us wrong. The App Store is great. It provides easy access to an entire platform for users. It's (<a href="http://www.businessinsider.com/the-app-store-is-ancient-and-outdated-2014-7">mostly</a>) easy to find apps and most importantly the app store has a built in revenue model. It just poses several problems when thinking about creating a business around applications. Apple's App Store and, to some extent, Google Play, are closed systems meaning they <a href="http://www.cnet.com/news/behind-10-eyebrow-raising-app-store-rejections/">control what is allowed</a> on their turf. This becomes a dangerous game of monopoly where they can easily prevent you from passing go or collecting your $200. They can deny your app if it's too similar to something they are in the process of creating themselves. The web, on the other hand, is an open system where anything is allowed to thrive and to make money, for better or worse. If the web is the Wild West, then the app store is Disney's Frontierland. Sometimes we need to go back west. </p> <h3 id="build-once">Build Once Work Everywhere, Anywhere and for Anything</h3> <img src="http://www.zurb.com/blog/system/images/1433/original/work-anywhere.png?1416351137"> <p>ZURB has been a huge proponent for responsive web design, pretty much since good ol' Ethan Marcotte <a href="http://alistapart.com/article/responsive-web-design">coined the term</a> in 2010. Responsive was everything our clients wanted, but didn't know they needed. Never again would we be responsible for creating a slimmed down version of a web site to use on mobile devices. Never again would we be responsible for maintaining several, separate code bases. We even created <a href="http://foundation.zurb.com/">Foundation</a>, the first fully responsive framework, to make our lives and many other ones easier. </p> <p>Mobile native apps have reached a point in their lifecycle where what was once one or two screen sizes is now dozens, and what was once maybe several devices is thousands. Yet native apps are struggling with the bridge from mobile experiences to desktop ones. This means a company must create applications for iOS, Android, Windows mobile, Amazon Fire and even OS X and Windows for desktop &#8212; all with different screen sizes and orientations. That's dozens of code bases and tons of tweaking, only to be foiled every time a new device size is released or a new OS is introduced. </p> <p>There's gotta' be a better way! Hey, wait, there is!</p> <h3 id="state-of-the-web-app">The State of the Web App</h3> <p>The last four years of the web have moved pretty quickly. We're finally reaching a place where the web is catching back up with native platforms. There are several neat advancements that are helping us do this and we wanted to talk about several of them.</p> <h4>Layout</h4> <img src="http://www.zurb.com/blog/system/images/1434/original/layout.png?1416351958"> <p>Layout has been a huge issue because most of what makes up web pages hasn't changed in years. The majority of the web still uses floats, which were never intended to be anywhere near as responsible for layout as they ended up being. Something that was originally intended to push an image left or right has become the basis of almost all the layouts out there. There are some new contenders to the layout debate, so lets take a look:</p> <ul> <li><strong>JS Layout:</strong> Many current web apps use tons of JS to position layout items and make them respond how we'd wish the web would. This has worked OK, but is heavy and falls almost completely apart when attempting a responsive layout. </li> <li><strong>CSS Grid:</strong> Believe it or not this is the first time we have a property in CSS that's completely focused on layout. CSS Grids will replace much of what we've done with grid systems. Unfortunately, this has yet to be implemented completely (or at all, really) in any browser, so for now it's just a pipe dream.</li> <li><strong>Flexbox:</strong> While not specifically for layout, Flexbox lets us do some neat things with positioning and order. Flexbox allows to easily position items next to each other and mix fixed with fluid widths. It will never force us to clear a float again. Flexbox can still be hard as heck to understand, but we've chosen it for Foundation for Apps and help abstract most of that, so it has that going for it. </li> </ul> <h4>Speed</h4> <img src="http://www.zurb.com/blog/system/images/1436/original/speed.png?1416352983"> <p>Speed is a tricky one as we don't control a good majority of that equation. We can assume a user has wifi or 4G, but at any moment they might not. Not to say this is just a web problem, since a good amount of native apps rely on internet connectivity to access data. The speed we're looking to match here is the speed of actions and the fluidity that goes along with that.</p> <ul> <li><strong>SPAs:</strong> The popularity of the Single Page App web frameworks has been a really huge step forward for web apps. You can tell how many because there are TONS out there and more coming out every day with really awesome names like Ember, Angular and even Batman. These help give apps that fluid feeling and cut down on the dreaded page reload.</li> <li><strong>Local Storage:</strong> An ever-increasing number of browsers are giving us access to local storage to save and cache files that would normally need to be loaded each time the app was visited. This isn't the same as downloading an entire app, but with most major browsers giving you anywhere from 5'10MB of storage you can often speed up load time pretty drastically. </li> <li><strong>Application cache:</strong> All major browsers now <a href="http://caniuse.com/#feat=offline-apps">support application cacheing</a>, which is huge for creating web apps that can function offline. Some actions may work, but much like their native counterparts most actual data will require a connection. </li> </ul> <h4>Distribution</h4> <img src="http://www.zurb.com/blog/system/images/1435/original/dist.png?1416352965"> <p>Applications went from a physical store distributed by a third party, to a download from the creator, back to a digital store operated by a third party. In fact a <a href="http://www.nielsen.com/content/dam/corporate/us/en/reports-downloads/2011-Reports/state-of-mobile-Q3-2011.pdf">2011 Neilson study</a> showed that 63% of users downloaded apps because they had found them solely on the app store. With web apps, we need to rely on our own marketing prowess and distribution model.</p> <ul> <li><strong>Web App Stores:</strong> Google seemingly has one of the only reliable web app stores in existence. They've done a great job with its web app store and has many of the same features of a native store, but solely for HTML5 web apps. There are several other app stores out there, like BestVendor or Listio. However, these stores have had limited success with the average user. </li> <li><strong>Marketing Sites:</strong> Web apps are perfect for marketing sites as they can sign up and go straight to the app, no need to be directed to a third party site or leave your browser. They're great places to fully explain your product and get users truly excited.</li> </ul> <h3 id="outside-looking-in">On The Outside Looking In</h3> <p>We're still not living in a perfect world for web apps. We don't always have access to all the 'goodies' native apps have access to. This means that, for now at least, some specific ideas or industries may be hindered from using web apps based on the technology they have access to.</p> <p>Desktop-based web apps are in better shape than mobile ones. That's because most browsers allow the user to tap into <a href="https://developer.apple.com/notifications/safari-push-notifications/">native notifications</a>, which can really help bring users back into an app. Desktop browsers are very optimized for the JS and loads that come with web apps. It appears one of the only things native hasn't done is allowed web apps to operate as icons in the doc or in their own independent windows. This is a hurdle we can hope to achieve soon.</p> <p>Mobile devices haven't fared so well. For one, because mobile devices tend to be less powerful with less reliable access to high speed internet. Secondarily, because these manufacturers have little to no reason to end their control over the apps users have access to. Web apps on mobile devices do have the luxury of saving apps onto the home screen, but beyond that they suffer pretty deeply. No access to push notifications, the camera and many of the other peripherals become super problematic for web apps. </p> <p>For example:</p> <ul> <li>Instagram: would have never existed without access to the camera</li> <li>Games (most of them): need access to the devices gyroscope</li> <li>YO: May never have existed (God forbid) without push notifications.</li> </ul> <p>There are still tons of things left until web apps have all the tools native apps do, but every new release of iOS or Android we see more and more access opening up. APIs and code libraries are evolving that could solve these issues for web apps &#8212; accelerometer, GPS control, camera control, HTML5 local storage. Our friends at Treehouse have put <a href="http://blog.teamtreehouse.com/exploring-javascript-device-apis">together a great list</a> of features that are available now and it's pretty exciting what the next couple of years bring. </p> <h3 id="for-now-we-dream">For Now We Dream</h3> <p>At ZURB we think consumers and developers are at the precipice for figuring out responsive web apps and we just love the potential shift back to an open platform. We're building <a href="http://zurb.com/article/1312/the-next-foundation">Foundation for Apps</a> and we expect tons of people to build apps that blow our minds. We know that even though the technology is not yet perfect, the only way to get the Apples and Googles to change their mind is to drive the need for change. Let's all start to drive that need.</p> <style> .post-box ul li, .post-box ol li {font-size: 16px; margin-bottom: 10px;} </style><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/zurb/blog?a=F0IkSvxDQMU:ssDSVUoJp60:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/zurb/blog?d=yIl2AUoC8zA" border="0"></img></a> </div> Tue, 18 Nov 2014 10:59:00 -0800 http://feedproxy.google.com/~r/zurb/blog/~3/F0IkSvxDQMU/1356 http://zurb.com/blog/1356 http://zurb.com/blog/1356 We've Lost the Guts to Think <img src="http://www.zurb.com/blog/system/images/1428/original/brain.png?1415834672" alt="brain and lightbulb"> <p>Last week, we wrote about the <a href="http://zurb.com/article/1353/silicon-valley-killed-the-design-agency">the conundrum design agencies and in-house design teams face</a> in growing successful design teams. While it paints a rather doom-and-gloom picture, the reality is that these are company problems. The role of being a designer is flush with opportunity. The challenge for designers, however, is picking a direction that <a href="http://zurb.com/article/1347/show-me-the-responsibilities">provides the most professional growth</a> and fulfillment. But there's a catch.</p> <p>While design opportunities are plentiful, most jobs don't provide designers with a way to shape design problems and create enough value in an organization. Companies are struggling to utilize the talents of designers in a meaningful way. But it's not every company's fault. Companies need to trust their designers to make decisions. Designers, for their part, will have to think. Gut-think.</p> <h3 class="regular">The Stupidfication of Design</h3> <p>Solving 'user experience' problems won't be solved by narrowly focusing designers around production work. There's only so much companies can do to productionalize a design process without causing huge problems to the overall quality and delight of a product. The trend of educational bootcamps and online learning has become a way to close a talent gap by thousands, but it's exposing a need for design leaders who can inject thinking and emotion into design work. </p> <p>As an industry, we've been told people don't read. That people don't have time to do X. To make it simple. And designers have bought into this logic, which does not help them learn to synthesize ideas that actually make it easier and more enjoyable for people to use products. Simple is actually very complex to design when it comes to interactions. <a href="http://www.quora.com/What-is-Amazons-approach-to-product-development-and-product-management" rel="nofollow">We're stuck designing around press releases</a>, despite the goal of <a href="http://blog.jasoncrawford.org/two-pizza-teams" rel="nofollow">two pizza teams</a> creating more value. When you couple this with "always on" internet products, designers are asked to work in an industrial revolution-like production line to quickly solve problems. It's not the future, though. It's making us stupid.</p> <p>Although we've moved past the idea of magic Photoshop buttons that solve design problems, we've also introduced new problems of putting bodies on design work that requires nuanced thought and presentation. Corporate hierarchies, agile pressures and MVP products all but rob us of a chance to create real impact.</p> <h3 class="regular">We Need a Better Approach</h3> <p>We're about two decades into this whole commercial internet thing. Design as a profession has progressed significantly, but we're going to have to change our tactics if we want to break free from the unnecessary burdens of company structures. Evolution is inevitable. Let's not get overly frustrated though &mdash; we get to shape that evolution in a way that creates momentum and satisfaction, especially if we invest our efforts right. It takes time for industries to find clarity and it will require different approaches than the ones we use today. </p> <p>Today's digital knowledge workers are no longer efficient or effective when working in a production-line model, which takes the emotion out of producing design work. <a href="http://zurb.com/article/1349/the-problem-with-design-thinking-is-that-" rel="nofollow">The future depends on a practical approach to design thinking</a> that enables designers to make decisions based on synthesizing rational thinking with emotions. Product designers need to work through the entire product lifecycle, shaping decisions that have big implications on the technology, business goals and customer needs. </p> <h3 class="regular">Product Design Requires Gut-Thinking</h3> <img src="http://www.zurb.com/blog/system/images/1426/original/brain-guts-combined.png?1415834653" alt="brain and guts"> <p>If we're to succeed in dismantling production lines then we need to prepare designers to think through user and business decisions. We've talked in the past about the <a href="http://zurb.com/article/1323/the-dribbblification-of-design-and-what-w">dribbblefication of design</a> and the need to work through feedback. Making this problem more complicated is that online products don't shut off and the process of producing product updates is a race against time. Designers must learn to fail fast and make adjustments. Whipping out Photoshop or pushing code to Github is a great start to get the muscles working, but ultimately we need to make adjustments with our whole mind and body.</p> <p>Product design requires making a ton of decisions and often works best with a bottom-up strategy. It's not a production role; however, the greatest design leaders stay close to the medium. Our history is full of designers who have used the hero design method &mdash; Eames, Loewy and Starck have shown great design work happens when emotion and thinking become part of the equation. They worked from the gut. Today's product designers should embrace this approach and use their techniques for inspiration, as the results are undeniable. Companies will need methods and processes for incorporating these ideas. </p> <p>Designers need to get better at articulating their ideas through direct business communication so they can think from the gut. Producing beautiful imagery and soft emotional rationale isn't going to cut it &mdash; thinking from the gut requires quick decision making to persuade teams to move forward through rational decision making. Gut-thinking is the same fight or fleet thinking that happens when a speeding car is heading in your direction. Your body takes over and quickly reacts by moving out of the way. </p> <p>Designers need to perform under similar duress in businesses where executives can often feel like speeding cars. Learning to quickly absorb and synthesize harsh feedback starts in the gut. It should push designers to take action. This effort requires significant and purposeful practice because businesses and organizational structures aren't constructed with empathy in mind. Designers and companies need to find common ground to move forward as an industry. Businesses must acknowledge that this type of thinking is good for product design. Designers, for their part, need to show that gut-thinking is grounded in logic and produces results. Thinking from the gut can be systematized and learned. </p> <h3 class="regular">What Happens in Vagus, Shouldn't Stay in Vagus</h3> <img src="http://www.zurb.com/blog/system/images/1429/original/brain-guts.png?1416000189" alt="vagus nerve"> <p>Here's where science comes in &mdash; it just so happens that there's a nerve that connects the brain to your guts. It's called the vagus nerve, it's over 9 meters long and there are over <a href="http://www.scientificamerican.com/article/gut-second-brain/" rel="nofollow">100 million neurons that act as a second brain</a>. As a designer, there's a real and tangible connection to our guts that helps us react to situations and come up with quick design solutions. This shouldn't be overlooked in the design process.</p> <p>Designers <a href="http://zurb.com/article/1336/designers-you-ve-made-it-to-the-table-don">must learn to sell complex ideas</a> to marketers, customer service people, engineers and the suit-and-ties, all while shipping code. Being data focused can be helpful, but <a href="http://stopdesign.com/archive/2009/03/20/goodbye-google.html" rel="nofollow">it's got its limitations to help push through big ideas</a> as Doug Bowman steadfastly declared (companies have since wised up ' even Google has a mandate <a href="http://www.theverge.com/2013/1/24/3904134/google-redesign-how-larry-page-engineered-beautiful-revolution" rel="nofollow">to make things beautiful</a>). Communicating product ideas must come from <a href="http://www.fastcompany.com/3022954/leadership-now/the-neuroscience-of-trusting-your-gut" rel="nofollow">confident decision making and solid emotional grounding</a>. Antonio Damasio, a neuroscientist at the University of Southern California and head of the Brain and Creativity Institute, makes the case:</p> <blockquote>Rather than being opposed, emotion and reason are deeply interrelated: if you're going to make sound and rational decisions, [Damasio] contends, you need to have first done prior accurate emotional processing. If you have done such processing, then your emotions accelerate your decision-making &mdash; in the form of intuitions, hunches, and gut feelings. </blockquote> <p>If gut-thinking is so important to design, where are designers learning to work through their ideas and emotions? Companies aren't opening themselves up and designers are not practicing enough. So which is it? Are companies too stuck in their ways or are designers too scared to think from the gut? We need a process to support design thinking and decision making. </p> <h3 class="regular">Gut-Thinking in Progressive Design</h3> <p>Designers need simple tools for organizing their thoughts to drive design problems within a team. <a href="http://www.economist.com/news/science-and-technology/21567876-you-can-it-helps-think-well-yourself-first-place-think-yourself" rel="nofollow">Gut-thinking produces positive feelings</a>. With a positive attitude, designers can create momentum for the team. At the heart of this problem is learning to communicate and facilitate decisions on behalf of product teams. <a href="http://zurb.com/article/1349/the-problem-with-design-thinking-is-that-">Progressive Design is an effective way</a> to build momentum and harness the power of gut-thinking while providing a structure for teams to feel confident.</p> <p>We've worked for the past decade and applied these learnings to our design work across startups and large companies. Using a progressive design process has enabled us to reduce the design synthesizing and processing time, and enabled our designers to help companies make solid design decisions from the gut. Gut-thinking has been shown to create better results, is faster for us and has more momentum and satisfaction for our designers.</p> <p>We'll continue to share our ideas and get more into how designers can learn to get better at gut-thinking through specific techniques and progressive design.</p><div class="feedflare"> <a href="http://feeds.feedburner.com/~ff/zurb/blog?a=W4WirgtDxgY:-DorI3Pia8o:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/zurb/blog?d=yIl2AUoC8zA" border="0"></img></a> </div> Wed, 12 Nov 2014 15:38:00 -0800 http://feedproxy.google.com/~r/zurb/blog/~3/W4WirgtDxgY/1355 http://zurb.com/blog/1355 http://zurb.com/blog/1355