Sesión 05 –

Website Design
Clase: FUNDAMENTOS DE PROGRAMACIÓN WEB
(ADI302)
Objetivos
• Conocer aspectos básicos sobre el diseño de Sitios Web.
Website Design
• Website design is a topic of study often neglected until after a programming
background has been developed.
• Worse, it may be entirely ignored or missed by computer science students when
courses covering the topic are in other programs like graphic arts or media.
• This results in programmers trying to understand how to write code meant for
layout and design elements without understanding design.
• By studying these elements first, we can develop a better knowledge of the
concepts of web design before we write code.
 Website Design
• A number of factors affect design in web development, complicating what would
otherwise appear to the end user to be a relatively simple process of displaying a
picture or document.
• The development process involves not only the HTML and multimedia that make
up the visual aspects of the page but also considerations of software engineering,
human-computer interaction, quality assurance and testing, project
management, information and requirement engineering, modeling, and system
analysis and design.
 Planning Cycle
• Web development is best achieved as a linear process, but is usually completed
asynchronously.
• The planning process described is intended to build upon itself to refine project
requirements, look and feel, and development plans.
• However, limitations in timelines, mid-project revisions, and the extensive time
that can be invested into the early stages of design lead many programmers to
begin development while a project is still in design.
 Planning Cycle
• Starting early with programming during design planning can accelerate a project
when the elements created early on are unlikely to be affected by later changes
in the scope.
• When done carefully, early programming also allows an opportunity to test
concepts before investing time into an idea that may not work.
• It is important to avoid aspects that are assumed to change, like visual layout or
particular pieces of content, instead focusing on data structure, frameworks, and
other components that are easily adapted to design changes.
Planning Cycle
• Some of the more important flags that should be resolved include:
1. Vaguely defined use cases and inadequate project requirements
2. Overly broad or undefined scope of features
3. Unresolved disputes between stakeholders about project features
4. Unrealistic time table, budget, or inadequate resources
 Planning Cycle
• When considering your milestones, tasks, objectives, or whatever label you or
your team place on objectives, a handy acronym to reference is SMART.
• SMART stands for Specific, Measurable, Attainable, Realistic, and Timely.
• The idea is to check all of your objectives against these criteria to determine if
they are appropriate and well developed.
• By ensuring all of your objectives meet the SMART criteria, you will have a better
chance of keeping your project on time and well planned.
 The Fold
• As we begin to develop our pages, we need to begin to consider where we want
to place pieces of our content.
• In the printed news industry, the prime retail space in the paper is the top half of
the front page, or what you see when the newspaper is folded normally at a
newsstand.
• This is referred to as “above the fold,” and is crucial to getting their audience’s
attention.
 The Fold
• This also applies to websites, except in our case, our “above the fold” is what the
user sees on the landing page for our site, without having to scroll down or use
any links.
• What you typically find here is the name and or logo of the company, and what
they feel is most important for you to see first.
• As you begin to analyze web pages in this light, you will find it very easy to
determine what kind of site they are, or what they want or expect from you as
their guest.
 Typography
• Typography is the study of font.
• While an important topic in media arts, it has until recently received little
attention in web development.
• Utilizing unusual fonts used to be a complicated process that required the end
user to have your font(s) installed in order to see the site as you intended.
• Now, advances in CSS allow us to use unusual fonts by connecting to them
through our styling.
• This allows us to use a tremendous variety of fonts in our sites to add to our look
and feel, adding an aspect that has unlocked new approaches to design.
 Typography
• For ease of reading and to avoid a cluttered appearance, most sites keep to two
or three fonts when creating their design.
• One for text, and one or two for headings, titles, and distinguishing marks.
• All of these should be kept in the same family for a more congruous experience,
and each unusual font defined in your site should include fallback definitions in
case there are problems loading your primary style (we will see this in examples
later on).
 Site Maps
• A site map is a file that contains a master list of links to the pages on your site,
and can provide information about those pages like how often they are updated,
how pages connect to each other, and how important it is relative to the other
pages.
• Site map files are XML documents arranged in hierarchical format that bots read
to gain understanding of your site layout, page relevance, and organization.
• The file may also be a human readable page that diagrams how pages relate to
one another, and serve as a master list of the pages in your site.
• Site maps are best kept in the root of your website, at the same level as your
initial index page.
 Site Maps
• While a complete site map cannot be finalized until after your site is ready to be
published, include site maps under development methods because laying out
your site’s organization on paper will help with developing your menu system,
logically organizing content, and in defining the scope and purpose of your site.
• The more content or pages you can define at the beginning of the process will
reveal information that will help during your design phase.
• To create a site map, you can start by creating a running list of all the content you
wish to have on your site.
• As you are creating your running list, it is often helpful to use index cards so you
can determine by card color or pile where a particular piece of content should be.
 Site Maps
• After, as you diagram what cards are with what pile and where that pile is relative
to others, your site map will begin to take shape.
Site Maps
• If you are rebuilding an existing site, you may wish to adapt the existing menu
system or scrap it entirely and start new.
 To be completed
• Site Wireframe
• Storyboarding