UX/UI

For USF Talk

Transcript

1. UX/UI DESIGN a Brief Primer by Alison Foxall, Partner @ Gobble Logic
2. HELLO! I’M ALISON ➤ Designing on the web since 1998 ➤ Founded Tampa Bay WordPress, a user group in 2010 ➤ Co-Founded Gobble Logic, a web strategy firm in 2012
3. DESIGN: MARKETING Patterns and Design Decisions
4. “ a design pattern is a general repeatable solution to a commonly occurring problem in design. DESIGN PATTERN?
5. Common design patterns: navigating
6. Common design patterns: error handling on forms
7. Design patterns in history: mid to late 90’s
8. DESIGNING FOR MARKETING ➤ Primarily focuses on getting the user to take an action that, generally, leads to close a sale. ➤ Various data sources are taken into account to make better design decisions that will increase conversions. ➤ Must present clear action or next step to the prospect and use psychology tactics to further reinforce that action.
9. OTHER MARKETING PLATFORMS ➤ Email marketing ➤ Same marketing principles apply but on a technical level, creating HTML emails are based on old “tables for layout” approach. ➤ Social Media ➤ Creative copywriting and use of imagery is crucial for social networks. Generally no programming knowledge is necessary for social media marketing.
10. DESIGN FOR SOFTWARE ➤ Focuses on easy user interaction by using common design patterns and faster front-end technologies. ➤ Audit trails and listening to customers are necessary to make design decisions. ➤ Audit trails: record user interaction and keep track of errors. ➤ At times, software will have marketing built in to get users to upgrade or purchase something in-app.
11. TOOLS & LANGUAGES things to help you do your job
12. FRONT-END LANGUAGES ➤ CSS: Sass & Less ➤ CSS controls the look and feel of a design ➤ Preprocessors help you cut down on time writing CSS ➤ HTML ➤ This is the webpage. ➤ Javascript ➤ Helps move things around on the page or do other neat things like validation.
13. HELPERS & TOOLS ➤ Bourbon, Neat ➤ CSS3 library as well as a grid framework to help you design and develop ➤ jQuery ➤ Extremely popular JS library nearly everyone uses. Helps you animate ➤ Animate.css ➤ Very helpful to “animate all the things” on webpages. ➤ Sketch ➤ Popular mockup application that is replacing Adobe Photoshop for its ease of use.
14. VERSION CONTROL ➤ Usually ignored by designers, but is crucial to use in a team environment when many are “touching” a project. ➤ VC helps to nail down issues that may have risen due to changes you or another team member made, and tracks productivity. ➤ It also allows you to roll back to a previous version if something went terribly wrong! ➤ Github is a popular platform for keeping repositories of code. Bitbucket is also popular. ➤ Some developers use command line to interface with GIT (a versions control system), others use a GUI.
15. QUESTIONS? happy to answer!