Hey friends Ehow india pvt. ltd nagpur provide IT certification courses in affordable price for graduate students. www.skillsupport.in 9765005590

1. BASIC WEB DESIGN
AND DEVELOPMENT
Presented by
Ehow india services pvt. Ltd Nagpur

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

22. WEB DESIGN TREND #6:
INFOGRAPHICS
Infographics present a lot of
information in such a small space.
Eye-catching. Entertaining.
Not boring. Not text heavy.

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

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

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

26. Thank you!