How To Succeed In Web Design
•Als PPTX, PDF herunterladen•
4 gefällt mir•2,048 views
I gave a talk at the Art Institute of Washington DC's "Pizza With the Pros" event to a group of Web Design and other media art students. This presentation was geared towards this group of students, ranging from Freshmen to Seniors, with the goal of delivering some tips to help them get ahead in the world of Web Design.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie How To Succeed In Web Design
Ähnlich wie How To Succeed In Web Design (20)
Mehr von Shawn Rider
Mehr von Shawn Rider (8)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
How To Succeed In Web Design
- 1. How to Succeed in Web Design Shawn Rider Manager, Technology Solutions PBS Education
- 2. How to Succeed in Web DesignHow to Get Ahead in Web Design Shawn Rider Manager, Technology Solutions PBS Education
- 3. SEO Magic Photo source: photog_friend (http://www.flickr.com/photos/photog_friend/453518012/)
- 4. 10 Tips for Web Design StudentsHow to Succeed in Web DesignHow to Get Ahead in Web Design Shawn Rider Manager, Technology Solutions PBS Education
- 6. I live in Springfield, VA
- 7. I work at PBS
- 8. I’ve been building websites since 1996 Photo source: http://ladg.wordpress.com/2009/06/
- 9. A website from 1996 Photo source: https://www.msu.edu/~karjalae/internet96.htm
- 10. Another website from 1996 Photo source: https://www.msu.edu/~karjalae/internet96.htm
- 11. So… How do we get good at this stuff?
- 12. Become a Savvy User Try every service Photo source: http://www.flickr.com/photos/tracyhunter/120123885/
- 13. Become a Savvy User Make bookmarks with notes Photo source: Shawn Rider
- 14. Become a Savvy User Read the source
- 15. Become a Savvy User Identify the leaders and follow them Photo source: http://www.flickr.com/photos/jtu/3551130301/
- 16. Become a Savvy User Make friends Photo source: http://www.flickr.com/photos/sshb/4084490230/
- 17. Be a Problem Solver State the problem Photo source: http://www.flickr.com/photos/ari/2216430731/
- 18. Be a Problem Solver Break big problems down into tasks Photo source: http://www.flickr.com/photos/wellwin/3870105405/
- 19. Be a Problem Solver Use existing solutions Photo source: http://www.flickr.com/photos/paraflyer/798722444/
- 20. Be a Problem Solver Tenacity is key Photo source: http://www.flickr.com/photos/boltron/623603214/
- 21. Realize Limitations Fail fast Photo source: http://www.flickr.com/photos/james_nash/3412484318/
- 22. Realize Limitations Adjust for known obstacles Photo source: http://www.flickr.com/photos/andrewpescod/442467668/
- 23. Realize Limitations Work to eliminate obstacles Photo source: http://www.flickr.com/photos/mpwillis/2420307573/
- 24. Revere the HTML & CSS Hone the deliverable Photo source: http://www.flickr.com/photos/subtle_3106/463988257/
- 25. Revere the HTML & CSS Use a text editor
- 26. Revere the HTML & CSS Become an expert Photo source: http://www.flickr.com/photos/sherpas428/4350620602/
- 27. Kitten Break Photo source: http://www.flickr.com/photos/cseward/2924150171/
- 28. Know the Stack You aren’t a sysadmin, but… Photo source: http://www.flickr.com/photos/kim_scarborough/147972831/
- 29. Know the Stack Technology is your friend Photo source: http://www.flickr.com/photos/fraise/466949275/
- 30. Try Version Control Protect yourself from mistakes Photo source: http://www.flickr.com/photos/daryl_mitchell/1199598508/
- 31. Try Version Control Required by most businesses Photo source: http://www.flickr.com/photos/geodanny/37532418/
- 32. Try Version Control Get involved Photo source: Shawn Rider
- 33. Estimate your time Time is $$$ Photo source: http://www.flickr.com/photos/tonivc/2283676770/
- 34. Estimate your time Makes you feel happy Photo source: http://www.flickr.com/photos/israel-avila/2406508664/
- 35. Design Interaction Motion makes meaning Photo source: http://www.flickr.com/photos/seeks2dream/2521098846/
- 36. Design Interaction Storyboards and prototypes, oh yeah! Photo source: http://www.flickr.com/photos/kaeru/3132556329/
- 37. Do It Twice Every implementation is unique Photo source: http://www.flickr.com/photos/carnivillain/1353136448/
- 38. Do It Twice No extra code Photo source: http://www.flickr.com/photos/nocallerid_man/3638360458/
- 39. Learn Javascript It’s everywhere Photo source: http://www.flickr.com/photos/28634332@N05/3929624300/
- 40. Learn Javascript Fastest-growing language Photo source: http://www.flickr.com/photos/ajmexico/3281139507/
- 41. Learn Javascript A natural place to begin programming Photo source: http://www.flickr.com/photos/ajmexico/3281139507/
- 42. Learn Javascript Learn a framework (or three) Photo source: Shawn Rider
- 43. In Review
- 44. Become a Savvy User Photo source: Shawn Rider 1
- 45. Be a Problem Solver Photo source: Shawn Rider 2
- 46. Realize Limitations Photo source: Shawn Rider 3
- 47. Revere the HTML & CSS Photo source: Shawn Rider 4
- 48. Know the Stack Photo source: Shawn Rider 5
- 49. Try Version Control Photo source: Shawn Rider 6
- 50. Estimate Your Time Photo source: Shawn Rider 7
- 51. Design Interaction Photo source: Shawn Rider 8
- 52. Do It Twice Photo source: Shawn Rider 9
- 53. Learn Javascript Photo source: Shawn Rider 10
- 54. Thank You The End Slides and Links Available for Download: http://shawnrider.com March 10, 2010
Hinweis der Redaktion
- Brief self intro, read title. Then pause to correct title.
- Since “success” is so difficult to define, we should really say that this talk is more focused on how to get ahead in web design – things that every new web designer should know out of school but probably doesn’t.Of course, we could use a little SEO magic on it and…
- Click through quickly
- And then we’d end up with a title that is not only technically correct, but sums up the limitations of the presentation format and results in something that a weathered Web veteran would likely scan past in a list on Reddit.Nonetheless, here are some things about web design that might not fit neatly into your college courses, but you should try to know them anyway.
- Click through quickly
- Click through quickly
- Click through quickly
- Some things were not so different back then… But web design was pretty much an oxymoron.
- Notice that McDonald’s pioneered the common “adult or child” user interface…
- It’s just too funny…Consider, too, that this design is from an organization that, in 1996, has over 100 years of experience in evolved text and image layout and design.
- The short answer is: We never do.But that’s not entirely true. We never master Web Design and Development because the technology and culture is constantly evolving. We can, however, become very good at making Web things. And the nature of the Web means that a savvy Web user is always in danger of becoming a Web creator.
- Try every service and website you can find, if only to secure your username against anyone else ever taking your name. Remember that online your username is a major piece of your identity, and using consistent usernames make it easier for people to connect you (and, thus, your reputation) across the different sites you use.But as a maker, the reason you are doing this is to learn from how others are solving problems. You must be aware of what your friends and competitors are doing, and a wide range of knowledge about the Web ecosystem is always helpful to a Web Designer.
- Use a service such asDelicious.com, Mag.nol.ia or Evernote to track your bookmarks. And be sure to tag and notate them usefully. Any amount of effort you put into this (and use plugins and whatnot to make the effort as low as possible) will be rewarded ten-fold the first time you need to find an example, some inspiration, or that tutorial you read late one night.
- One beautiful thing about Web Design and Development is that so much of our work is impossible to obscure. All HTML, CSS and Javascript is delivered to your browser as plain text files that can be saved, viewed, analyzed and used to help further your understanding and technique.Of course, the quality of code on the Web is far from uniform, so always be sure to remain true to the best practices and standards that you have learned in school. But reading the source code of sites is an easily accessible way to learn valuable techniques.
- With social services such as Twitter and Delicious, it is easier than ever to keep track of an area of research. Find people who are leading the areas you’re interested in and follow them online. This includes subscribing to their bookmarks and status updates, but don’t forget about “old-fashioned” systems such as subscribing to RSS feeds and signing up to mailing lists. These are all the ways things get discussed and decided online. If you want to be a part of the action, then you need to know what’s going on.
- It’s important to never forget that everyone out there is smarter than everyone in here. No matter how big your room is, it will never contain all of the good ideas or solid talent in the world. So keep open to others. Find a community and become a part of it.
- Realize that design, and especially Web Design, is all about solving problems. However, with the addition of complex technology, the problem often becomes poorly defined. The focus become “making it work” as opposed to “doing what we need to get done.”Being able to succinctly state the problem is key: “Users must be able to login”, “Encourage users to sign up for promotional emails”, “Present the informational hierarchy of the site in a concise navigation”
- Often Websites get stuck in a far-sighted mode where nothing is ever brought down to earth. We see this all the time in technology in general. Your job is to break big problems down to doable tasks and then complete them. Just like when you attack an HTML page, you start with just one component and finish it out. If you work in a hodge-podge pattern then you’ll inevitably forget something.When you break these tasks out, be sure to phrase them as something that has a measurable outcome. For example “Design really cool signup page” is not as measurable as “Design new signup page to increase signups 15% over previous year.” Specifying the outcome you want in the statement of a task better insures that you will get what you want.
- If a solution exists – a method of creating a visual effect, or a standard way of formatting HTML for a component – then you should probably use it. It’s almost never faster or better to recreate the work of another.However, at the same time we must be vigilant against bad code. This is the dual-edge of such a communal industry: Bad code gets passed around almost as often as good. You must be good enough at what you do to either evaluate a third-party solution or to know where to go for expert advice.
- A Web Designer, or anyone making websites, is never finished. There is no end. A Website that is not currently in development is dead. Everything is constantly under construction, including yourself.You must be tenacious when you are looking for solutions, and you must be willing to research, experiment and seek advice.
- It’s often abused, but the notion that failing quickly is better than a long, drawn-out failure has become a rule of the Web. When you are working through projects and solutions, don’t be afraid to make something that doesn’t work, or that works poorly. But develop your skills so that you can tell quickly when something isn’t working out so that you can take steps to either correct or abandon course.Of course, failure is never a reason to stop trying.
- When you do realize a limitation – be it hardware, technical, resources, whatever – make adjustments as soon as possible. If it becomes apparent that the server architecture is not going to support the AJAX-based chat system, then make that known when you notice that the dev site is dog slow. Don’t wait for the day before launch to say something. A lot of times, adjusting vision and scope is left to managers, but it is the role of every hands-on, skilled individual contributing to a project to raise the alarm when something is not right. Come with a clearly stated problem and some ideas towards a solution.
- It is up to every person on the team to help eliminate limitations. There may be some things that are truly out of your control as a Web Designer, but the world of HTML, CSS and Javascript is incredibly dynamic. It is more than can be expected of anyone to stay completely abreast of developments and new techniques in all of these areas, but you should be constantly searching to fill in holes in your knowledge and/or keep up with new techniques and developments.
- In the end, what a User receives in their browser are largely text files full of HTML and CSS. Everything about your site is dependent on well-formed code. The fact that so many people in general have so little respect for well-written HTML and CSS shows just how poorly many people who are making Web Sites understand what they are doing.
- Graphical, or WYSIWIG, editors for CSS and HTML are not for professionals. There are many editors that make the job of a Web Designer easier, quicker and less frustrating.
- Web Designers should be experts in HTML and CSS. They should be snobby about it. They should mock people who don’t know the difference between a DIV and a SPAN (OK, they probably shouldn’t be jerks about being so awesome…).
- Phew! That’s a lot of stuff so far. But we’re past the halfway point now.
- Think of a Web Designer’s relationship to the underlying systems and hardware that run a website in the context of a Print Designer’s relationship to the paper on which a design is to be printed. If the print designer does not understand the unique qualities of different types of paper, then he cannot fully control the outcome of his prints. The same is true for Web Designers.
- If you are only interested in making pretty pictures, then you should not be doing Web Design. Designing for the Web is inextricably entwined with technology, and you should embrace that.
- Code versioning is very useful for protecting against accidentally overwriting file contents or losing archived files. It is essential to software projects so that multiple individuals can work on different parts of the project without stepping on each other’s toes.
- Most businesses use version control and will mandate its use by both employees and contractors. If you are working freelance for a larger corporation, you may be required to use their version control system, which might involve learning a whole new complex system overnight so that work is not delayed.
- The best way to get familiar with version control systems is to consult the support documents and begin participating in one of the sites listed above. Open source projects are constantly in need of designers, and these sites are geared towards helping novice users get into their particular version control systems.
- Whether you are working freelance or for a large corporation, time is money. The more accurate you can make your estimates, the better.But estimating is very difficult. Begin tracking the time it takes you to complete tasks while you are in school and you will be better at making estimates when you get out of school.
- Making estimates and tracking the time you spent on specific tasks will also help you realize how much you are improving as you build your Web Design skills. And that will make you happy. Web design is hard work!
- “Design” does not stop at the site graphics and layout. On a website, motion conveys meaning, and part of designing information architecture and presentation is also designing processes.Don’t underestimate the importance of quick, responsive animation and graphics changes for a user’s experience.
- Sometimes traditional comps are not enough to convey the complex interactions of a sophisticated Website. Storyboards can help convey in still images the sequence of events and actions involved in an interface. And even better are working prototypes – dummy up some data and make something that can be clicked and seen.
- Treat every implementation as a unique thing. Realize that every time you do something both technology and culture have changed. You must always return to your assumptions and evaluate whether or not they are still valid.One comp is not enough. And one writing of the HTML and CSS is not enough. Every time you should be making at least two drafts so that you can evaluate effectiveness, stability, and quality of your solutions.
- When creating HTML and CSS, we often use, re-use, and borrow code from various places. This is fine as long as you completely understand what’s happening in the code and as long as you don’t leave in anything that is outdated or superfluous.
- Javascript is used on every single website. It facilitates the graphically rich experiences we have come to expect from top Websites. It has made its way to mobile devices, web servers, desktop applications, videogames, and more.
- Javascript is currently the fastest-growing programming language. In the chart on this slide the blue line shows the growth of news coverage of javascript since 2004. Large companies including Apple, Google and Mozilla have made significant recent investments in Javascript.
- Web Designers are generally not asked to do much programming, but Javascript is the one place where Web Design and programming meet. What was once purely thought of as Web Design is now blending with programming to become “Frontend Development.” Web Design jobs will exist all along the spectrum from “mostly design” to “lots of coding”.One thing to note is that skill with Javascript can be directly related to compensation for a Web Designer these days.
- Learning “the basics” is good, but learning a framework is more practically useful. Look, programming is a huge topic and difficult to get into. Nothing is going to make it super easy. But for many of the daily requirements for Web Designers, basic knowledge of how to implement existing Javascript libraries will be sufficient.There are many very good Javscript frameworks. I recommend jQuery, Processing.js, Prototype, MooTools, YUI. All of these frameworks expose easy APIs that are well-documented.
- Use a service such as