Design Basics for Nashville Software School (full pres)
•Download as PPTX, PDF•
1 like•222 views
The Nashville Software School offers an intensive 6-month bootcamp program to train novice programmers. The agenda for the design basics course includes group exercises on user research, personas, prototyping, and pitching ideas to improve the Nashville B-Cycle bike sharing program. The document provides guidance on good design principles like being user-oriented, intuitive and long-lasting. It also lists resources for design including books, websites and free tools.
More Related Content
What's hot
What's hot (20)
Similar to Design Basics for Nashville Software School (full pres)
Similar to Design Basics for Nashville Software School (full pres) (20)
Recently uploaded
Recently uploaded (20)
Design Basics for Nashville Software School (full pres)
- 1. + Design Basics Nashville Software School Innovative Bootcamp program designed to take you from novice to developer in six months of intensive training and mentoring followed by real project work as an apprentice programmer. http://nashvillesoftwareschool.com/ October 2013
- 2. + Agenda Groups Good Design? Hands-on Thinking: Nashville B-Cycle What did you learn from your user research? Who is a B-Cycle user? What would you do to make things better? How would you do it? Pitch it!
- 4. + Making things better for people.
- 6. Aesthetic Good Business “Steal like an artist.”
- 7. + GROUP EXERCISE Good & Bad
- 8. + Persona Personas are archetypes or characters that represent people you are targeting as users.
- 9. + User Centered Design
- 11. MARY, COMMUNITY ORGANIZER: TRAITS
- 13. + GROUP EXERCISE Make things better
- 19. For your web sites + It all boils down to… 1. Take a deep breath. Step back from your site/app. Walk around the block. Get some sleep. 2. Look at what your site/app from your Persona’s eyes – not yours. 3. Are the elements in the page nicely laid out in an organized pattern? 4. Are the elements consistent across your site? 5. If you introduced something new and original, did you give the user clues as to how it works? 6. Is there a way for your users to get out of a sticky situation? 7. Is content grouped together logically on your pages? 8. Is the text easy to read? 9. Is it easy to spot the emphasized elements on a page or are there so many colors it’s hard to see? 10. Are your pages crowded? Could there be more space between elements? 11. Now put it in front of someone else and see if they can use it.
- 20. + Resources Web Sites Free Tools Color Generators JakobNeilsen A List Apart Kuler Fast Co Design Color Combos Smashing Magazine UX Booth Grid Golden Grid System(Responsive design) UX Pond Acute Search UX Stack Exchange UI Patterns Patterny WebDev Refinery Twitter Designs Hongkiat.com(Starter Kits for Web Designers)
- 21. + More Resources Books Don’t Make Me Think, by Steve Krug Design of Everyday Things, by Don Norman Steal Like an Artist, by Austin Kleon About Face 3: The Essentials of Interaction Design by Alan Cooper Design Is a Job, Mike Monteiro
- 22. + THANK YOU!
- 23. + Good Design is Functional Useful Intuitive Well User-oriented Engaging Simple Efficient Long-lasting Good Aesthetic Unobtrusive Thought Out Business
- 25. + Ten Interactive Design Rules to Believe In 1. Design for Users 2. Follow the Grid 3. Recognition Rather than Recall 4. Law of Proximity 5. Color & Contrast 6. Type (Fonts) Matter 7. White Space is Your Friend 8. Consistency & Standards 9. Test. Test Again 10. Steal Like an Artist* * I did – that’s a title of a book by Austin Kleon
Editor's Notes
- 9:00-9:30Fold up your computers. Today we’re taking a break from code to talk about design.This is a hands-on, back-to-basics style workshop. INTROSBefore we do anything, we want to break you into groups: Anyone NOT get a chance to do the HW (life happens)? Any Visual designers here? Anyone have worked on interactive or digital products before (web sites)? Anyone been in a Design Thinking workshop? Anyone looked at website? Anyone looked at Bike station? Anyone did both? Ride a bike? Business Development or sales experience?[Groups sit together]Here at NSS you are learning to make the magic happen in the bg with code.But good design is the magic that makes customers want to buy your products and users want to use them. Your HW was the user research step to get you started in with User Centric Design – Think about who you are designing a product for. Whether it is a web site, a mobile app, or a car or a dish, design from your user’s point of view. Today it’s a B-Cycle user.
- Design is not just the look and feel of an item. It is not just the color palette and fonts on a website.Design is everywhere. It focuses first and foremost on human behavior and their experience with the design, the product, the process.The single word 'design' encompasses an awful lot, and that's why the search for a single definition can lead to a lengthy debate.[page down]
- For today our definition is going to focus on ‘making things better for people’. You can probably think of examples you have already used today. Coffee Makers. Watches. Phones. Pens & Pencils (don’t have to use quills anymore). Some of you may have used a medical device such as a blood glucose meter. All of these things, in different ways, have been designed and re-designed to make things better for people. Good Design is based on tried and true, demonstrated design principles. Such as Functional.
- Functional Useful design solves problems. This painted line optimized roads’ functionality for two way traffic.Edward Hines, 1909 – 1st paved road. Inspired to add lines to roads by a leaking milk truck on a dusty roadIntuitive Intuitive design explains itself and makes a user manual unnecessary. A good design makes how to use, perceive, and understand a product obvious. At best, it is self-explanatory.” User-oriented Good design is based on its use and designed to improve a given situation for its user. Long-lasting Good design builds on sustainability in the sense that the style and materials are durable and not just a trend Simple. A good design is effective and efficient in fulfilling its purpose. It relies on as few external factors and inputs as possible. A good design is always the simplest possible working solution.
- First iPod:October 23, 2001Black Mp3 player: May 1998, “Diamond Multimedia Rio PMP300”AestheticAn aesthetic product has an inherent power of being able to engage and immediately appeal to its users’ senses.Good businessA good design does well in the competition and stands out in a competitive market. Steal like an artist. Originality does not necessarily mean it is a better design. (a book by by Austin Kleon)
- 9:30amGood design is understood. You may not think “Wow. That is really well designed and made my experience better.” But you do know when something is overly complicated or hard to use. No more listening to us talk. Now it’s time for you to apply your intrinsic, natural design instincts to B-Cycle. Use whatever notes you have from your HW to share what you found with your group. You have two color stickies on your table. AS A GROUP -- Select one color to write down good things you noticed during your user research and the other to write down the bad things you noticed. Write them all down – get it off your chest, don’t worry about spelling, grammar, logic, etc. We just want to hear what you found to be good and what you found to be bad.Plan to spend about 15 minutes discussing and writing10:00After 15 minutes – Now take a few minutes to pick the top 3 good and the bottom 3 bad. Pick someone to present those with a short explanation of why you picked those good and bad things.
- 11amEveryone take a sheet of paper and a marker. Draw a stick figure in the middle of the page. Don’t worry about artistry– this is just an exercise to get you thinking from the user’s point of view. (And artists, don’t waste time on detail, this is just a thinking exercise! NOT a drawing exercise!) 11:05We are now going to come up with “Personas” (anyone know what a persona is?) . [CLICK]Personas are archetype or characters that represent people you are targeting. Personas aren’t a job description, they are more of a biography of a typical person and how they would interact with and what they would want from your product. Use them to help guide decisions about product features, navigation, interactions, and even visual design. Here’s an example:[page down for sample]
- 11:10This is John. This persona sketch was created for a charity website. John is a Donor, not the person who runs the charity, or a volunteer. He is a typical person the web site would be targeting. He wants to do the right thing and give money, but he is stressed out about figuring out what the best place to donate to.
- 11:15Now here’s another persona that engages with this charity. But she has very different needs than John. Mary is in charge of setting up outreach programs for her church. She has to find something she can get everyone to stand behind. There is always someone who disagrees so she needs facts, she needs motivation. Now spend 5 minutes thinking about your user. Feel free to start over and draw another figure. Your user does not have to be a customer. If your user research brought up some problems for the business side, the customer service staff, or the mechanics, that’s good too. 11:20[Page down]
- 11:20Now as a group think through two personas. We don’t build products for ONE person. There are different attribute, needs, and goals that must be supported by one web site or application. Remember, a good design is user-oriented.It is designed to improve a given situation for its user. So how can you have a good design without really thinking about the user? For your group personas, take another sheet of paper for each persona. Divide it into 4 squares. Mark them “Personality”, “Key Attributes/Behaviors”, Demographics, and Related Needs/Goals”. You’ll need two – one for each persona your group is going to create. Write down traits under each to describe your persona. You’ll have about 20 minutes for this exercise so you may not be able to complete the traits sheet for both of your personas. But we want you to get the idea of user-centric design. To remember to consider your users first. Come up with your two personas and their world as it relates to b-cycle. Then capture as many traits as you can for each. We’ll ask each group to present one persona at 11:40 and then break for lunch at noon. [page down]
- [Present Personas]Noon – well done! You have already completed user research, design evaluation, and created personas. These simple steps have already given you a foundation to work on a solution when you get back from lunch at 1pm.
- 1pmWelcome back from lunch! Let’s get right to work.Take out those stickies again. You have your good things and bad things. You have your personas. Remember earlier we defined design as “Making things better for people.” For this exercise your group is going to come up with something that will make things better for your persona. Use your stickies to jot down your thoughts. Your bad things would be a place to look at for redesign or improvement ideas. Your ideas do not have to be for a website. Yes, you are here to learn how to build web sites so that would make sense but if you are inspired today to redesign the bike rack, for example, that’s fine too. We’re exploring user-centric design – it applies to all design, web sites, furniture, interior design, you name it …[page down to photo]
- 1:05pmHere are samples from the charity site designed to target the earlier personas, John & Mary. These are things they both would want to be able to do on the charity web site -- donate money, donate diapers, volunteer opportunities. Brainstorm ideas, things that you think your personas would like related to their use or experience with b-cycles? Your goal is to come up with an improvement or a new idea for b-cycles. Spend a few minutes throwing out ideas on stickies and then review them from your persona’s point of view. Would your persona be excited about that idea? Would they use that? Would they buy that? What comes to mind as a solution to serve these ideas? Let’s finish up brainstorming by 1:20. 1:20pmLook at the ideas you have come up with. Find your best ideasto illustrate at least one of them in more detail. What is the best way to provide a solution for your persona? Web site? Changes or new features to the existing site? Kiosk? Mobile app? Something on the bikes? Pick one solution your team would like to paper prototype. 1:30pm[page down
- Now you are going to wrap up everything we have done today in one prototype that you are going to pitch to b-cycle’s Marketing Coordinator, Julie Grissom. Julie will be here at 2:30. No pressure! She knows this is just an exercise, but why waste your great ideas? Let share them with downtown partnership that could benefit from your ingenuity! [Show prototype image]
- We are just building paper prototypes todayYou can build a story board using sticky notes as frames; kind of like a comic book. Draw the UI in the frames showing a progression: first this, then that, then that.[page down]
- Or sketch out a web page on the flip charts. Here is an example of a website with drop-owns and list boxes. Obviously NOT going for a nice, complete, polished design. Think BRAINSTORM. The purpose is to communicate your idea. There are more stickies, paper, markers, stickers for you to use. Plan on spending about a half hour – until 2pm on your prototype. Then spend another 15 minutes practicing your pitch. Plan to spend 5-7 minutes pitching your idea to Julie. You should include a little bit about your persona so Julie will know who you are designing for.
- 2:10Think about wrapping up your prototype in the next 5 minutes so you can take a break. At 2:30pm, be ready to present your idea to your client (B-cycles).
- JakobNeilsen: useit.comA List Apart: http://alistapart.com/Fast Co Design: http://www.fastcodesign.com/Smashing Magazine: http://www.smashingmagazine.com/UX Booth: http://www.uxbooth.com/UX Pond Acute Search: http://www.uxpond.com/UX Stack Exchange: http://ux.stackexchange.com/UI Patterns: http://ui-patterns.com/Patterny: http://patternry.com/WebDev Refinery: http://webdevrefinery.com/Twitter Tim Brown @tceb62UX Archive @uxarchiveCrystal Ehrlich - UX @cbehrlichNielsen Norman Group @NNgroupPeter Morville @morvilleNick Finck @nickfAlan Cooper @MrAlanCooperxDA @IxDAFred Beecher @fred_beecherWebdesigner Depot @DesignerDepotAza Raskin @azaUX Yoda @UXYodaJared M. Spool @jmspoolPatrick Neeman @usabilitycountsChristopher Fahey @chrisfaheyJeffrey Zeldman @zeldman