Download - Basic Web Design and Development
![Page 1: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/1.jpg)
BASIC WEB DESIGN
November 14, 2014
AND DEVELOPMENTRm 335, St. La Salle Hall, De La Salle University
A WORKSHOP ON:
![Page 2: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/2.jpg)
1. Introduction to Web Design2. Web Trends3. Basic CSS Workshop
Bonus Topic:Doing Business with Web Development
TOPICS:
![Page 3: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/3.jpg)
What is web design?
![Page 4: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/4.jpg)
DESIGN
Collect
ideas
Implementthese ideas
Applydesign
principles
21 3
![Page 5: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/5.jpg)
WEB DESIGNFollows the same process in design
Present the design through web pages
![Page 6: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/6.jpg)
Create an effective web designby applying key visual elements
![Page 7: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/7.jpg)
ELEMENT 1:
Maintain balance, consistency and the integrity of the design.
LAYOUT
![Page 8: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/8.jpg)
ELEMENT 2:
Color should represent your personality or the brand of an organization.
COLOR
![Page 9: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/9.jpg)
ELEMENT 3:
Logos, images, and graphics that can help enhance your design.
GRAPHICS
Make sure to place them strategically.
Use graphics wisely!
![Page 10: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/10.jpg)
ELEMENT 4:
Typography can enhance your design… when used wisely.
FONTS
![Page 11: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/11.jpg)
ELEMENT 5:
Should be useful and relevant.
Optimize for search engines.
CONTENT
![Page 12: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/12.jpg)
Is your websiteuser friendly?
![Page 13: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/13.jpg)
USER-FRIENDLY DESIGN ELEMENT 1:
Don’t make them think!Consider how users will navigate
through your website.
NAVIGATION
Use simple HTML or JavaScript menus.
![Page 14: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/14.jpg)
USER-FRIENDLY DESIGN ELEMENT 2:
Design your websites that perform well in different browsers.
COMPATIBILITY
![Page 15: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/15.jpg)
USER-FRIENDLY DESIGN ELEMENT 4:
Your website should be accessible to everyone including blind, disabled or the
elderly.
EASY ACCESSIBILITY
Use real fonts, not images.
![Page 16: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/16.jpg)
USER-FRIENDLY DESIGN ELEMENT 5:
Organize the flow of information. Plan your website’s sections and categories
carefully.
WELL-FORMATTED CONTENT
Use headings, sub-headings, paragraphs, bullets or lists correctly.
![Page 17: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/17.jpg)
Keep yourself updated by knowing the different
web design trends.
![Page 18: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/18.jpg)
• The idea is to create web layouts that are compatible with any forms of devices:– Desktop– Laptop– Smart Phones– Tablets
WEB DESIGN TREND #1:
RESPONSIVE WEB
![Page 19: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/19.jpg)
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.
![Page 20: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/20.jpg)
WEB DESIGN TREND #3:
LARGE PHOTOBACKGROUNDS
Use your best photos or graphic designs as the main background photo
of your website.
![Page 21: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/21.jpg)
WEB DESIGN TREND #4:
TYPOGRAPHYMost websites now use multiple fonts,
making the page easier to read and more attractive.
Mix and match fonts wisely!
![Page 22: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/22.jpg)
WEB DESIGN TREND #5:
FLAT DESIGNIt’s about keeping it simple, clean, and modern key words that most clients
say.
![Page 23: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/23.jpg)
WEB DESIGN TREND #6:
INFOGRAPHICSInfographics present a lot of
information in such a small space.
Eye-catching. Entertaining. Not boring. Not text heavy.
![Page 24: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/24.jpg)
WEB DESIGN TREND #7:
SINGLE PAGE WEBSITEThis 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.
![Page 25: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/25.jpg)
WEB DESIGN TREND #8:
PARALLAXThis is a special scrolling effect using
JavaScript wherein the background images move slowly than foreground images
creating an animation or 3D feel.
![Page 26: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/26.jpg)
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
REFERENCESINFOGRAPHICS:• 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
![Page 27: Basic Web Design and Development](https://reader034.vdocuments.mx/reader034/viewer/2022042701/55a2d5cc1a28abf3278b487d/html5/thumbnails/27.jpg)
You can view this presentation at www.slideshare.net/katjuane
Thank you!