COAP 2000 Fall 1 2013 Week 4 Lesson Creating Web Pages with Tables, CSS, & Utilizing Adobe Kuler +...

7/29/2019 COAP 2000 Fall 1 2013 Week 4 Lesson Creating Web Pages with Tables, CSS, & Utilizing Adobe Kuler + Midterm E…

http://slidepdf.com/reader/full/coap-2000-fall-1-2013-week-4-lesson-creating-web-pages-with-tables-css- 1/62



The web has become so integral to many people’s lives for all ages.

Designing for different age groups is important for two reasons.

1. Why would

we

want

to

ignore

a specific

age

group?

One

day

we

will

all

get

old

and wouldn’t want to be ignored would we?

1. But there are instances we would want to ignore younger users from sites

with alcohol or adult content.

2. Younger users could be tomorrow’s adult users. If they have a terrible experience,

then that could leave a lasting impression.

Look over the principles…

Knowing this… should we design our sites for all ages? Then read last section on the blog.



Point 1 “You’ll never become the designer you always dreamt of being by doing the

work you never wanted to do”. This is so true; to become the designer you want to

be, you need to be designing the things you’re passionate about designing.

Which is

often

not

what

we

are

paid

to

design?

So

what

do

we

do?

Design

things

on

our free time to build our portfolio to show potential employers what we can do. And

or hope you have classes that allow you to choose the topic for a presentation,

project, website, etc. Perhaps a movie genre website … and give it your all.

Point 4 is a really good point but not our focus right now. It suggests not giving the

client designs to choose from. It suggests creating one design and then offering the

client opportunities to fine too. This is different than the way many firms work.

Point 5 suggests having a very limited color pallet that is clean and impactful… rather

than a hodge

podge

of

non

consistent

colors

that

do

not

add

value

to

the

users

experience.

Points 6 and 7 deal with creativity which is not something that can be trained how to

do. Creativity is in the eye of the beholder. The best way for us to learn to be creative



is from seeing creative things and getting ideas and trying new things. I hope our

Good, Bad, and the Ugly… help us with that. What Mike suggests is for us to not only

think of ways to be creative with the visual design of our website, e.g., images, colors,

etc. but also look for interactive ways. But the functionality and design!

So far in the course and your prior experience, what you do think is the most important thing that you have learned so far when it comes to design? (Notice I didn’t say web or graphic).

4



If you are going to create a website make sure that it is something that will actually

help solve a problem for the user. This then is essentially the purpose of the website.

Then the sole purpose of the website is to make sure that the user can do X. That is

why the website is there in the first place. Then knowing this we can leverage our

entire design and functionality based on that purpose.

This then allows us to consider how the website functions as a means of solving the

problem or answering a question, rather than just having cool functionality for

functionality sake.

Read quote on slide



The design phase is probably the most exciting phase because this is when the web

designer's creativity comes out and you start brainstorming the design of the site

prior to development. But before you can more to that phase you need to make sure

that you have a firm handle on the previous phases, i.e., the intended "plan" of the

site and the "analysis" of the client's purpose, goals, users, user tasks, etc. Knowing

this information

will

allow

you

to

continue

with

the

design

and

development

of

the

web site. Just because we are now designing, doesn't mean what we discussed in the

planning and analysis is out the window!

Review the points



So, don't throw out the baby with the bath water! The data that you gathered with

the client in those early phases is so crucial! Don't throw it out! So we need to draw

from the all of information gathered up to this point and finally start to determine the

look and feel of your site.

Some key considerations when determining a sites design are

(1) Defining how to organize web page content and

(2) Designing user navigation.



There is even a debate going on today. Which is more important? The content, the

design, or the functionality? This could be a very engaging discussion for COAP 2150,

Web Design Principles I.

Ultimately it

really

is

just

a balancing

act

between

creating

something

that

is

visually

impressive website without jeopardizing the usability. But also what if something is

visually impressive but the content is poor? What then?

Honestly subliminally I have put content up here at the top for a reason. This is what

the user is most likely looking for? They don’t go searching for a tea kettle and buy

one from the most impressive visually stunning website? Do they? Are users that

superficial?

Think about it. If the website seems to be too tricky to navigate? What happens then?

They may

then

leave

the

site

altogether,

which

defeats

the

purpose

of

the

website.

It

should be RULE #1. Give the user what they need before they leave!

8



Remember, in terms of designing we need to focus on the content of the site and

making that content central to the design. Remember “Content Is King!” To get us

that point, we must draw upon all of the information gathered up to this point and

determine the look and feel of the site.

Our sites could have really cool images and videos… but if our content isn’t clear and

accessible, then our sites fail for our users.

Like I said, the site’s content is based on the results of the previous phases, e.g., the

purpose & analysis. It is also highly possible that a site design and development team

might have to go backwards and re‐think the previous phases because of what is

found out in the design phase.

9



Sometimes a site’s design actually restricts what the user is looking for. A good design

is clear, concise, and uncluttered. The visuals of a site should enhance the user

experience and draw attention to the content and not distract them from it. If you

cannot justify using something that creates a more compelling and direct content...

then don’t use it! Because it’s cool is not a justification! Remember what I mentioned

in our

syllabus

in

the

term

project

section:

If there is ever a question about whether an image, video, color, etc. meets the needs

of the user, then discuss it with your instructor. It may be determined that the object

or tag should not be included. All attributes of a web site should always be purposeful

and not distracting to the user.

Therefore, the target audience is one of the key factors taken into consideration here.

A site aimed at teenagers, for example, will look much different than one meant for

the elderly.

In

terms

of

design,

think

of

how

to

incorporate

elements

such

as

the

company logo or colors to help strengthen the identity of the company on the web

site.

Who is our audience?

10



By this point in the course most students are always eager to start building, because

we all have great ideas about the design. I too have fallen into that snare as well as a

designer and the outcome has been good and sometimes bad. This is why

consultations with a client and analyzing our users is so key.

Also, don't forget that all of the information gathered here should be reviewed in light

of the information gathered from the previous phases.

11



12



<table>

<tr >

<td >Title</td>

<td>Year</td>

<td>Director</td>

<td>Writer</td>

<td>Actors</td>

</tr>

<tr>

<td >Batman Begins</td>

<td>2005</td>

<td>Nolan</td>

<td>Nolan</td>

<td>Bale</td>

</tr>

<tr >

<td >The Dark Knight</td>

13



<td>2008</td>

<td>Nolan</td>

<td>Nolan</td>

<td>Bale</td>

</tr>

<tr>

<td >Dark Knight Rises</td>

<td>2012</td>

<td>Nolan</td>

<td>Nolan</td>

<td>Bale</td>

</tr>

<tr >

<td >Untitled Robin Project</td>

<td >2015</td>

<td >Nolan</td>

<td >Nolan</td>

<td >Levitt</td>

</tr>

</table>

13



In terms of discussing the “development” phase, think about how to discuss

leveraging the medium, i.e., the internet, browsers, etc. that can best meets the

user’s needs for our movie genre fan websites. For our purposes this will be in HTML

and CSS. Some sites will require custom image creation, Flash interactivity, or

JavaScript. Like I have been saying, feel free to go above and beyond the scope of this

class. The

key

is

to

learn

something

new

and

use

it

or

apply

it

to

something

that

meets your needs…

If you think your site needs a custom image, feel free to try to create one. The same

goes for a JavaScript menu, or a Flash Animation splash page. I just want you to have

fun and learn! I know many of your are at the end of this certificate and have much

you can bring to the client based on your experience.

Also, it is very important to note that in the real world, working with real clients, they

would actually

give

you

the

wording

to

include

for

a bio

page

or

the

text

images

to

include for a contact page. A web designer/developer should never be creating

content for a client unless they are asked to do so (in the real world… this is rare). The

role of a web designer is to design the content for the web and not create the content

itself… unless it is your own personal web site.



What it means is that if we were to do things in the wrong order "bad things" are

often doomed to happen. If you already have been building some that is fine. Not to

worry. This class is a simulation. But be sure that you remember these warnings in

the future when you are working in a firm or handling a future clients as a freelancer.



Remember, in terms of designing we need to focus on the content of the site and

making that content central to the design. Remember “Content Is King!” To get us

that point, we must draw upon all of the information gathered up to this point and

determine the look and feel of the site.

Our sites could have really cool images and videos… but if our content isn’t clear and

accessible, then our sites fail for our users.

Like I said, the site’s content is based on the results of the previous phases, e.g., the

purpose & analysis. It is also highly possible that a site design and development team

might have to go backwards and re‐think the previous phases because of what is

found out in the design phase.

16



Even colors should add value

17



Demo uploading an image and getting a color pallette



Is this very easy to read?

19



<table width="400" border="4" cellspacing="4" cellpadding="4">

<caption>Batman Projects</caption>

<tr >

<td ><strong>Title</strong></td>

<td><strong>Year</strong></td>

<td><strong>Director</strong></td>

<td><strong>Writer</strong></td>

<td><strong>Actors</strong></td>

</tr>

20



21



How many styles do we see here?

How many declarations do we see here?

What is

a property

that

we

see

here?

What is a value that we see here?



What would be some other visual style that we can add to this table that would add

value for our users? Make it easier for them to read?

29



style="background‐color:#CCC“

style="background‐color:#000“

style="background‐color:#CCC“

style=“color:#FFF;”

style="font‐size:24px;”

style="font‐family:verdana;“

style="text‐align:center"

Have students apply a background color to the whole table after they have colored

specific rows and then discuss precedence because the background colors of those

rows do not change color.

30



36



1. Provide students with the html files for the table evolving from no structure or

design to structure + inline design.

2. Then talk through the evolution till embedded.

38



39



40



41



42



Demo the embedded.

<style type="text/css">

td {

vertical‐align:top;

}

.grey {

background‐color: #CCC;

}

#header {

font‐weight: bold;

color: #FFF;

background‐color: #000;

text‐align:center;

}

.LeftCol {

font‐weight: bold;

}

43



</style>

43



44



File saved as main.css

Page link in the header:

<link href=“inc/main.css" rel="stylesheet"

type="text/css" />



Create a new folder on the desktop. Paste in the sample.html page and rename it

index.html

Demo creating the template index page with navigation within a table row. This then

could be

used

as

a template

for

other

pages.

Demo

creating

a new

page

using

the

template and saving it in a root folder on the desktop.

<table width="800" border="5" align="center" cellpadding="20">

<tr><td>

<p align="center">

<a href="index.html">Home</a> |

<a href="about.html">About</a> |

<a href="movies.html">Movies</a> |

<a href="characters.html">Characters</a> |

<a href="contact.html">Contact</a>

</p>

</td></tr>

50



<tr><td>

CONTENT

</td></tr>

</table>

50



51



A List Apart is a great blog for "people who make websites." It explores the design,

development, and meaning of web content, with a special focus on web standards

and best practices. This weeks post is a little CSS heavy but the points that I want

everyone to walk away with the the over arching theme, i.e., separating the content

from the visual design. This is an important thing to think about as we are all getting

started working

on

our

movie

genre

fan

websites.



57

COAP 2000 Fall 1 2013 Week 4 Lesson Creating Web Pages with Tables, CSS, & Utilizing Adobe Kuler +...

Documents

Transcript of COAP 2000 Fall 1 2013 Week 4 Lesson Creating Web Pages with Tables, CSS, & Utilizing Adobe Kuler +...