Print to Interactive Roadmap with Patrick McNeil
Spoiler alert: Print to web doesn t mean what it used to
The agenda The agenda The problem Industry overview User centered design process End goals Skills you need to build
Who am i? Find me on pmcneil.com & designmeltdown.com Follow me on twitter @designmeltdown I am a writer, designer, teacher and developer I love to write books, talk about design and teach designers about the web
Defining the problem
Case in point Job post from http://www.authenticjobs.com/
I feel totally lost A sampling of job titles from the designer category: UX/Creative Media Designer SR Product Designer UX Junior Designer & Front-ender UI Designer Front End Designer & Developer Mid to Senior User Experience Designer Digital Designer User Experience Designer User Interface Designer Interaction Designer Mobile Product Designer Senior UX Architect Web Designer UI/UX Designer Visual Designer Interactive Story Designer Design Technologies Visual Designer for Web & Video Digital publication interface designer Mobile Designer Samples from: http://www.authenticjobs.com/#category=3&search=designer
Time to reboot Time to reboot We need a new survey of the playing field
Interactive design industry overview
What print to web used to mean What print to web used to mean What you thought you were still trying to accomplish
Abracadabra! You re a web designer!
The good old days Graphic Designer The web guy Web site
Now it takes a village UI/UX Designer Graphic Designer Front-end developer Marketing/ social media Web site Back-end developer SEO Expert Content strategist Information architect
It is not a diversion It is not a diversion It s the destination
Some good news You have to pick a focus
My career My focus: Interface Design Aesthetics User-centered design Front end development (HTML/CSS/JavaScript) Teaching Things I wish I had more time for: Mobile development Back-end development SEO, social media, marketing and brand strategy Information architecture Traditional graphic design Heavy WordPress development
You are not expected to be an expert on every nuance of the field no one is
Don t underestimate the value of a broad range of exposure this is the norm
It takes a village UI/UX Designer Graphic Designer Front-end developer Marketing/ social media Web site Back-end developer SEO Expert Content strategist Information architect
It can be overwhelming
Just one thing to know Oh snap! This just got awesome.
The User-centered design Process
A definition: User-Centered Design: a user interface design process that gives extensive attention to the needs, wants and limitations of users.
But I do that already! Thinking about users is not enough you must test your ideas.
Case in point Genius design an alternate design process
The process The details vary, but the general ideas are the same: Plan (what are we setting out to do) Research (who is our target audience) Produce design solutions (low fidelity sitemaps, wireframes etc) Evaluate the designs (test, test and test) Rinse and repeat Produce a visual design Go to production (development) This is an abridged version of the process
Follow with style Don t lead with it
Accommodates for everyone - Graphic Designer - UI/UX specialist - Information Architect - SEO and Marketing - Back end developers - etc
Another perspective Another view on the process: Define the problem Form a hypothesis Test your idea Repeat until satisfied Design the visuals Code the results
Why do I care? This can be a guide to your future
End goals & job titles
A brief survey of jobs Keep in mind this is not an exhaustive list
UI / UX Designer Aka User Interface / User Experience Designer Core skills: Typography, color, layout and traditional graphic design skills Wireframing and prototyping User testing Device specific issues (ios, Android, tablet, smartphone etc) Interface design (visual styles) HTML / CSS to translate designs into code
Web designer Core skills: Typography, color, layout and traditional graphic design skills Design for multiple platforms (Operating systems and devices) Responsive design & mobile specific design Web production (How sites are built) Work with UX designers Work with backend developers HTML, CSS and JavaScript
Front-end developer Core skills: HTML, CSS and JavaScript jquery, AJAX and JSON Device and browser testing Basic SEO knowledge Responsive web design development Design knowledge a huge plus Content Management System specifics
App Designer Native apps for ios, Android etc A spin off of UI / UX Designer Core skills: Wireframing and prototyping User testing Device specific issues (ios, Android, tablet, smartphone etc) Interface design (visual styles) HTML / CSS (many apps use HTML/CSS)
A few common skills The fundamentals of Graphic Design Adobe Creative Suite (some old, some new) Technology pluses: JS, jquery, CMS, source control etc Work with developers Stay current on trends, styles and patterns Did I mention HTML and CSS?
skills to build So you can move forward
User-Centered Design A foundation to build on A great introduction: http://www.usability.gov/basics/ucd/#.ub8-juf5f8e
User Experience (UX) Make informed decisions through an understanding of users Read: The Elements of User Experience by Jesse James Garrett Read: A Project Guide to UX Design by Russ Unger
Learn about usability Consider the effectiveness of your solutions Read: Don t Make Me Think by Steve Krug
HTML & CSS Learn the basic code powering the web Read: HTML & CSS by Jon Duckett Take one of my HOW Design University courses: http://www.howdesignuniversity.com/design-workshopinstructors/patrick-mcneil/ http://learncss.tutsplus.com/ http://www.codecademy.com/tracks/web
Planning Project planning is good for business. Wireframes, sitemaps and live prototypes. Read: Communicating Design By Dan Brown Explore tools like: http://www.balsamiq.com/
User testing Know the results of your work. A great introduction to user testing: http://www.hongkiat.com/blog/usability-testing-what-you-need-to-know/ Tool round ups help you see the possibilities: http://uxdesign.smashingmagazine.com/2011/10/20/comprehensive-reviewusability-user-experience-testing-tools/ http://www.usefulusability.com/24-usability-testing-tools/
Learn to learn Pay attention to the technical people around you they know how to find answers
Communication is key Try to be an island and you will sink
Continuing Ed. For ongoing learning
Blogs to frequent: Good sources for ongoing insights: http://uxmag.com/ http://www.uxbooth.com/articles/ http://www.alistapart.com/ http://blog.usabilla.com/
Keep tabs on the industry: Designer friendly resources: http://sidebar.io/ http://codevisually.com/ http://tympanus.net/codrops/ http://css-tricks.com/ https://news.layervault.com/ http://www.webdesignerdepot.com/category/social-media/
Consider a degree BFA/MFA in Interaction Design BS/MS Human Computer Interaction (HCI)
Embrace the process Because the journey never ends
Good luck! And let me know how it goes
View the presentation View this entire presentation online: http://pmcneil.com/
Thank you