lundi 30 septembre 2013

DSDN112 Comic final pages





For this comic I was inspired by 4-panel mangas, or as they are sometimes referred to, slices of life. This comic concentrates on the everyday life of the characters with no true end to it and each set of 4-5 pages is it's own self contained story. Unfortunately I was not able to do everything I would have wanted with this comic, mainly because of lack of time. I would have wanted to have a thicker cover using card paper and a second removable colored cover over it. Also I would have liked to add more nuances of gray to the panels.

mardi 17 septembre 2013

DSDN112 Lab.






 The red tone coveys a sentiment of anger.
 In this picture the character has a cetrall position flanked by two dark zones driving a sense of mystery.
In this one the character is standing over the observer giving the character a dominant position, the dark surrounding him enhance the focus on him, this conveys either a sens of aggressiveness or security depending on context.

dimanche 15 septembre 2013

DSDN 142 Joshua Davis lecture review.

The lecture by Joshua Davis was quite interesting I have to say. It shouwed that design isn't only about what the job is but can draw inspiration from anything and everything around us. It was also a great example of how one can mix in his hobys and passions into design to make it more personal and enrich the design. The one thing I found a litle offputing was that even though the lecture was interesting, it didn't go in depth into the process and was more of a colection of anecdotes strung together.

jeudi 12 septembre 2013

DSDN112 P3 Sketching

Some sketching done for project 3:



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.



These are the pictures used for project 2:






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>

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;
}