Minuteman High School Lexington,Ma Web Design & Development Module 1

Module 1: The Modern Web Development & Design

1.1: Idea & Web Concept Development

1. Do you have a good idea for a website?

A. What websites do you use and why?

B. What makes the websites you like engaging?

2. What makes it a good idea?

            A. Is it original?

           

B. Is it useful?

           

C. Are you a knowledge or content area/expert?

          

3. How will you organize this idea?

A. Will you use Flow charts or user centered design strategies?

B. Will you use web based organizing tools?

http://www.gliffy.com/uses/wireframe-software/

https://cacoo.com/

C. What is the importance of wire framing your information?

http://www.slideshare.net/nickf/wireframes-for-the-wicked?from_search=2

D. Draw it out on paper? What are the considerations for a prototype?

http://www.slideshare.net/bunky34/design-studios-idea-creation?from_search=6

E. Can you present the idea clearly? (A Prezi or Powerpoint)             

F. What code languages will you need learn:

Basic Website Code Template:

http://www.htmlgoodies.com/tutorials/getting_started/article.php/3863271/How- To-Build-a-Website-HTML-CSS-and-HTML-Editors.htm

http://www.w3.org/Style/Examples/011/firstcss.en.html

HTML

http://www.slideshare.net/danieldowns1/html-xhtml-tagsheet-23341252

CSS3

http://www.slideshare.net/andrewjtalcott/css3-cheat-sheet-2890995?from_search=2

Difference Between Classes & ID’s

http://www.dontfeartheinternet.com/css/dont-fear-specificity

Fonts/Typography For The Web

http://www.dontfeartheinternet.com/css/don%E2%80%99t-fear-web-typography

4. When thinking about your website what considerations are important to the design (the look and feel) of your website?

A. Navigation: How will users move around your website? (HTML/CSS/ JavaScript)

http://blog.kissmetrics.com/common-website-navigation-mistakes/

http://www.smashingmagazine.com/2011/06/06/planning-and-implementing-website-navigation/

B. Colors/Schemes and Themes: What colors will you use? (Color scheme Generator)

Color Sheme Generator

http://colorschemedesigner.com/

C. Layout Ideas (organization of content): Where will things go in the layout?(Wire framing and Prototyping)

http://webdesign.tutsplus.com/tutorials/workflow-tutorials/a-beginners-guide-to-wireframing/

D. Fluid or Fixed Layout-How will your site adjust to different browsers and views?(pixels or percentages, resolution, style sheets, media queries, Fixed & Relative Position)

http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/

http://www.dynamicdrive.com/style/layouts/category/C13/

E. Resolutions of Images & Graphics: What sizes will you need to make graphics and pictures on you web pages? (Photoshop, resizing images, html/css, web graphics, design concepts, colors)

http://www.learn.columbia.edu/mcah2/pdf/training_resolution.pdf

http://www.techsoup.org/support/articles-and-how-tos/finding-and-using-images-from-the-web

F. Integration of Multimedia (video, animation, scrolling text etc.): How will you integrate these and how will they work?(HTML5,Javascript,Embedding)

G. How will you engage the user in a world in which there are so many distractions on the web? (Multimedia, Browser Support)

H. How will your site be seen by mobile users? How does this influence your planning (responsive design, Mobile Design)?

Media Queries

http://www.slideshare.net/maxdesign/css3-media-queries?from_search=3

http://mobile.smashingmagazine.com/2013/05/29/the-state-of-responsive-web-design/

I. What considerations should be made for Search Engine Optimization(SEO)?

http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf