PRINT2WEB Class Outline
[ School of Visual Concepts Winter 2008 ]
- 1 | Differences between print and web
- 2 | How the web works
- 3 | Determining a projects scope
- 4 | Red flags about projects
- 5 | Gather assets, text, images
- 6 | Brainstorm and thumbnail ideas for the website
- 7 | Build a site map and architecture
- 8 | Wireframe the site
- 9 | Determine the needs you have for programming and backend
- 10 | Build the graphics for web, optimizing them for viewing
- 11 | Build the website template and repeating elements and pages
- 12 | Pull all elements together and post on a temporary site
- 13 | Optimize your site for Search Engines
- 14 | Testing your site
- 15 | Conclusion
1 | Differences between print and web
To start you on the path to understanding design on the web and how it works. We will explore all the technical aspects in general terms and demystify all the technical mumbo-jumbo. We will also stress the importance of good Information Architecture (IA) - This is one of the key differences when designing for the web, the non-linear experience. To help you gain a greater understanding of the special requirements that go into building and deploying a small (or large) site on the web. To build appreciation for the process and methodology of creating a website.
Differences between print and web
- 1. A little history, origins of the web
- 1. Web is a non-linear experience
- 2. Users experience your site with different browsers, monitors, computers and connection speeds
- 3. You have limited control of typography and layout
- 4. Resolution is lower and color is greater (RGB) than print
- 5. Modern web design
2 | How the web works
Understand how the web works, including clients, servers and browsers.
How the web works key points
- 1. Understand web basics, what is http?
- 2. Understand how a web page is requested by a client and delivered by the server
- 3. Understand the underlying code syntax of a web page/Source code
- 4. Understand what html, xhtml, css, javascript and php are
- 5. Understand absolute and relative links
- 6. Naming conventions for web files/servers/folder structure/index.html
- 7. Understand the jobs involved in building a web site
3 | Determining a projects scope
Asking questions is the key to understanding what a client is looking for. Form follows function. A site designed to generate sales is very different from a non-profit, an artist's portoflio site, or a technology companies. We'll also discuss knowing what questions to ask to help you decide whether you need backend work.
Project scope key points
- 1. What is the goal of the website
- 2. Does the site need backend programming?
- 3. Is the timeline realistic to get the work done?
- 4. Do you need to collaborate with anyone on the site
- 5. Is the work done on a new site or an existing one?
- 6. Who will you contact with technical questions, internet provider, domain host, etc
- 7. How will the success of the site be determined?
4 | Red flags about projects
We will discuss a few things that should be red flags when you are discussing a project with a client. They either signal the client's misunderstanding, ignorance or unrealistic expectations. It's important to call them on these right away so there are no misunderstandings.
Key takeaway
- 1. No one can guarantee a Google page ranking
- 2. Client is unable to deliver content, text, images, technical info
- 3. Client is unhappy pages look different in different browsers
- 4. Client underbids the project, or claims it is "good experience"
- 5. Client is not willing to put a 30% deposit down, or will pay you when the work is complete
- 6. Scopecreep. The scale of the project keeps changing, the client keeps changing their mind
5 | Gathering assets
We will discuss the best way to receive text, graphics, sound and video from a client.
Key takeaway
- 1. Text should be delivered with no formatting or style sheets
- 2. Graphics should be as large as possible, but only need to be 72dpi, CMYK images will look different online
- 3. Specifications for video
- 4. How to process and deliver video and audio
- 5. Deciding on a format for graphics, GIF, PNG, JPEG, positives and negatives
6 | Brainstorm and thumbnail ideas for the website
We will discuss tools for brainstorming concept ideas for your website.
Key takeaway
- 1. Utilize sites like cssvault.om or cssremix.com to see what others have done
- 2. Programs like Illustrator, Freehand and Photoshop can be helpful in arranging initial designs
7 | Build a site map and architecture
Build a sitemap for your site. A site map (or sitemap) is a graphical representation of the architecture of a web site. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, typically organized in hierarchical fashion. This helps visitors and search engine bots find pages on the site.
Key takeaway
- 1. The sitemap shows how pages will interact and link together
- 2. Building a sitemap forces you to organize your content
- 3. Building a sitemap helps you determine requirements for each page
- 4. Use the handout's key to show interactivity, forms, links. Examples.
- 5. Understand the difference between client and web sitemaps
- 6. What is IA? Principles of Information Architecture.
8 | Wireframe the site
In web design, wireframes are a basic visual guide used to suggest the layout and placement of fundamental design elements in the interface design. Because of this they must be completed before any artwork is developed. When completed correctly they will provide a visual reference upon which to structure each page. Wireframes also allow for the development of variations of a layout to maintain design consistency throughout the site. This is an important part of the initial development stage because it creates user expectations and helps to develop an awareness and familiarity throughout the site.
What is the goal when creating a wireframe?
- 1. It should show interactivity and how users will move around your site
- 2. Buttons, links, animation, search, menus should all be shown
- 3. The layout of elements should be consistent and clear using IA principles
- 4. The wireframe should include no graphics or design elements
9 | Determine the needs you have for programming and backend
In software design, the front end is the part of a software system that interacts directly with the user, and the back end comprises the components that process the output from the front end. The separation of software systems into "front ends" and "back ends" is an abstraction that serves to keep the different parts of the system separated.
Key takeaway
- 1. Understand the differences between front-end and back-end
- 2. Understand what operations are client-side, and which are back-end
- 3. Understand how databases are programmed and how they are useful
- 4. Understand when to hire a javascript programmer
- 5. Understand when to use Flash on a site
10 | Build the graphics for web, optimizing them for viewing
Know web graphic specifications, know the correct file formats and naming conventions for creating them. Creating web graphics and optimizing them.
Key takeaway
- 1. How to create web graphics
- 2. How to choose which format is right for each type of graphic
- 3. Output resolution, color space and naming conventions
- 4. Required attributes for images in html
- 5. Creating special pages that can be printed
11 | Building your website
Using your comp and wireframe learn how to divide up sections of a webpage for design and to identify repeating elements. Build the main page and subsequent pages.
Key takeaway
- 1. How to structure your local site folders and content
- 2. How to identify repeating elements and design patterns
- 3. How to design your pages using div's and css. A look in Coda.
- 4. Manipulating type and images with css. A look inside Coda.
- 5. Eliminating browser differences with css by including style-reset rules
- 6. Styling links, browser window targets, lists, headlines and paragraphs
- 7. xhtml rules, how to keep your site compliant
- 8. Make sure to discuss folder structure and your design as you build it with any backend or frontend programmers
12 | Put everything together and post on a temporary site
We will discuss working on remote servers, setting up a MAMP local server, requirements for logging in.
Key takeaway
- 1. Know the requirements for logging onto a server
- 2. Know how to move around the server, add folders, delete files, backing everything up
- 3. Naming conventions for files
- 4. Knowing what you can do with the server you have, php, .net, Linux and Windows servers
- 5. Troubleshooting problems that may arise, how to get help
13 | Optimize your site for Search Engines
We will discuss the basic concepts of SEO/SEM strategies on sites.
Key takeaway
- 1. Key concepts of SEO, what is Search Engine Optimization?
- 2. Setting up tracking on your site. A look at Google Analytics
- 3. Setting up goals, deciding what to track and how to measure success
- 4. Keywords on your site, altering your content for search engines
- 5. Setting up your sitemap for search engines, XML
- 6. Evaluating your site, seomoz.com, seeing how others see it
- 7. Techniques to generate links, SEM: Search Engine Marketing
14 | Testing your site
We will discuss how to test your site to make sure it looks as identical as possible across all major browsers, how to spot and fix errors in the site, checking for load speed and making improvements.
Key takeaway
- 1. Checking your site in major browsers, logging errors
- 2. Using Firefox's add-on Firebug to check and fix errors
- 3. Checking for interactivity errors, what to try and how to break things
- 4. Using Firebug to tracking download speed of graphics and files
- 5. The best tester is someone else, have someone you know use the site
15 | Conclusion
What is web 2.0?
We will discuss evaluating your sites success and how to improve it, also any additional questions from all the classes and any problems students may have from their project. Where to continue their studies: HTML classes, web design classes, lynda.com training, books, etc.
© Copyright 2008 School of Visual Concepts | johncrice.com | All Rights Reserved.