A WORKSHOP ON:
BASIC WEB DESIGN
AND DEVELOPMENT
Cebu Normal University
Dr. Emiliano Ian B. Suson II
“Sir Eye”
WEBSITE DEVELOPERS:
www.wix.com, www.weebly.com,
www.squarespace.com, www.jimdo.com,
www.yola.com,www.homestead.com,
www.synthesite.com, www.webon.com,
www.webs.com, www.snappages,
www.moonfruit.com, www.blinkweb.com,
www.edicy.com, www.kafafa.com,
www.sauropol.com, www.webappers.com,
www.bravenet.com, www.basekit.com,
www.intuit.com, www.thinkvitamin.com,
www.flavors.me.com, www.wufoo.com,
www.members.freewebs.com
■
What is web
design?
DESIGN
1
2
3
Collect
Implement
these ideas
Apply
design
principles
ideas
WEB DESIGN
Follows the same process in design
Present the design through
web pages
Create an effective
web design
by applying key visual
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
Don’t make them think!
Consider how users will navigate
through your website.
Use simple HTML or
JavaScript menus.
USER-FRIENDLY DESIGN ELEMENT 2:
COMPATIBILITY
Design your websites that perform
well in different browsers.
USER-FRIENDLY DESIGN ELEMENT 4:
EASY
ACCESSIBILITY
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 website’s sections and
categories carefully.
Use headings, sub-headings,
paragraphs, bullets or lists correctly.
Keep yourself
updated by knowing
the different
web design trends.
WEB DESIGN TREND #1:
RESPONSIVE WEB
• The idea is to create web layouts that
are compatible with any forms of
devices:
–
–
–
–
Desktop
Laptop
Smart Phones
Tablets
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 PHOTO
BACKGROUNDS
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
It’s about keeping it simple, clean,
and modern key words that most
clients say.
WEB DESIGN TREND #6:
INFOGRAPHICS
Infographics present a lot of
information in such a small space.
Eye-catching. Entertaining.
Not boring. Not text heavy.
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.
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-1
1-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-welldesigned-infographics
•
http://vectips.com/inspiration/vector-inspirational-infogr
aphics
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
REFERENCES
WEB DESIGN:
•
http://www.socialmediatoday.com/content/web-design-1
1-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-welldesigned-infographics
•
http://vectips.com/inspiration/vector-inspirational-infogr
aphics
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
Basic Web Designing Tips
9/24/2016
Importance of web designing
❖ What a Website is? A website is an online identity of a
company through which you can attract more visitors, promote
company’s product, and generates business leads.
❖ To represent a company’s online portfolio you should have
good and appealing website.
❖ For generating huge amount of traffic and to rank high you
should have well designed, easy to navigate and search engine
friendly website.
9/24/2016
15 basic tips for a successful and appealing website:
1) Quality Content
❖ Website should have a rich content for attracting
new visitor and to retain the old ones.
❖ Update your website timely.
❖ To identify important content and keywords and
highlight them (underline and bold text).
9/24/2016
CNU-CN
2) Pick a Domain Name
❖ Register your website with unique and
easy–to-pronounce
Domain Name.
❖ Choose a domain name that contains
keywords which appear in your website.
9/24/2016
3) Custom 404 Pages
❖ Whenever visitors mistypes or misspells a
URL of a website.
❖ It’s important to have a custom 404 page for
your website so that they still are provided
with navigation options for your site.
9/24/2016
CNU-CN
4) Color Scheme
❖Colors have a significant impact over people.
❖Avoid Bright colors as they are the best distraction
element.
❖Use colors carefully as they are associated with
feelings such as Red for hot, Blue for cold, White
with purity and clarity, Black with darkness and
death, Yellow with happiness and sunshine, etc.
9/24/2016
5) Favicon
❖ Known as Favorite icon.
❖ It is one of the smallest graphics that appears as
company or product logo in the URL box.
❖ This is a unique way of gaining recognition in
bookmarks and social networks.
9/24/2016
CNU-CN
6) Use consistent typefaces and sizes
❖Font style and text size should be consistent.
❖Choose one typeface for most of your content.
❖To make distinctions use different typefaces.
9/24/2016
7) Properly Sized Graphics
❖ Graphics and images on web pages should be
properly and correctly define and sized.
❖ To reduce the web browser workload and for
quicker loading of a page, use properly defined
graphics.
9/24/2016
CNU-CN
8) Copyright Notice
❖Copyright Notice is included at the bottom
of each page of the website.
❖Keep this up-to-date because an
out-of-date copyright notice can result in
infringement of your website design
and/or content displayed on it.
9/24/2016
9) Browsers Compatibility
❖ Website should be browser compatible.
❖ Check website compatibility on different browsers such
as Firefox, Chrome, Safari, Internet Explorer, etc.
❖ Design your website till looks great on all major
browsers.
9/24/2016
CNU-CN
10) Optimize Links
❖ For search engine indexing use short and readable
links.
❖ Use short URL’s for easy remembrance.
9/24/2016
11) Interact with customers
❖ Build relationships with customers via interactions.
❖ Leave website’s name, contact numbers and email
address for communication.
❖ Prepare registration page so as to update your
customers with latest news and special offers of a
company.
9/24/2016
CNU-CN
12) Don’t clutter your site with ads
❖Advertising is essential for any website
but web page should not be overloaded
with ads.
❖More and more ads degrade the quality
and accessibility of content.
9/24/2016
13) Easy Navigation
❖ Navigation of links plays a big role in
determining how long a visitor stays and
explores your site.
❖ Generally they read the content of the present
page and then look for other page that interests
them.
9/24/2016
CNU-CN
14) Optimum Load Time
Make sure your website’s loading time is
low. For this you
must:
a) Minimize Graphics, Flash and scripts.
b) Optimize your HTML & script code.
9/24/2016
15) Promote your site
❖ Designing of a website is an important task but
promotion of a site is equally important.
❖ Promoting a website means spread awareness
about your product among people.
9/24/2016
CNU-CN
Web site without designing.
⚫ No HTML literacy is required.
⚫ Real site (Customized template)
◦ Google Sites
◦ Weebly , 35o pages, Squido.com etc.
Profile page serves as personal webpage
⚫
⚫ Blog sites (with various template)
⚫
◦ Wordpress
◦ Blogger.
Pages in Social Sites
◦ Facebook (Description, Dairy/Notice, Events)
◦ Google+
All above are free websites with limited storage. Free web service does not include
databases and mail facility.
DAY 2
• Application and software
9/24/2016
Google Sites
Blog Site
⚫
⚫
⚫
⚫
⚫
⚫
⚫
⚫
⚫
⚫
Editable Notes
Sub domain.
A profile page
Limited but lot of template.
File management maintains time sequence.
Search option help to find your blog.
Serious than microblogging. (Facebook or Twitter)
Photo, video can be integrated.
World wide audience. (low traffic)
Now under major search engine.
Sample Website rent
Free
Lite
Standard
Premium
Platinum
Number of
Websites
1
unlimited
unlimited
unlimited
unlimited
Number of
webpages
15
60
unlimited
unlimited
unlimited
Storage
20 MB
50 MB
250MB
500MB
1GB
Bandwidth
monthly
1GB
5GB
10GB
20GB
40GB
Monthly Charge
Free
4.49 $
8.99 $
16.99$
13.99$
Annual Charge
Free
39.99$
79.99 $
169.99 $
339.99$
• A Personal webpage
• Public Diary. (Microblogging)
• Notebook.
• Address Book.
• Photo Album.
• Mailbox.
•Chatting. Etc.
Get Attention
• Youtube.
• Panoramio.
• Flickr
• Picasa.
• Facebook Group.
Why should I have a website
❑ It is cool!!
❑ You can share your story with the outside world.
❑ You can create your own portrait
❑ You can connect with others who has the same interest as
that of you.
❑ Business (E-commerce)
❑ Document your stuffs and use them on the fly
❑ Most employers nowadays look at your websites to assess if
Skills for Life - 2014
you
are the right candidate for a job
74
Why a personal website
75
So, what do you need to
build a website
• There are many tools depending on what do you want to
achieve.
HTML
Javascript
PHP
AJAX
CSS
Ruby on Rails
76
Wordpress
✔ WordPress is a free and open source web-software
that you can use to create beautiful website or blog.
✔ WordPress was used by more than 22.0% of the
top 10 million websites
✔ The core software is built by hundreds of
community volunteers, and when you’re ready for
more there are thousands of plugins and themes
available to transform your site into almost anything
you can imagine
77
Why Wordpress?
▪
▪
▪
▪
▪
▪
▪
▪
▪
It is free and stays that way
Easy to use
It is web-based – so you can get it to anywhere
Very easy to add contents
It gives you control which saves you money
All kinds of widgets make it easy to add features
Themes – let you style your site
Secure and easy to update
You are never out of date
78
Creating a web site(Stage 1)
• You need to have an email address (You need to remember
email address and password)
• Go to www.wordpress.com
Skills for Life - 2014
79
Creating a web site(Stage 1)
Skills for Life - 2014
80
Creating a web site(Stage 1)
• Fill up the page and create a site
Skills for Life - 2014
81
Dashboard (Stage 2)
Skills for Life - 2014
82
Appearance (Stage 3)
❑ There are many many themes in wordpress. Some are free
and some you need to pay in order to use.
❑ Hover over the theme which allows you to see theme
details, preview your web page in the chosen theme and
activate the theme.
❑ For today, choose the superhero theme.
❑ My suggestion is you start with the superhero theme and
then after you build some pages, play with different themes
and then decide which one you like. You can change from
time to time.
Skills for Life - 2014
83
Widget (Stage 4)
• In computing, a web widget is a software widget for the web.
It's a small application with limited functionality that can be
installed and executed within a web page by an end user.
• In Wordpress, the widget you can use is limited by theme you
chose.
• Some interesting widgets include:
• Search
• Calendar
• Music Player
Skills for Life - 2014
84
Widget (Cont…)
85
Now it’s your turn
• Create a website of 4 pages with the following
information
• Home: A summary of your adventure in skills for
life till now. This should be the default page
• About: Should contain details about you
• Description of two classes in skills for life
Skills for Life - 2014
86
Webpage Layout and Website Design
■
Designing a good website requires
more than just putting together a
few pages
Examples
■
■
■
■
www.projectpuffin.org
www.pmlodge.com
www.uintafishing.com
www.uncommonadv.com
Web Page Layout
■
■
Layout of web pages is very important
Poor layout makes for ■
■
■
Difficult navigation
Hard to locate information on page
Visually unappealing
Tables, tables, tables!
■
■
■
Use tables to lay out your pages!
Make the table borders invisible
A 2x2 table works well
Areas of a Web Page
Lo
go
Header
Menu
Content
A 2 x 2 Layout
Other Designs
■
■
www.adobe.com (menu on right)
www.uintafishing.com (many columns)
Table within a table
The outer table
The inner table
The inner table
Centered with three columns
Really complicated design!
Monitors and Dimensions
■
■
■
■
Monitor resolution affects how you should
lay pages out
800x600 = 50% - 760 x 420 pixels in
browser window
1024x768 = 35%
640x480 = 3%* - 595 x 360 pixels
■
*Was 20% three years ago
Dimensions in a 2x2 table
Up to 760 wide*
100-140
wide
Up to 650 wide
Header
Logo
And
Content
Menu
Different Resolutions
■
http://www.dreamink.com/design6.shtml
Page Width
■
■
Because monitors differ (640x480,
800x600, 1024x768), pages look different.
You can use a % width for a table, for
example make it 80% of the page width
Thank you for
Listening
Splash Page
■
■
■
■
The index.html file is called the “Splash Page”
It is the key page—the first page visitors usually
see
Must be visually attractive, informative, and easy
to navigate
Examples:
■
■
■
■
www.projectpuffin.org
www.pmlodge.com
www.uncommonadv.com
www.rainforestandreef.org
Organizing Information
■
Decide what info goes on each page
■
■
■
■
Friends page
Family page
Personal page
Hobbies page
Good Web Communication
■
■
Be Concise
Limit choices – use a hierarchical structure
■
■
A hierarchy is a structured organization where
some pages are at a higher level than others
Hierarchy results in a site map with multiple
levels
Site Map
■
■
A site map is designed to show the
connections between pages
A graphical site map uses lines to connect
linked pages
Site Map
Willoughby's Website
Interior or
Internal
Pages
Design Theme
■
■
Choose a common layout for your website.
The Splash Page will probably differ but
interior pages should be the same
Use tables to control placement throughout
Consistency in Design
■
■
■
Use the same font throughout!
Use consistent graphics in website – do not
use ultra modern on one page and
calligraphy on another
Use color scheme that is consistent
The Font Barrier
■
■
■
Only fonts you can reliably
use are Times New Roman
(Times) and Arial
(Helvetica)
Text in site should be one of
these choices
How to overcome this?
■
■
Any font used in graphics is
loaded as a graphic, and does
not rely upon the font being on
the user’s computer
Make cool font images in
Photoshop
Testing
■
Test your website as you go along.
■
■
■
If you’re in the computer lab and there’s an
empty computer next to you, log into it and
check out your web page from there
Make sure it works in Netscape Navigator
and Internet Explorer
Make sure all pictures come up on a
different machine
Assignment 8 – Website Design
■
From your existing web pages, build a website.
■
Add more pages to site – whatever you want
■
■
■
Use common design theme
■
■
Some suggestions: Resume, friends page, hobbies page
Minimum 6 pages (splash page + 5)
Make custom graphics in PhotoShop
Prepare graphical site map in PowerPoint to turn
in when finished
Where to get help on design
■
Web Pages for more info
■
■
Good places for Graphics
■
■
■
http://info.med.yale.edu/caim/manual/contents.html
www.clipart.com
http://free-clip-art.com/
Fonts
■
http://www.1001freefonts.com/fontfiles/main.htm
Assignment 7 – Advanced Webstuff
■
■
Add Hyperlinks
Add Graphics (MSU, Scans, etc)