Wednesday, November 9, 2011
Myriad Statement
In thinking about the Myriad site, I've realized that it's more of an information dump than anything else. The challenge will be to take that "info dump" and make it look interesting and engaging. I believe the best way to do this is through user interactivity. I believe taking a handful of images and/or short stories and highlighting them through an interactive means will make the site engaging for the viewer. I'm thinking that moveable tabs showing off different these short stories or images might be one way of achieving a level of user interactivity. I would like to include the cover art as something of a greetings page prior to the real home page. Because Myriad has a long history, going back to 1961, I believe including some things from older editions would add to overall effect. Since Myriad is a literary magazine I believe the site needs a sense of the fantastic, something almost whimsical, perhaps Disney-esque. Hopefully, these ideas will come together to form a coherent, yet interesting, website.
Myriad website inspirations
http://www.cdcdevelopmentsolutions.org/
I like the setup of this website. I would like to make use of the "tabs" as shown above to show off pictures and maybe some short stories for the myriad site.
http://westburylibrary.org/
I like the way the home page for this website looks. Perhaps a large introductory picture (maybe the cover page) and/or short story would be a nice home page for the myriad site.
Green Website Final
On the final version of my first website I made some changes from my original roughs, but I also left a lot the same. The focus of the site became how the color green's association with nature has influenced other, seemingly unrelated, aspects of our lives. I decided that creating what appears to be a static page (though it's actually ten pages in all) with changing facts and pictures would be an interesting way to draw user attention and create user interactivity. I wound using an external style sheet because it is ten pages and any changes would only have to be made once, instead of ten different times. I created four tabs, using artwork I created in Illustrator, to denote various categories. Each category has three sub-categories with detailed information relating to how it has been influenced by it's green's association with nature. The sub-category menus on the left side were all artwork created in Illustrator. None of the edges of any of the boxes and pictures are square - I soften every edge in an attempt to give it a more more natural and organic feel. The paper container was created in Photoshop using various filters to achieve the look of old parchment, as well as the burn tool and dodge tool for areas of light and dark, and a layer mask to achieve the distorted edges.
Monday, October 17, 2011
2 Websites References
The following websites are references for my website...
http://www.glocalventures.org/about_us.php
http://www.nature.org/
http://www.glocalventures.org/about_us.php
http://www.nature.org/
Updated - Fixed and Absolute Boxes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New Boxes</title>
<style type="text/css">
.bigBox {
background-color: #330;
height: 600px;
width: 600px;
position: fixed;
left: 700px;
top: 50px;
}
.mediumBox {
background-color: #069;
height: 400px;
width: 400px;
position: fixed;
left: 800px;
top: 150px;
}
.bigBoxAbsolute {
height: 600px;
width: 600px;
position: absolute;
left: 50px;
top: 50px;
background-color: #300;
}
.smallBoxAbsolute {
background-color: #069;
height: 200px;
width: 200px;
position: absolute;
margin: 100px;
}
.smallBox {
background-color: #0F0;
height: 200px;
width: 200px;
position: fixed;
left: 900px;
top: 250px;
}
.mediumBoxAbsolute {
background-color: #930;
height: 400px;
width: 400px;
position: absolute;
margin: 100px;
}
</style>
</head>
<body>
<div class="bigBoxAbsolute">
<!--absolute big box class-->
<div class="mediumBoxAbsolute">
<!--absolute medium box class - nested within big box-->
<div class="smallBoxAbsolute"></div>
<!--absolute small box class - nested within medium box-->
</div>
</div>
<div class="bigBox"></div>
<!--fixed big box class-->
<div class="mediumBox"></div>
<!--fixed medium box class-->
<div class="smallBox"></div>
<!--fixed small box class-->
</body>
</html>
Wednesday, October 5, 2011
Illustrator Roughs
Subscribe to:
Posts (Atom)