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.

Basic Web Design and Development

42,801 views

Published on

Basic Web Design and Development

Published in: Design
  • My personal experience with research paper writing services was highly positive. I sent a request to ⇒ www.HelpWriting.net ⇐ and found a writer within a few minutes. Because I had to move house and I literally didn’t have any time to sit on a computer for many hours every evening. Thankfully, the writer I chose followed my instructions to the letter. I know we can all write essays ourselves. For those in the same situation I was in, I recommend ⇒ www.HelpWriting.net ⇐.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I think you need a perfect and 100% unique academic essays papers have a look once this site i hope you will get valuable papers, ⇒ www.WritePaper.info ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sie können Hilfe bekommen bei ⇒ www.WritersHilfe.com ⇐. Erfolg und Grüße!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The #1 Woodworking Resource With Over 16,000 Plans, Download 50 FREE Plans... ❤❤❤ https://t.cn/A62YeZUX
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Make 16,000 Projects With Step By Step Plans, ...even if you don't have a large workshop or expensive tools! ✔✔✔ https://url.cn/xFeBN0O4
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Basic Web Design and Development

  1. 1. A WORKSHOP ON: BASIC WEB DESIGN AND DEVELOPMENT November 14, 2014 Rm 335, St. La Salle Hall, De La Salle University
  2. 2. TOPICS: 1. Introduction to Web Design 2. Web Trends 3. Basic CSS Workshop Bonus Topic: Doing Business with Web Development
  3. 3. What is web design?
  4. 4. DESIGN 1 2 3 Collect ideas Implement these ideas Apply design principles
  5. 5. WEB DESIGN Follows the same process in design Present the design through web pages
  6. 6. Create an effective web design by applying key visual elements
  7. 7. ELEMENT 1: LAYOUT Maintain balance, consistency and the integrity of the design.
  8. 8. ELEMENT 2: COLOR Color should represent your personality or the brand of an organization.
  9. 9. ELEMENT 3: GRAPHICS Logos, images, and graphics that can help enhance your design. Make sure to place them strategically. Use graphics wisely!
  10. 10. ELEMENT 4: FONTS Typography can enhance your design… when used wisely.
  11. 11. ELEMENT 5: CONTENT Should be useful and relevant. Optimize for search engines.
  12. 12. Is your website user friendly?
  13. 13. USER-FRIENDLY DESIGN ELEMENT 1: NAVIGATION Don’t make them think! Consider how users will navigate through your website. Use simple HTML or JavaScript menus.
  14. 14. USER-FRIENDLY DESIGN ELEMENT 2: COMPATIBILITY Design your websites that perform well in different browsers.
  15. 15. USER-FRIENDLY DESIGN ELEMENT 4: EASY ACCESSIBILITY Your website should be accessible to everyone including blind, disabled or the elderly. Use real fonts, not images.
  16. 16. USER-FRIENDLY DESIGN ELEMENT 5: WELL-FORMATTED CONTENT Organize the flow of information. Plan your website’s sections and categories carefully. Use headings, sub-headings, paragraphs, bullets or lists correctly.
  17. 17. Keep yourself updated by knowing the different web design trends.
  18. 18. WEB DESIGN TREND #1: RESPONSIVE WEB • The idea is to create web layouts that are compatible with any forms of devices: – Desktop – Laptop – Smart Phones – Tablets
  19. 19. WEB DESIGN TREND #2: FIXED HEADER BARS Works best with one-page layouts and layouts with long pages. This trend has been around for a while but now we are seeing this in full force.
  20. 20. WEB DESIGN TREND #3: LARGE PHOTO BACKGROUNDS Use your best photos or graphic designs as the main background photo of your website.
  21. 21. WEB DESIGN TREND #4: TYPOGRAPHY Most websites now use multiple fonts, making the page easier to read and more attractive. Mix and match fonts wisely!
  22. 22. WEB DESIGN TREND #5: FLAT DESIGN It’s about keeping it simple, clean, and modern  key words that most clients say.
  23. 23. WEB DESIGN TREND #6: INFOGRAPHICS Infographics present a lot of information in such a small space. Eye-catching. Entertaining. Not boring. Not text heavy.
  24. 24. WEB DESIGN TREND #7: SINGLE PAGE WEBSITE This has been a trend for a long time. Over the years, developers have created different techniques for single page concepts. You can create an entire website using just one page.
  25. 25. WEB DESIGN TREND #8: PARALLAX This is a special scrolling effect using JavaScript wherein the background images move slowly than foreground images creating an animation or 3D feel.
  26. 26. REFERENCES WEB DESIGN: • http://www.socialmediatoday.com/content/web-design- 11-characteristics-user-friendly-website • http://www.treefrog.ca/what-is-web-design RESPONSIVE WEBSITES: • http://www.annestreetpartners.com.au • http://www.grandhoteldicomo.com/en/home FIXED HEADER BARS: • http://www.think.edu.au • http://www.elgouna.com LARGE PHOTO BACKGROUND: • http://www.kalliogladiators.fi • http://corneliuskrump.com TYPOGRAPHY: • http://www.eynsfordmusicfestival.co.uk • http://www.denisechandler.com FLAT DESIGN: • http://www.nitrografix.net • http://www.psd2html.com INFOGRAPHICS: • http://www.hongkiat.com/blog/50-informative-and- well-designed-infographics • http://vectips.com/inspiration/vector-inspirational-infographics SINGLE PAGE WEBSITE: • http://purapassata.derica.it • https://releasetherenegade.de • http://www.liquidint.com/mobility PARALLAX: • http://melisadiguzel.com/the-journey.html • http://gardenestudio.com.br/ • http://mteneros.com/webdev3/mystory • http://pauloborres.com/webdev/mystory.html CSS3/HTML5: • http://www.educationsoutheastwater.com.au • http://moradaciaetilica.com.br • http://www.flatvsrealism.com • http://www.lempens-design.com • http://www.wanderworld.io
  27. 27. Thank you! You can view this presentation at www.slideshare.net/katjuane

×