A WORKSHOP ON:

BASIC WEB
AND
DESIGN
DEVELOPME
NT November 14, 2014
Rm 335, St. La Salle Hall, De La Salle University
 TOPICS:
1. Introduction to Web Design
2. Web Trends
3. Basic CSS Workshop

Bonus Topic:
Doing Business with Web Development
What is web
design?
 DESIGN
1 2 3
Collect Implement Apply
these ideas design
ideas principles
 WEB
DESIGN
Follows the same process in design

Present the design through

web pages
 Create an effective
by applying key visual
web design
elements
 ELEMENT 1:

LAYOUT
Maintain balance, consistency and
the integrity of the design.
 ELEMENT 2:

COLOR
Color should represent your
personality or the brand of an
organization.
 ELEMENT 3:

GRAPHICS
Logos, images, and graphics that can
help enhance your design.

Make sure to place them strategically.

Use graphics wisely!

 ELEMENT 4:

FONTS
Typography can enhance your
design when used wisely.
 ELEMENT 5:

CONTENT
Should be useful and relevant.

Optimize for search engines.

 Is your
website
user friendly?
USER-FRIENDLY DESIGN ELEMENT 1:

NAVIGATION
Dont make them think!
Consider how users will navigate
through your website.

Use simple HTML or

JavaScript menus.
COMPATIBILI
USER-FRIENDLY DESIGN ELEMENT 2:

TY
Design your websites that perform
well in different browsers.
 EASY
USER-FRIENDLY DESIGN ELEMENT 4:

ACCESSIBILIT
Y
Your website should be accessible to
everyone including blind, disabled or
the elderly.

Use real fonts, not images.

 USER-FRIENDLY DESIGN ELEMENT 5:
WELL-FORMATTED
CONTENT
Organize the flow of information. Plan
your websites sections and
categories carefully.

Use headings, sub-headings,

paragraphs, bullets or lists correctly.
 Keep yourself
updated by knowing
the different
web design trends.
 RESPONSIVE
WEB DESIGN TREND #1:

WEB
The idea is to create web layouts that
are compatible with any forms of
devices:
Desktop
Laptop
Smart Phones
Tablets
 FIXED
WEB DESIGN TREND #2:

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.
 LARGE
WEB DESIGN TREND #3:

BACKGROUN
PHOTO
DS
Use your best photos or graphic
designs as the main background
photo of your website.
 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!

 WEB DESIGN TREND #5:

FLAT DESIGN
Its about keeping it simple, clean,
and modern key words that most
clients say.
INFOGRAPHIC
WEB DESIGN TREND #6:

S
Infographics present a lot of
information in such a small space.

Eye-catching. Entertaining.
Not boring. Not text heavy.
 SINGLE PAGE
WEB DESIGN TREND #7:

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.
 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.
 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
Thank you!
You can view this presentation at
www.slideshare.net/katjuane