web development 101 getting your site right from the beginning or starting over if you didn t n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Web Development 101: Getting Your Site Right from the Beginning (or starting over if you didn’t) PowerPoint Presentation
Download Presentation
Web Development 101: Getting Your Site Right from the Beginning (or starting over if you didn’t)

Loading in 2 Seconds...

play fullscreen
1 / 55

Web Development 101: Getting Your Site Right from the Beginning (or starting over if you didn’t)

106 Vues Download Presentation
Télécharger la présentation

Web Development 101: Getting Your Site Right from the Beginning (or starting over if you didn’t)

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Web Development 101: Getting Your Site Right from the Beginning (or starting over if you didn’t) Lisa Williams lisa@placeblogger.com Twitter: @lisawilliams

  2. Placeblogger World HQ! (now with free coffee) Cambridge, MA

  3. Screenshot of Placeblogger

  4. Lisa on LinkedIn: linkedin.com/in/lisawilliamsLisa on Twitter: @lisawilliamsI am learning to love Facebook, so friend me I need the support to stick with it

  5. Tracy!!

  6. Who this is for • Non-programmers who want to build a new website or add features to/extend an existing website • Project leaders who will be working with others on their team to set up and run a website and web strategy for a project • Site editors and admins who have a day-to-day role in building and running a community information project. • If you ever want to step up to design, launch and run another project.

  7. You don’t have to pay attention to this session if: • You’ll never do anything on the web ever again. • You’ll never ask for money from anyone to do anything with a web component ever again. • You’ll never touch, improve, or ask for money for your current site again.

  8. OK? Cool.

  9. Attracting & Landing Tech Talent for Your Project

  10. You’re not buying, you’re selling.

  11. Where do I find them?

  12. How a coder sees your project

  13. What type of relationship?

  14. How much should I pay?

  15. Don’t forget to launch

  16. Don’t forget to look beyond launch What feature do you add on day 2, and how?

  17. Write a spec No, really. Write a spec.

  18. Because if you tell a developer

  19. “I want a site with citizen journalism where local businesses can buy their own ads and I want people to blog but I want to be sure that nothing gets onto the front page that we don’t want there and oh we want our twitter feed to appear somewhere and we need to link our Facebook fan page and we want people to be able to rate comments and share links and upload photos and maybe we need something that works on mobile phones…”

  20. You won’t get the site you want. You’ll get whatever the developer feels like giving you.

  21. Your developer’s job is writing code Mind reading is not in the job description

  22. Resistance to writing things down I haven’t convinced many people to write site plans But the ones I have convinced aren’t driven crazy and their projects succeed

  23. Not writing a site plan • Is the single biggest risk you can take with your project. • Is entirely unnecessary. • Keeps you from really digging into your project and finding out what it’s about – writing a site plan is about THINKING IT THROUGH and DISCOVERY. • Keeps you from building the kind of project momentum that is crucial in winning over board members, community organizations, partners, and volunteers.

  24. If your site is already live, you don’t need a site plan That is, if you never want to get any more money for it.

  25. Without a site plan you can only succeed by accident Succeeding on purpose is SO much more fun. Here’s how.

  26. Entry points • Pitch • Team Bios • Influences • User Stories • Tree Diagram/Sitemap • Wireframes • Feature List

  27. Entry points • Pitch • Team Bios • Influences • User Stories • Tree Diagram/Sitemap • Wireframes • Feature List

  28. Write a pitch One sentence that describes your project in a clear, concise, and compelling way.

  29. Team Bios/Project Inspiration Developers want to know who they’ll be working with, and why this project is cool and important

  30. Influences List other websites that have been influential in your thinking about your project as well as sites you use everyday, and sites whose design you like

  31. Tree Diagram/Sitemap A tree diagram showing your main page and the major landing pages of your site (don’t forget admin pages!)

  32. Feature List The big long list of features. Some people start with the list and then do wireframes, others do wireframes first and then list everything you can click on and write down what it does.

  33. User Stories 3-4 one paragraph descriptions of typical users of your site, why they come there, why they’d stay

  34. Wireframes Simple sketches of the front page and landing pages on your site

  35. What is a wireframe? • A wireframe is a grid with boxes suggesting the layout of a web page. • Inside each grid is a UI element called a “design pattern.” • We encounter familiar design patterns on the web every day: • Search bar, calendar picker, search results, tabs, login box. • You can present the same data in different ways – stories could be in a list or in a carousel (one story is shown, with left and right buttons to scroll through stories)

  36. I ♥ Wireframes They give you an excuse to go out and buy cool office supplies

  37. UI pattern sites show you examples of common web design patterns

  38. QUICK GET A PEN! • UI-patterns.com • UIPatternFactory.com • Welie.com/Patterns • Yahoo! Design Library • Flickr.com/groups/ilovewireframes • Share back – put your wireframes and design patterns out there

  39. Hang it on the walland back up

  40. Placeblogger’s original site plan was 14 pages long and had 8 wireframes