UNIT 1

LESSON 1

INTRODUCTION TO
WEB DESIGN
 1.1 DESIGNING A WEB
WEB DESIGN
- - Refers to the layout or process of creating layouts for a web page or website.
- WEB DESIGNERS
- - are people who transform ideas, concepts or stories into a visually appealing design, and
create layouts for web pages and websites
- - they are expected to have knowledge of usability anf if their role involves creating markup
then they are also expected to be updated when it comes to web accessibility guidelines.
- DIFFERENT AREAS IN WEB DESIGSN
- A. web graphic design
- B. standardized code
- C. propriety software
- D. search engine optimization
- E. user experience design
 1.2 DEVELOPMENT AND EVOLUTION OF
WEB
- 1. WWW (WORLD WIDE WEB)
- - in 1989 while working at CERN (European
Organization for Nuclear Research), TIM
BERNERS-LEE (computer scientist) propose to
create a global hypertext project called WWW
- - Was born during 1991-1993, where text-only
pages could be viewed using a simple line-
mode browser.
- - October 1994- (W3C) or the WORLD
WIDE WEB CONSORTIUM was created to
lead the world interoperability.
- 2. MICROSOFT & NETSCAPE (throughout 1996-1999)
- - strived for browser dominance .
- - there were many new technologies in the field during this time such as CASCADING
STYLE SHEETS, JAVA SCRIPT and DYNAMIC HTML
- - the browser competition led to many positive creations and helped web design evolve at a
rapid speed.
- 4. MICROSOFT (1996)
- - released its first competitive browser
which is absolute w/ its own features
and tags.
- - it was also the 1st browser to support
style sheets, which at that time has
seen as a concealed authoring
technique.
- - in December 1996, W3C introduced
CSS to support presentation and layout
– this will allow HTML code to be
semantic rather than both semantic and
presentational, and improved web
accessibility.
- 4. HTML
- - W3C set HTML as the standard for marking up web pages.
- - it discouraged any single company from creating and developing a proprietary browser and
programming language that may create a harmful effect on the web.
- - W3C continues to set standards for open web markup and programming languages.
-
- FIRST WEB PAGE (1992) - YAHOO (1996)
- W3C (1998) - YAHOO 2002
- W3C (2003) - YAHOO (2009)
 1.3 BASIC CONCEPTS IN WEB DESIGN

- 1. DESIGN IS NOT JUST VISUAL

- - do not focus only on the exterior aspect, as it also deals w/ essential
contents of the website.
- - design is the entire experience from the moment the user enters the
website and leaves.
- - design affects why people want to use the site– the speed, the site
loads, interaction between hover, click and touch, and the pace at
which the page delivers new features and content .
- - all of these concepts contain design.
- 2. BE USER-CENTRIC
- - users are highly prioritizes and always be at the forefront of every
decision about the site.
- - designs enable users to reach their goals w/ effectiveness, speed, and
with content satisfaction.
- - designers should not shoulder all of the user experience, designers
should lead it.
- - not only the web designers should know their limits, they must have
a clear idea of all the possibilities.
- - gaining the trust of users is vital but it will not happen unless the
designers really get to know the users and what they value.
- 3. DESIGN IS DETAIL
- - details are very important to create a great design
- - awareness to details can make a difference between
a pleasant user experience and unpleasant one.
- - having the right shading or wrapping the link
around particular text really matters
- - it is very important to know when to focus on
specific details or when to focus on specific details
or when it is beneficial to visualize the entire picture
of the website.
- 4. SKETCH OFTEN
- - sketching helps when thinking about content, hierarchy, and flow
among other aspects.
- - it is affordable, easy to do and very fast
- - sketching is also one of the best ways to communicate ideas about
a layout, user experience, and user flow for a site
- - sketching is one of the fundamental skills a web designer must
possess.
- 5. USE WHITE SPACE
- - to provide users a break – BREAKS are
important for processing info, especially
when there is a fair amount of process.
- - the key is to ensure that the white space
has a relationship w/ other objects on the
page.
 1.4 ELEMENTS OF WEB DESIGN

- 1. APPEARANCE
- - many websites are brilliantly designed, attracting
users and keeping them on the page.
- - users want to find what they are looking for as fast
as possible and are more comfortable in reading a
website the same way they read a book– from top to
bottom, left to right
- - mastering the simplicity aspect is essential for
creating high quality, appealing websites
- 2. CONTENT
- - it helps a website perform a massive part in search
engine optimization.
- - it makes an estate agent website more appealing and
interesting to users
- - first class content like videos, relevant news, enhanced
mapping , google street view, high resolution pictures,
and printable PDF properties are some of the examples
that make a website a lot more interesting and keep
users on a website for a longer time.
- 3. USABILITY
- - the navigation and interface in general should be
simple and reliable
- - a bad usability will simply make a user close the
web page and move on to a competitor’s website.
- - every web developer and web designer should be
able to create an easy-to-navigate website w/ good
interface
- - many web designers make sure to place the most
important information on the UPPER LEFT
COLUMN of the website.
 - 4. VISIBILITY
- - online presence or visibility through SEO (SEARCH
ENGINE OPTIMIZATION) and social networking is
vital for the success of a website.
- - avoid using moving images, and resist the urge of
using Flash or even GIF’s that are highly questionable
unless it can be executed properly.
 1.5 IMPORTANCE OF A GOOD WEB
DESIGN
- 1. GOOD NAVIGATION
- - is a good key, as it will not only keep people on a website , but will also
hep them to find what they seek and keep them coming back.
- 2. PLACING IMPORTANT INFORMATION
- - placing important information in SEO area improves it. SEARCH ENGINE
OPTIMIZATIONA is the process of maximizing the number of visitors to a
particular website by ensuring that the site appears high on the list of results
returned by a search engine.
- - including important KEYWORDS into the HTML- based text will permit
search engines such as GOOGLE & BING to crawl through website easily,
increasing the search engine placement and giving the website a safer and
more widespread visibility.
- 3. WEBSITE DESIGN
- - is a great way to create a user-friendly environment where
users come for helpful tips.
- 4. MAKING THE INFORMATION SHORT AND
DIRECT TO THE POINT
- - warm and welcoming helps the reader remember the
information easier
- 5. ARRANGING THE CONTENT
- - designers will be able to insert text into their design, which
inclused plenty of negative space.
 1.6 WEBSITE BUILDERS
NEWBIES OR THOSE WHO HAVE NO EXPERIENCE can edit and
create website using the WYSIWYG (what you see is what you get)
editors.

- THE MOST-COMMON AND EASY TO USE

WEBSITE BUILDERS AS OF TODAY
- 1. SQUARESPACE (www.sqaurespace.com)
- - if one is into creativity this tool offers award-winning
templates, customizable layouts, mobile-optimized design,
powerful website integrations and more
- - enables users present ideas online for their professional
website, portfolio or online store to stand out.
- users can easily drag and drop images onto a site, and easily
control sections of a page.
 - 2. WEEBLY
- - one of the easiest and most popular
web development tools among
newbies. It allows aspiring designers
and developers w/out any coding
experience build a website yet still
giving the option to edit the
HTML/CSS
- - offers overs to 100-page design
templates & multimedia features like
photo galleries, slideshows, integrated
maps, video and audio
 - 3. WIX
- - a web builder developed to create HTML5
websites and mobile sites through the use of online
drag-and-drop tools.
- - allows users to add various functionalities to their
websites such as e-commerce, online marketing,
social plug-ins & more
- - tends to work best w/ fashion and apparel websites
and offers a SEO link building tools and make it
easy to rank high
- - also offers a 100 fonts amd advanced design
features when it comes to animation, backgrounds,
and scroll effects.
- - wix is also mobile and SEO friendly
- - Offers a FREE PLAN but users may unlock more
features by upgrading
 4. WORD PRESSS
- A free online open-source website creation
tools, blogging platform and a content
management system (CMS).
- - one of the most popular blogging systems
on the Web and an excellent platform for a
variety of websites
- - it has WYSIWYG text editor, co-authoring
w/ multiple authors, permalinks optimized
for search engines, static page, member
registration & more.
- - a FREE and can be downloaded for self-
hosted installations from wordpress.org or it
can also be used as hosted service via
wordpress.com
 LESSON 3

STARTING A CAREER
WEB DEVELOPERS- refers to people who either take or create a
web design then turn it into a website
EXAMPLES:
1. TAMAL SEN
2. ALEXANDR ROZUMENKO
3. KRUSHAL SONANI
4. YEVHEN SAIENKO
5. MARIA STANKEVISH
WEB DESIGNERS- focus on the site’s
look and feel
EXAMPLES:
1. SARA SOUEIDAN
- A Lebanon-based frontend UI developer
and author, Sara has worked with clients
across the globe including Netflix, The
Royal Schiphol Group, Smashing
Magazine and more. She runs workshops
and helps companies and agencies build
clean frontend foundations for websites
and applications, with a strong focus on
progressive enhancement, performance
and accessibility.
2. ABBY COVERT
- Abby Covert is a senior staff information
architect at Etsy and specialises in
delivering collaborative information
architecture processes, as well as teaching
those that she works with along the way.
Speaking and writing under the
pseudonym Abby the IA, she focuses on
sharing information architecture content
with those working within the design and
technology communities, and is co-
founder of World IA Day. She's also the
author of How to Make Sense of Any Mess,
a book about information architecture for
everybody.
3. ETHAN MARCOTTE
- If there's one man in the web
industry who probably doesn't
need an introduction, it's Ethan
Marcotte. One of the web's
best-known designers, Marcotte
is a regular and popular speaker
on the conference circuit and, in
his own words, the one who
"started that whole '
responsive web design' thing".
4. CHRIS COYIER
- A world-known CSS expert and
HTML guru, Chris Coyier writes
one of the most popular CSS
blogs on the web, CSS-Tricks.
Throughout his career, Chris
has published many tutorials,
websites, and scripts to help
designers improve their skills. A
co-founder of CodePen, Chris
can also be found at web design
and development podcast
ShopTalk.
5. KAREN MCGRANE
- UX expert Karen McGrane
motto is simple - 'On a good
day, I make the web more
awesome. On a bad day, I make
it suck less'. A content strategist
and user experience designer,
McGrane has over 15 years
experience of making big,
complicated websites. Currently
managing partner of Bond Art +
Science, she is also the author
of Content Strategy for Mobile.
INFORMATION ARCHITECTS
- focus on the site’s/websites
organization
3.2 FRONT-END, BACKEND, & FULL STACK

FRONT END
- the part and the actual design users see and directly interact with
- it is commonly built with HTML, CSS, Java Script
- refers to the process of developing the face of a website or app
that users interact with
- it also functions as a bridge between design (researcher, user,
experience, visual) and backend development
- PEOPLE WHO CREATE THE FRONT-EBD OF A
WEBSITE ARE CALLED “ FRONT-END DEVELOPERS”
EXAMPLES OF FRONT-END
1. 1. BUILDING A CALCULATOR using
JavaScript
2. 2. creating a SIMPLE NOTES APP
3. 3. creating a simple to-do-list
1. 4. creating a QR CODE SCANNER
2. 5. creating a weather app
BACKEND
- is the programming logic that users cannot see but makes
a website work properly.
- BACKEND DEVELOPMENT- the process of creating
the actual logic behind a website or application. It is
simply writing code to interact w/ a database.
- BACKEND DEVELOPERS- people who create the
backend of a website, they commonly use PHP, Java, or
C ++
EXAMPLE OF BACKEND
1. 1. AMAZON
2. - is a good example of Back End development in action. You go on Amazon and search
for a new shirt. A Back End dev uses server-side language to pull all the information about
shirts from a database. That information is then processed in an application and returned to
the user through Front End language.
FULL STACK DEVELOPERS
- work w/ both the front-end and backend of a website.
- they are familiar w/ front-end languages and one or more
backend languages.
- Full-stack developers design and create websites and
applications for various platforms.
What does a full-stack developer
do?
A full-stack developer’s job
description might include the
following:
•Develop and maintain web services
and interfaces
•Contribute to front-end and back-
end development processes
•Build new product features or APIs
•Perform tests, troubleshoot
software, and fix bugs
•Collaborate with other departments
on projects and sprints
3.3 TRAITS OF A GOOD WEB DEVELOPERS
1. ANALYTICAL MINDSET
- able to analyze information, identify problems and trends, and solve
complex problems
2. CURIOSITY AND INQUISITIVENESS
- interested in what is not one's personal or proper concern
3. DOWN-TO-EARTH
- ready and open-minded to criticisms, advices and suggestions from
supervisors, peers and clients.
4. EMPATHY
- it is important to relate to both the client and the team
5. FLEXIBILITY
- they should be able to adapt and respond to issues when they arise.
6. LOVE OF LEARNING
- developers should always keep on expanding their
knowledge
7. TEAM PLAYER
- works with other developers, designers, engineers and
other teams across the company
8. TECHNICAL MINDSET
- the ability to break things down into smaller steps or
pieces and work with them in an orderly and logical way
 3.4 SKILLS
3.4.1 Technical Skills
 actively looking for a new programming knowledge.
 Builds products using HTML/CSS/JS and other front-end
technologies
 codes and deploys applications in a cross-platform, cross-
browser environment
 Documents project build and maintenance
 experienced in building user interfaces and prototypes from
wireframes and designs.
 familiar w/ development and debugging