Each poem or short story is actually its own page, so there are multiple pages under this category. Each book in the upper left is "clickable" bringing the user to to the appropriate year. Each poem or short story on the right side of the open book is "clickable" bringing up a new page with the poem or short story on the left. The Full PDF box on the bottom will bring up a the full PDF file for that year. The tabs in the upper right will pop out when roll over with the mouse.
Wednesday, December 14, 2011
Final Visual Arts Current Edition Page
This page includes thumbnail pictures of each piece of artwork from the current edition of the Myriad Art Journal. It contains a rollover for thumbnail pic including the the name of the piece and the artist. The tabs in the upper right are also rollovers the "pop out" to click on.
This is a lightbox that pops up when each picture is click on.
Wednesday, December 7, 2011
Monday, November 28, 2011
Wednesday, November 23, 2011
Monday, November 21, 2011
Wednesday, November 16, 2011
Monday, November 14, 2011
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
In my roughs my design evolves. The last rough will be template from which I design my site. I wanted to have a bit of different setup, while still be easily to follow and understand for the user. I hope this design does that.
Wednesday, September 28, 2011
Fixed and Absolute Boxes
Below is my code:
<!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: 50px;
top: 50px;
}
.mediumBox {
background-color: #069;
height: 400px;
width: 400px;
position: fixed;
left: 150px;
top: 150px;
}
.bigBoxAbsolute {
height: 600px;
width: 600px;
position: absolute;
left: 50px;
top: 750px;
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: 250px;
top: 250px;
}
.mediumBoxAbsolute {
background-color: #930;
height: 400px;
width: 400px;
position: absolute;
margin: 100px;
}
</style>
</head>
<body>
<div class="bigBox"></div>
<!--fixed big box class-->
<div class="mediumBox"></div>
<!--fixed medium box class-->
<div class="smallBox"></div>
<!--fixed small box class-->
<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>
</body>
</html>
Monday, September 26, 2011
Tuesday, September 20, 2011
Color - Information Architecture
In order to maintain uniformity throughout this site, I will attempt to keep the layout exactly the same on each of my pages.
Monday, September 19, 2011
Alternative Website Architecture
http://inserviowebsolutions.co.uk/
In my search for an alternative website architecture I came across this site. The menu bars are up in the clouds. While, this architecture is unique, its also remains organized and easily identifiable.
In my search for an alternative website architecture I came across this site. The menu bars are up in the clouds. While, this architecture is unique, its also remains organized and easily identifiable.
Thursday, September 15, 2011
Green Idea for Website
I chose the color green because of its association with nature. This is the area where I will put my focus, but after doing research, I’ve decided I will include some periphery information as well regarding how green’s association with nature has affected other entities, such as religion, culture, and nationality. I will attempt to bring out the characteristics of nature through my design. I will likely use more darker greens, such as forest green, along with some lighter greens, browns, and yellows and possibly blues, as these reflect colors often found in nature. My choice of fonts will likely be organic and flowing, most likely a script, as opposed to stiff and boxy, such as arial. I will attempt to organize my pages around something found in nature – possibly a tree. The images I incorporate will largely be of trees and plants; I may include some animals and possibly a picture or two of those peripheral ideas – religion, culture, and nationality. Nature is definitely the theme here and I will do my best to bring that out in my design.
Green Research
Green is not a primary color. It is often considered one of the additive primary colors. It is a mixture of yellow and blue. On the RGB color wheel the complement of green is magenta, which is an equal mixture of red and blue. In traditional color theory its complement would be red.
Green is closely related to the Old English verb “growan” meaning to grow. Many language families, such as Germanic, Romance, Slavic and Greek, have old terms for green, which are derived from the words for fresh, sprouting vegetation. In this way, green often represents nature. Green can also refer to someone who is inexperienced, jealous, or sick. Also, someone who works well with plants is said to have a green thumb. In areas where the U.S. Dollar is used as currency, green carries a connotation of money, wealth, and capitalism because green is the color of U.S. banknotes. Thus, green can also be used as a slang term for money.
Green is seen in nature in many ways. Several minerals are green color. Animals such as many amphibians and reptiles, as well some fish, insects, and birds are green in color. Most animals appear green because of a reflection of blue light coming through and over-layer of yellow pigment. But the largest of nature’s green color comes from its plants. This is due to chlorophyll, the chemical used by plants in photosynthesis. Chlorophyll does not absorb green light because it first arose in organisms living in oceans where purple halobacteria were already exploiting photosynthesis. Thus, chlorophyll arose to exploit the portions of the spectrum not used by halobacteria. Through evolution many animals have adapted a green color to camouflage themselves within their environments. Interestingly, we human have imitated this color adaption by wearing green clothing as a camouflage in military and other fields.
Culturally, green can have varied and sometimes contradictory meanings. In some cultures, green symbolizes hope and growth, while in others it is associated with death, sickness, envy, or the devil. Stories of the medieval period portray it as representing love and the base, natural desires of man. Green is also known to have signified witchcraft, devilry and evil for its association with faeries and spirits of early English folklore. It was also associated with decay and toxicity. Most commonly though, green is associated with nature. Islam, for example, venerates the color because it expects paradise to be full of lush greenery. Green is also associated with regeneration, fertility, and rebirth due to its connection with nature. In Ancient Egypt green was symbolic of resurrection and immortality – the god Osiris was depicted as green-skinned. Political and advocacy groups today have adopted this color as part of who they are – sometimes, directly in the name. The green movement, the Green Party, and the Global Green Network are examples of this. Environmentally friendly products are considered to be “green”.
Several countries use green on their flags for symbolic or cultural reasons. Several African countries use green on their flags because they borrowed it from the Ethiopian flag, which is one of the oldest independent African nations. Many flags in the Islamic world are green because it is considered sacred in Islam. In the run-up to Iran’s 2009 presidential election, the reformist candidate Mir-Hossein Mousavi chose green as his campaign color – it became pervasive amongst his supporters during the campaign and was often seen being used symbolically in the post-election protests. In India, green is the lowest of the three color bands and stands for fertility and prosperity. Earlier Indian flags also contained a green band representing Islam, the second-most predominant religion in India. In Jamaica, green is used in its flag to represent the country’s lush vegetation. Green is a symbol of Ireland, which is often referred to as the “Emerald Isle”.
Green is a part of many religions and religious ceremonies. Green is considered a traditional color of Islam. Muhammad is quoted in a hadith as saying that “water, greenery, and a beautiful face” were three universally good things. In the Qur’an, sura Al-Insan, believers in God in Paradise wear fine green silk. Also, Al-Khidr – “The Green One” – is a Qur’anic figure who met and traveled with Moses. Roman Catholic and more traditional Protestant clergy wear green vestments at liturgical celebrations during Ordinary Time. In the Eastern Catholic Church, green is the color of Pentecost. Green is one the Christmas colors as well, possibly dating back to pre-Christian times, when evergreens were worshipped for their ability to maintain their color through the winter season. In Ireland and Scotland, green is used to represent Catholics.
Tuesday, September 13, 2011
3 Page Haiku - Updated
I made subtle changes to this updated version. The point sizes and top margins all match to give the viewer the look of a consistent first line as they click through each page. I also lowered the word "falling" on the first page. The final change I made was to make the period after the word "sink" a light pink color. I had originally intended to make it white, but it was too bright and distracted from the rest of the page. I did this to add some finality to the haiku.
Monday, September 12, 2011
3 Page Haiku
I took a different approach when designing these pages in comparison to my first Haiku page. The light blue here is meant to represent the sky and the green is the color of the petal. I subscripted the word "falling". I also made it bigger and bold because I wanted to emphasize the idea of the falling petal. Spaces were added between "A" and "falling" and "falling" and "petal" in order to balance the positive and negative space. The word "falling" is also the link to next page.
On this last page, the blue gets even darker. This is now deeper in the pond where less light shines through. Again, the green remains the same. The word "sink" is by itself lower on the page meant to represent both the sinking of the petal and the quite solitude of the deep. Spaces were added between "And" and "they", as well as, "they" and "both" so that the page would be filled and the positive and negative space would be in balance. On this page the hyperlink is on the period at the end. This is where both the haiku and the petals' journey ends.
On this page the blue gets darker. This is surface color of the pond. I left the green the same because the color of the petal remains the same. "Strikes" has a strikethrough and "floating" is superscripted. "Strikes" contains hyperlink to the next page here.
Haiku - Updated
This page is largely like my original Haiku page below. The only major change was that I made the word "sink" scroll down the page to the give appearance of "sinking". I also cleaned up the code quite a bit. I ordered my tags so the code was easier to follow. I changed the letter height from the "1-7" computer code to point size. I added the <head> tag. I removed extraneous <pre> tags from my code. I also added comments throughout. The main idea behind this page is that the petals are falling, so my design has the words falling on the page. The first two lines of the haiku represent the petals floating to the pond and the horizontal line is meant to represent the water line. After that, both petals just "sink" in the water.
Wednesday, September 7, 2011
Haiku
This assignment was far more difficult than I thought it would be. Using html to design a web page is difficult at best. Aligning the text the way I wanted it was very difficult - perhaps there was an easier way than using the <pre> tag, but I couldn't figure it out. This assignment, did however, help to give me a very basic understanding of the way html works.
Tuesday, August 30, 2011
Websites I Don't Like and Website I Do Like
http://www.gateworld.net/
I don't like this website because of the color scheme. So many blues make everything blend together. There is also a green box that stands out, but not in a good way. It doesn't seem to belong. Other than the articles on the left side of the page, which I feel is clear, nothing else stands out.
http://espn.go.com/
I don't like this website because it's too busy, especially as you scroll down the page. It just seems like there's a bunch of "stuff" below the initial picture and stories. I actually frequent this site often, but never look at that half of the page because I feel like I'm decifering code. I do like the deep red that transitions into the gray though.
http://www.google.com/
Honestly, the look of google's search engine website is one of my favorite's. It's clean and clear. You know what to do the moment you get there. The color scheme is simple, yet makes the important information stand out. The tabs on top allow you to change your search parameters stand out because of the dark gray background.
http://www.giantbomb.com/
I like the design of the website because it's ordered in an appropriate way. The articles are easily identifiable, with clear separation between stories. The text pops against the gray background, though the gray may be a bit too dark for my liking. Red headers make the delineation of ideas easily understandable and pop out from the background. I also like the choice of the Arial font with bold story titles.
I don't like this website because of the color scheme. So many blues make everything blend together. There is also a green box that stands out, but not in a good way. It doesn't seem to belong. Other than the articles on the left side of the page, which I feel is clear, nothing else stands out.
http://espn.go.com/
I don't like this website because it's too busy, especially as you scroll down the page. It just seems like there's a bunch of "stuff" below the initial picture and stories. I actually frequent this site often, but never look at that half of the page because I feel like I'm decifering code. I do like the deep red that transitions into the gray though.
http://www.google.com/
Honestly, the look of google's search engine website is one of my favorite's. It's clean and clear. You know what to do the moment you get there. The color scheme is simple, yet makes the important information stand out. The tabs on top allow you to change your search parameters stand out because of the dark gray background.
http://www.giantbomb.com/
I like the design of the website because it's ordered in an appropriate way. The articles are easily identifiable, with clear separation between stories. The text pops against the gray background, though the gray may be a bit too dark for my liking. Red headers make the delineation of ideas easily understandable and pop out from the background. I also like the choice of the Arial font with bold story titles.
Subscribe to:
Posts (Atom)