Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Making a website


Published on

A short case study to understand how a website is designed and created.

Intended audience: anyone involved in starting, managing, or contracting for a web design and development project.

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

Making a website

  1. 1. Making awebsiteA short case study to understand how a website isdesigned and created
  2. 2. If you are hiring out a website designer/developer,know the practices to look for ‣ A process to identify the goals and requirements, and to sketch out a lot up front ‣ Design based on a solid understanding of the web ‣ Pages created with modern practices, and a development style responsive to changes ‣ Platform (application) and template testing & QA ‣ Repeatable and observable deployment ‣ Maintainable with little to no developer assistance
  3. 3. A lot of this is stuff that youprobably won’t see ‣ You just care about getting a site that looks good and works like you want! ‣ But if you ignore it, you’ll end up with a mess ‣ Know how the sausage is made
  4. 4. BizBuzz is a communications& marketing event ‣ Presented semi-annually by the Arlington Chamber of Commerce’s Communications Council ‣ A panel of peer experts share their experience on topics such as relationship marketing, brand management, and generating buzz ‣ Naturally, an event about generating buzz needs its own buzz machine ‣ As Communications Council members, we volunteered to create a website. Here’s how we did it, making sure it looked great, worked right, and didn’t kill our budget
  5. 5. Strategize Design Develop Test Deploy UpdateFirst we identified theprimary goals of the site ‣ Example goals for a business site: sell the product, educate customers, get online leads, sign people up, provide authoritative reference ‣ Identifying the primary goals has to be done with the client ‣ Choose as few goals as possible for “primary” goals ‣ BizBuzz goals: (1) provide all the necessary information about the event in one place and (2) provide an additional entry point for people to find out about it
  6. 6. Strategize Design Develop Test Deploy UpdateThen we asked about thespecific site requirements ‣ It’s an event, so we need to know when and where it is, and let visitors add the event to their calendars ‣ There are speakers, so we should know who they are, a bit about them, links to their sites, and maybe head shots ‣ Definitely want a catchy write up about the event ‣ Nobody should have to come to us to make changes - the event organizers should be able to make edits
  7. 7. Strategize Design Develop Test Deploy UpdateEnumerate and record theserequirements! ‣ For a complex site or web app we use a development tool called PivotalTracker ‣ Use a project management tool or even a shared spreadsheet ‣ This was a small, quick project - we just used notes (that’s how we recorded the data requirements you see here)
  8. 8. Strategize Design Develop Test Deploy UpdateOrganize as much of the sitecontent as possible beforestarting headlong into design ‣ Acknowledge that the content will change, but do it anyhow ‣ Prepared content might change the approach to layout or navigation design ‣ Content readiness is key to launching on time, not being ready can delay launch of a site for weeks or months ‣ For the BizBuzz site we had an event description and basic snippets ready before designing
  9. 9. Strategize Design Develop Test Deploy UpdateOnce we knew what wasrequired we could plan thedesigns with wireframes http://clients.home/nwra/wireframes/content.html 6/4/10 4:42 PM Member!Log!In Newsletters Events Contact!NWRA ‣ Blueprints for web pages Home!> ![Section!Title]!> ![Content!Title] Logo Est.!1932 [Content!Title] [Content!Subtitle] Issues May!7th,!2010 Author!Name About!NWRA Not design, but help the Tags:![Tag!1],![Tag!2],![Tag!3] ‣ NWRA!Members [Lorem!ipsum!dolor!sit!amet,!consectetuer!adipiscing!elit.!Etiam!sit!amet!elit [Page!Title] vitae!arcu!interdum!ullamcorper.!Nullam!ultrices,!nisi!quis!scelerisque convallis,!augue!neque!tempor!enim,!et!mattis!justo!nibh!eu!elit.!Quisque designer and the ultrices!gravida!pede.!Mauris!accumsan!vulputate!tellus.!Phasellus [Page!Title] condimentum!bibendum!dolor.!Mauris!sed!ipsum.!Phasellus!in!diam.] [Lorem!ipsum!dolor!sit!amet,!consectetuer!adipiscing!elit.!Etiam!sit!amet!elit [Page!Title] vitae!arcu!interdum!ullamcorper.!Nullam!ultrices,!nisi!quis!scelerisque convallis,!augue!neque!tempor!enim,!et!mattis!justo!nibh!eu!elit.!Quisque [Page!Title] ultrices!gravida!pede.!Mauris!accumsan!vulputate!tellus.!Phasellus condimentum!bibendum!dolor.!Mauris!sed!ipsum.!Phasellus!in!diam.] customer understand the [Page!Title] [Lorem!ipsum!dolor!sit!amet,!consectetuer!adipiscing!elit.!Etiam!sit!amet!elit vitae!arcu!interdum!ullamcorper.!Nullam!ultrices,!nisi!quis!scelerisque convallis,!augue!neque!tempor!enim,!et!mattis!justo!nibh!eu!elit.!Quisque [Page!Title] ultrices!gravida!pede.!Mauris!accumsan!vulputate!tellus.!Phasellus condimentum!bibendum!dolor.!Mauris!sed!ipsum.!Phasellus!in!diam.] Back!to!Top [Upcoming!Events] page Western!Water!Seminar July!28"30,!2010 Snow!King!Lodge Jackson!Hole,!WY Read!more Add!event!to!your calendar ‣ Pictures make discussing Contact!NWRA [Sign!up!for!Weekly!Reports] National!Water [Sign!up!for!our!"Weeklies"!—!read!the!latest!news!articles,!press Resources!Association releases!and!discussions!about!western!water!related!issues] 3800!North!Fairfax Drive,!Suite!4 Name: Arlington,!VA!22203 concepts easier Tel:!703.524.1544 Email: Fax:!703.524.1548 Add!NWRA!to!your Organization: address!book Send!NWRA!a!message Sign!Up [*!See!our!Privacy!Policy!and!Terms!and!Conditions.] ‣ Gets expectations right Member!Log!In Submit!News Contact!NWRA Sitemap A layout-oriented example Page 1 of 1
  10. 10. Strategize Design Develop Test Deploy UpdateWireframes in hand, we couldmockup alternative designdirections Two different design directions (top of pages only)
  11. 11. Strategize Design Develop Test Deploy UpdateThe purpose of mockups is toconvey the core designelements ‣ Show as many or all of the features, including page layout, type, and user interactions ‣ Typically includes only a few pages for smaller projects - design is craft and lots of design time is expensive ‣ For this project, one-page design directions were sufficient ‣ Then have the customer (BizBuzz organizers) indicate which they prefer and use that as the base design
  12. 12. Strategize Design Develop Test Deploy UpdateThe templates are designedwith the web in mind ‣ Responsive layouts are used so that the site can be meaningfully viewed on a large screen PC or a phone ‣ Progressive enhancement is used so that visual effects can be applied without ‘breaking’ older browsers* ‣ The pages are coded to be accessible to viewers with disabilities (e.g. using screen readers) and easily understood by search engines (a component of search engine optimization) ‣ Layouts take into account into account desired and expected user interaction *IE6, we’re looking at you
  13. 13. Strategize Design Develop Test Deploy UpdateTo build the BizBuzz site, wechose to use Django ‣ Every site is built and served on something - plain HTML pages, WordPress, Drupal, Ruby on Rails, custom scripts ‣ Django is the web application framework for perfectionists with deadlines - we can build the site exactly as needed, very quickly, using the (well crafted) HTML we want ‣ Brilliant stuff built-in, from security to the admin interface and it scales down (individual blogs) and up (The Onion, Disqus)
  14. 14. Strategize Design Develop Test Deploy UpdateWe simultaneously begandeveloping the site andfinalizing the designs ‣ Once you know what is going to be required on the site and on what pages, you can start constructing templates and the database ‣ The site should be designed so that the visual design is distinct from your content - adding content and updating the look should have no mutual effects
  15. 15. Strategize Design Develop Test Deploy UpdateMake sure things work bytesting early ‣ We didn’t rely on a one-shot testing phase at the end of the project, each feature was tested as it was developed and before it’s added into the project ‣ This is a good place for automated testing (critical for web apps) ‣ We only knew what to test for both functionally and visually because we had specified requirements from the project strategy phase
  16. 16. Strategize Design Develop Test Deploy UpdateMake sure the site looks okayacross different systems,browsers, & devices ‣ Older browsers with lesser capabilities won’t show all the visual candy ‣ While IE6 (bottom right) eats your designs alive!
  17. 17. Strategize Design Develop Test Deploy UpdateWe set up on a good systemthat we could customize ‣ Cost is a poor excuse not to use a good web host - we used a virtual server courtesy of Ascend Technology ‣ This allows features unavailable on, say, a domain registration firm moonlighting as a webhost lol, servers? I don’t care, just show me ‣ For security and performance we the damn site! used Ubuntu Linux running the (Yeah, we know) very fast nginx web server
  18. 18. Strategize Design Develop Test Deploy UpdateNow, with our deploymentservice, we click a button toupdate Yes, please
  19. 19. Strategize Design Develop Test Deploy UpdateMake sure there is a goodway for others to edit the site This is how Django rolls
  20. 20. Assessing the BizBuzz siteand the project goals‣ All of the requisite information about the event is available, including topic, people, venue, and an add-to-calendar link‣ The site is a separate, search engine accessible site, with links back to the Chamber of Commerce site‣ Event organizers can edit and add information without special assistance‣ And it’s extensible, allowing us to modify the functionality and add features like a BizBuzz blog (Success)
  21. 21. The super-fast summary: how to build agood web site (or app) ‣ Know who your audience ‣ Build on platforms that is at all times make you productive ‣ First plan with the client ‣ Have a deployment plan and system in place ‣ Then design for the client ‣ Be responsive, accessible, and standards compliant ‣ Test throughout ‣ Use a good source control system
  22. 22. Credits ‣ BizBuzz logo design: Clear Sky Creative ‣ BizBuzz event sponsorship: Arlington Chamber of Commerce ‣ BizBuzz event organization: Arlington Chamber of Commerce Communications Council (co-chairs Joey Tackett and Shannon Swahn) ‣ Web site: Wellfire Interactive ‣ Web site hosting: Ascend Technology ‣ Mess pic, #3: ‣ Server pic, #16:
  23. 23. About Wellfire Interactive At Wellfire Interactive we design and build web sites and applications for our customers with their business – and their customers – in mind. Our clients include non-profits advocating to better democracy and businesses working to bring new services to life over the web. We often use Django, we always use standards based markup, and we definitely like a challenge. -Falls Church,VA