Basic web dev by Maria Stella Solon http://mariastellasolon.com

1. BASIC WEBPAGE DESIGN
AND DEVELOPMENT
Presented by: Maria Stella Solon

2. 1. Introduction to Web Design
2. Web Trends
3. Basic CSS Workshop
Bonus Topic:
Doing Business with Web Development
TOPICS:

3. What is web design?

4. DESIGN
Collect
ideas
Implement
these ideas
Apply
design
principles
21 3

5. WEB DESIGN
Follows the same process in design
Present the design through
web pages

6. Create an effective web design
by applying key visual elements

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

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

9. ELEMENT 3:
Logos, images, and graphics that can
help enhance your design.
GRAPHICS
Make sure to place them strategically.
Use graphics wisely!

10. ELEMENT 4:
Typography can enhance your design…
when used wisely.
FONTS

11. ELEMENT 5:
Should be useful and relevant.
Optimize for search engines.
CONTENT

12. Is your website
user friendly?

13. 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.

14. USER-FRIENDLY DESIGN ELEMENT 2:
Design your websites that perform well
in different browsers.
COMPATIBILITY

15. 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.

16. 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.

17. Keep yourself updated by
knowing the different
web design trends.

18. • 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

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. WEB DESIGN TREND #3:
LARGE PHOTO
BACKGROUNDS
Use your best photos or graphic
designs as the main background photo
of your website.

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. WEB DESIGN TREND #5:
FLAT DESIGN
It’s about keeping it simple, clean, and
modern  key words that most clients
say.

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