Affichage des articles dont le libellé est DSDN112. Afficher tous les articles
Affichage des articles dont le libellé est DSDN112. Afficher tous les articles
lundi 30 septembre 2013
DSDN112 Comic final pages
mardi 17 septembre 2013
DSDN112 Lab.
lundi 16 septembre 2013
jeudi 12 septembre 2013
DSDN112 P2
For this
project I wanted to take a look at the public transportation in
Wellington as it was one of the first things that struck me as odd when I
arrived in New Zealand.
For the web page I wanted to have a layout that would be reminiscent of the busses themselves and thus went with a color palette of yellow and grays . For the layout itself I decided to frame the page with two vertical yellow lines like those found in bus walkways.
For the web page I wanted to have a layout that would be reminiscent of the busses themselves and thus went with a color palette of yellow and grays . For the layout itself I decided to frame the page with two vertical yellow lines like those found in bus walkways.
These are the pictures used for project 2:
.jpg)
.jpg)
.jpg)
The code used:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="P2.css" />
<title>Wellingtons Bus Problem</title>
</head>
<body>
<div id="container">
<div id="title">
<h1>Wellingtons Bus Problem</h1>
</div>
<div id="line1"></div>
<div id="line2"></div>
<div id="bloc1">
<div id="photo1">
<img src="Pic01.JPG">
</div>
<div id="text1">
<p>I must first start this work by saying that I am not from New Zealand and come from France. When I arrived in wellington, I was very surprised to see what kind of bus services were offered or to be more precise the lack of it.
In wellington there are buses every 30 minutes. This is hardly fitting for a city that claims to be the Capital of a country, where I come from, a city of comparable size to Wellington, we will have busses pass every 5 minutes. This avoids long waiting between buses and, as demonstrated by the picture to the left, avoids questioning when one misses a bus without knowing which one it was, instead of potentially waiting 30 minutes, the passenger would have to wait a mere 5 minutes.
</p>
</div>
</div>
<div id="bloc2">
<div id="photo2">
<img id="pic2" src="Pic02.JPG">
</div>
<div id="text2">
<p>The insides of the wellinton buses is very cramped, the pathway between seats is barely wide enough to let a person pass, moreover most buses have little to no space for people to stand or for wheelchairs.
</p>
</div>
</div>
<div id="bloc1">
<div id="photo1">
<img src="Pic03.JPG">
</div>
<div id="text1">
<p>Cramped seats also mean that people have no where to comfortably place luggage elsewhere but the seat next to them, this means a person with a bag takes two seats instead of one resulting in a loss of passenger capacity.
</p>
</div>
</div>
<div id="bloc2">
<div id="photo2">
<img src="Pic04.JPG">
</div>
<div id="text2">
<p>Moreover, most seats are too close together and prevent people from siting straight in them, instead passengers must assume an awkward sideways position, or any other contortion, in order to fit in their seats this generally means that there is not enough room for and other person to sit next to them.
Fortunately, the city has recently been replacing the older buss models by newer ones that address these issues, but the delay between buses remains a problem.
</p>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="P2.css" />
<title>Wellingtons Bus Problem</title>
</head>
<body>
<div id="container">
<div id="title">
<h1>Wellingtons Bus Problem</h1>
</div>
<div id="line1"></div>
<div id="line2"></div>
<div id="bloc1">
<div id="photo1">
<img src="Pic01.JPG">
</div>
<div id="text1">
<p>I must first start this work by saying that I am not from New Zealand and come from France. When I arrived in wellington, I was very surprised to see what kind of bus services were offered or to be more precise the lack of it.
In wellington there are buses every 30 minutes. This is hardly fitting for a city that claims to be the Capital of a country, where I come from, a city of comparable size to Wellington, we will have busses pass every 5 minutes. This avoids long waiting between buses and, as demonstrated by the picture to the left, avoids questioning when one misses a bus without knowing which one it was, instead of potentially waiting 30 minutes, the passenger would have to wait a mere 5 minutes.
</p>
</div>
</div>
<div id="bloc2">
<div id="photo2">
<img id="pic2" src="Pic02.JPG">
</div>
<div id="text2">
<p>The insides of the wellinton buses is very cramped, the pathway between seats is barely wide enough to let a person pass, moreover most buses have little to no space for people to stand or for wheelchairs.
</p>
</div>
</div>
<div id="bloc1">
<div id="photo1">
<img src="Pic03.JPG">
</div>
<div id="text1">
<p>Cramped seats also mean that people have no where to comfortably place luggage elsewhere but the seat next to them, this means a person with a bag takes two seats instead of one resulting in a loss of passenger capacity.
</p>
</div>
</div>
<div id="bloc2">
<div id="photo2">
<img src="Pic04.JPG">
</div>
<div id="text2">
<p>Moreover, most seats are too close together and prevent people from siting straight in them, instead passengers must assume an awkward sideways position, or any other contortion, in order to fit in their seats this generally means that there is not enough room for and other person to sit next to them.
Fortunately, the city has recently been replacing the older buss models by newer ones that address these issues, but the delay between buses remains a problem.
</p>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background-image:url('bus pattern.jpg');
background-color:#cccccc;
}
#container{
width:1280px;
height:2000px;
border:0px;
}
#line1 {
height:100%;
width:20px;
float:left;
margin-left:15px;
background:#ffe800;
border:0px;
}
#line2 {
height:100%;
width:20px;
float:right;
margin-right:15px;
background:#ffe800;
border:0px;
}
#bloc1 {
height:480px;
margin-top:20px;
margin-bottom:20px;
margin-left:10px;
margin-right:10px;
width:1190px;
border:0px;
}
#photo1 {
height:480px;
margin-left:10px;
width:800px;
float:left;
background:#000000;
border:0px;
}
#text1 {
height:480px;
width:290px;
float:right;
background:#33302e;
border:0px;
margin-right:10px;
}
#bloc2 {
height:480px;
margin-top:20px;
margin-bottom:20px;
margin-left:10px;
margin-right:10px;
width:1190px;
border:0px;
}
#photo2 {
height:480px;
margin-right:10px;
width:800px;
float:right;
background:#000000;
border:0px;
}
#text2 {
height:480px;
width:290px;
float:left;
background:#33302e;
border:0px;
margin-left:10px;
}
#title {
background-color:#cccccc;
}
div {
height:75px;
width:80%;
border:2px solid black;
margin: auto;
}
h1 {
text-align:center;
background-color:#cccccc;
}
p {
margin-left:5px;
margin-right:5px;
color:white;
}
img{
height:480px;
width:800px;
}
background-image:url('bus pattern.jpg');
background-color:#cccccc;
}
#container{
width:1280px;
height:2000px;
border:0px;
}
#line1 {
height:100%;
width:20px;
float:left;
margin-left:15px;
background:#ffe800;
border:0px;
}
#line2 {
height:100%;
width:20px;
float:right;
margin-right:15px;
background:#ffe800;
border:0px;
}
#bloc1 {
height:480px;
margin-top:20px;
margin-bottom:20px;
margin-left:10px;
margin-right:10px;
width:1190px;
border:0px;
}
#photo1 {
height:480px;
margin-left:10px;
width:800px;
float:left;
background:#000000;
border:0px;
}
#text1 {
height:480px;
width:290px;
float:right;
background:#33302e;
border:0px;
margin-right:10px;
}
#bloc2 {
height:480px;
margin-top:20px;
margin-bottom:20px;
margin-left:10px;
margin-right:10px;
width:1190px;
border:0px;
}
#photo2 {
height:480px;
margin-right:10px;
width:800px;
float:right;
background:#000000;
border:0px;
}
#text2 {
height:480px;
width:290px;
float:left;
background:#33302e;
border:0px;
margin-left:10px;
}
#title {
background-color:#cccccc;
}
div {
height:75px;
width:80%;
border:2px solid black;
margin: auto;
}
h1 {
text-align:center;
background-color:#cccccc;
}
p {
margin-left:5px;
margin-right:5px;
color:white;
}
img{
height:480px;
width:800px;
}
jeudi 15 août 2013
DSDN112: readings.
Envisioning Information by Edward
Tufte:
This was an interesting reading. The
main point of the text was explaining how too much information, or
the inconsiderate display of information can mislead, confuse or tire
the user. This explained by the expression 1+1=3 or more; meaning
that when one places two lines on a piece of paper, they are in fact
creating more shapes when you take into account the space between the
lines.
The author explains, through the use
of clear and well chosen examples that to have a clear
and readable pice of information, you
must consider what you aren't showing as much is not more that what
you are showing. Moreover the choices of colors and the use of empty
spaces to guide and divide the page are very important when creating
a highly clear piece of information.
To conclude I have to say that this
text was very interesting and informative and wile greatly help me in
the future.
Designing
for interaction by Dan Saffer:
An
other interesting reading, the purpose of this text is to explain how
interaction design can be produced and sourced from every day life.
Through the use of examples and detailed explanation of his own
experiences, the author shows how the observation of everyday life
and everyday people can yield interesting ideas for design, like the
adaptation or the misuse of everyday objects.
One
of these examples was children using a door to play, the obvious use
intended for the object had been derived for an other use, even
though it wasn't intended or designed for that in the first place.
All
in all, this reading has been very interesting, and has provided a
solid base for my current project and will certainly be very helpful
in the future.
lundi 12 août 2013
jeudi 1 août 2013
DSDN 112 Project One: Biography Web Pages.
Screen shots and code for both web pages:
Professional web page:
Screen shot:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Bio1.css" />
<title>HAMILTON Nicolas Biography</title>
</head>
<body>
<div>
<h1> Biography </h1>
<hr></hr>
<h2>HAMILTON Nicolas</h2>
<h2>Media Designer</h2>
<div style="width:100%; height:10px; background-color:black"></div>
<img src="DSC_0020.JPG" height="300px" width="180px"></img>
<p> In this day and age it is important to be able to communicate ones ideas efficiently and meaningfully. It is the job of a media designer to do so, and as a media designer, I take great pride and pleasure in satisfying these demands.</p>
<p> As a media design student I spent 3 years studying at Victoria University in Wellington, New Zealand, and 4 more years studying game art in France. I also have 9 years of overseas experience in very different places around the pacific and south-east Asia, moreover I am fluent in three different languages, namely English, French and Japanese. I believe that this multicultural experience gives me the edge and allows me to bring a wide verity of skills and influences to my work.</p>
<p> If you wish to contact me you can do so <a href="http://nsbhschoolofdesign.blogspot.co.nz/">HERE</a>.</p>
</div>
<hr></hr>
</body>
</html>
CSS:
Personal web page:
Screenshot as normaly seen by viewer:
Screenshot with visible text:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Bio2.css" />
<title>Biography of ghosts</title>
</head>
<body>
<h2><em>The biography of the Ghost</em></h2>
<p><em>Our story is that of a Ghost, and it starts HERE > <span>The</span><span>thing</span><span>with</span>
<span>ghosts</span><span>is</span><span>that</span><span>you</span><span>can</span><span>only</span><span>ever</span><span>see</span><span>them</span>
<span>if</span><span>you</span><span>keep</span><span>your</span><span>eyes</span><span>on</span><span>them.</span>
<span>If</span><span>you</span><span>get</span><span id="distraction">distracted</span><span><span id="subtle">.</span><span>You</span><span>may</span><span>lose</span><span>them.</span>
<span>But</span><span>fear</span><span>not,</span><span>for</span><span>every</span><span>ghost</span><span>has</span><span>a</span><span>place</span>
<span>where</span><span>they</span><span>feel</span><span>safe,</span><span>a</span><span>place</span><span>they</span><span>are</span><span>alwase</span><span>found,</span>
<span>a</span><span>place</span><span>they</span><span>call</span><span id="home">HOME.</span>
</p>
</em>
</body>
</html>
CSS:
The black background was deliberately chosen to once again give life the idea of a child reading a ghost story under his bed sheets.
lundi 22 juillet 2013
DSDN112 Lab1 HTML tutorials
The proof of completion for the 3 HTML tutorials requested as part of the lab1 hand-in:
mardi 16 juillet 2013
DSDN112 Lab1
Thes are the 150 word reviews of the websites foud in Web design index and Web dising index: by content by Günter Beer.
http://www.marcdahmen.de/
This website hosts pictures of Marc Dahmens architecture projects. It is an interesting website as it has a high degree of interaction as well as an interesting layout for the pictures. The pictures are laid out like a bunch of photos on a table with simple instructions as how to browse through them. The website is separated into two sections, a projects section and a picture section, making it easy to browse through.
This website suffers from some downsides though. First of all, there is no explanation as to what the site is and no information on the author or his intentions. Secondly there is no explanation for the pictures in the picture section, only a title. Being architecture projects, it would have been nice to have an ex[planation on the authors intentions for his designs. The projects section on the other hand has a nice succinct explanation for each project even though the pictures are a bit small.
This website regroups the works of
various artists over time in several “books”. This website give
you he choice of three languages (english, french and chinese),
meaning that is easy to access for a large number of people
throughout the would, and has a simple yet well thought out layout.
The information tabs are simple and obvious, the information given is
clear and concise. As for the actual art, all the pieces are
regrouped by theme in different “books”, each of which uses a
simple flash animation to turn the pages. The page has a very simple
and uncluttered feeling which allows you to really appreciate the art
without being distracted.
On the down side, the book-like layout
also means that the pictures have a seam in their center which is a
bit of a letdown as well as the fact that because of the
prensentation, the pictures are a bit small and cants be made bigger.
A web-design and printing company,
their website is quite interesting. Easy access to a great deal of
information yet, presented in such a way that the user isn't
confronted with a wall of text. The humorist pictures add a nice and
refreshing touch. There is a nice background of various photos
changing around but not distracting. A good point is the logo of the
company that is visible from the start and throughout the different
pages, being a simple logo it doesn't draw too much attention and
distract from the contents of the website but being there means that
one will remember it.
A good thing that I haven't seen on
the other websites is an extensive gallery of all their previous
projects with nice big pictures and screen-shots. Enough information
on the client to understand their intentions for each project.
Finally, the site is very easy to navigate, you can't get lost and
the various navigation boutons and links are clearly displayed and
marked.
Even though the site has no obvious
clues as to what one has to do to access most of its content, it has
a really cool interactive flash menu. Unfortunately, even though the
animations for the menu are very cool looking and well designed, they
are quite long, meaning a lot of downtime between different sections
of the website. Moreover, some of the animations are deconstructed
into two or three parts, requiring the user to click the screen to
launch the next part, unfortunately, the visual clue for this isn't
obvious at first which can lead to even more waiting between menus.
This is an example of a website that pushes the interaction with the
user too far.
On the bright side though, the menus
are simple and functional, information is displayed immediately and
in a comprehensive way. Information on the website itself and
external links are easily found which is a good thing.
By far the most impressive website of
the group, icoplasma is a design firm and it has the coolest website
I have ever seen. It has a very interesting and original format, with
a good level of interactivity. Moreover, all clickable objects are
obvious, stand out of the background and are very intuitive. The
website is easy to navigate and displays the necessary amount of
information about all projects presented. Moreover, the website gives
the choice of two languages, english and spanish, broadening it's
range of audience.
The only downsides to the site are the
size of the pictures for each project, which are very small, and the
lack of external links to the projects presented, especially the
web-design projects. Finally, the website has a lot of sound effects,
almost every action done on the website has an accompanying sound
effect, while not necessarily a bad thing, it can become annoying
after a while of browsing the site.
Inscription à :
Articles (Atom)