basic web design and development

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!