basic web design and development
TRANSCRIPT
BASIC WEB DESIGN
November 14, 2014
AND DEVELOPMENTRm 335, St. La Salle Hall, De La Salle University
A WORKSHOP ON:
1. Introduction to Web Design2. Web Trends3. Basic CSS Workshop
Bonus Topic:Doing Business with Web Development
TOPICS:
What is web design?
DESIGN
Collect
ideas
Implementthese ideas
Applydesign
principles
21 3
WEB DESIGNFollows the same process in design
Present the design through web pages
Create an effective web designby applying key visual elements
ELEMENT 1:
Maintain balance, consistency and the integrity of the design.
LAYOUT
ELEMENT 2:
Color should represent your personality or the brand of an organization.
COLOR
ELEMENT 3:
Logos, images, and graphics that can help enhance your design.
GRAPHICS
Make sure to place them strategically.
Use graphics wisely!
ELEMENT 4:
Typography can enhance your design… when used wisely.
FONTS
ELEMENT 5:
Should be useful and relevant.
Optimize for search engines.
CONTENT
Is your websiteuser friendly?
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.
USER-FRIENDLY DESIGN ELEMENT 2:
Design your websites that perform well in different browsers.
COMPATIBILITY
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.
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.
Keep yourself updated by knowing the different
web design trends.
• 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
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.
WEB DESIGN TREND #3:
LARGE PHOTOBACKGROUNDS
Use your best photos or graphic designs as the main background photo
of your website.
WEB DESIGN TREND #4:
TYPOGRAPHYMost websites now use multiple fonts,
making the page easier to read and more attractive.
Mix and match fonts wisely!
WEB DESIGN TREND #5:
FLAT DESIGNIt’s about keeping it simple, clean, and modern key words that most clients
say.
WEB DESIGN TREND #6:
INFOGRAPHICSInfographics present a lot of
information in such a small space.
Eye-catching. Entertaining. Not boring. Not text heavy.
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.
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.
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
You can view this presentation at www.slideshare.net/katjuane
Thank you!