Print to Interactive Roadmap. with Patrick McNeil

Transcription

1 Print to Interactive Roadmap with Patrick McNeil

2 Spoiler alert: Print to web doesn t mean what it used to

3 The agenda The agenda The problem Industry overview User centered design process End goals Skills you need to build

4 Who am i? Find me on pmcneil.com & designmeltdown.com Follow me on I am a writer, designer, teacher and developer I love to write books, talk about design and teach designers about the web

5 Defining the problem

6 Case in point Job post from

7 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:

8 Time to reboot Time to reboot We need a new survey of the playing field

9 Interactive design industry overview

10 What print to web used to mean What print to web used to mean What you thought you were still trying to accomplish

11 Abracadabra! You re a web designer!

12 The good old days Graphic Designer The web guy Web site

13 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

14 It is not a diversion It is not a diversion It s the destination

15 Some good news You have to pick a focus

16 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

17 You are not expected to be an expert on every nuance of the field no one is

18 Don t underestimate the value of a broad range of exposure this is the norm

19 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

20 It can be overwhelming

21 Just one thing to know Oh snap! This just got awesome.

22 The User-centered design Process

23 A definition: User-Centered Design: a user interface design process that gives extensive attention to the needs, wants and limitations of users.

24 But I do that already! Thinking about users is not enough you must test your ideas.

25 Case in point Genius design an alternate design process

26 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

27 Follow with style Don t lead with it

28 Accommodates for everyone - Graphic Designer - UI/UX specialist - Information Architect - SEO and Marketing - Back end developers - etc

29 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

30 Why do I care? This can be a guide to your future

31 End goals & job titles

32 A brief survey of jobs Keep in mind this is not an exhaustive list

33 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

34 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

35 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

36 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)

37 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?

38 skills to build So you can move forward

39 User-Centered Design A foundation to build on A great introduction:

40 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

41 Learn about usability Consider the effectiveness of your solutions Read: Don t Make Me Think by Steve Krug

42 HTML & CSS Learn the basic code powering the web Read: HTML & CSS by Jon Duckett Take one of my HOW Design University courses:

43 Planning Project planning is good for business. Wireframes, sitemaps and live prototypes. Read: Communicating Design By Dan Brown Explore tools like:

44 User testing Know the results of your work. A great introduction to user testing: Tool round ups help you see the possibilities:

45 Learn to learn Pay attention to the technical people around you they know how to find answers

46 Communication is key Try to be an island and you will sink

47 Continuing Ed. For ongoing learning

48 Blogs to frequent: Good sources for ongoing insights:

49 Keep tabs on the industry: Designer friendly resources:

50 Consider a degree BFA/MFA in Interaction Design BS/MS Human Computer Interaction (HCI)

51 Embrace the process Because the journey never ends

52 Good luck! And let me know how it goes

53 View the presentation View this entire presentation online:

54 Thank you