Module 1 Web design & Development Lexington Minuteman

Module 1 Web design & Development Lexington Minuteman

• 1.
  Module 1: TheModern 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
• 2.
  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/
• 3.
  E. Resolutions ofImages & 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