Kirstin's Art146 Blog: 2011

Wednesday, December 14, 2011

resizing old covers for myriad

Spry Exercise

Here's my exercise for a spry menu... I got the float down for the columns but didn't have time yet to type up the menus...

Monday, November 28, 2011

List Exercise

Finally done!!! Code is in the student folder on art shared :)

Wednesday, November 23, 2011

Myriad Cyan & Gold

Experimenting with alternate colors...
(And I fixed the menu font, tab leading and sizes)

Tuesday, November 22, 2011

For my personal design process, it's easier for me to build a home page first (like a primary canvas) and create architecture based on that design. So with inspiration from the web pages I previously posted, I have come up with the following design:

Wednesday, November 9, 2011

Myriad Logo

First called Impressions, the magazine was founded by a group that called itself The Literary Roundtable. The magazine has gone through a name change and countless physical transformations, but their intent has stayed the same: to provide an outlet for the college's creative community.

Because of this I want to create a monogram for the site that is framed by concentric circles. The appearance would be similar to ripples, illustrating the impact of the publication radiating out as it inspires a community.

I have experimented with several fonts to decide my myriad style. Being a text-heavy publication, font is very important. Here is my process so far:

Round two...

Monday, November 7, 2011

Myriad research

Myriad (n) 1: ten thousand 2: a great number

So begins my research for my new web project. I will be building a site for the El Camino literary publication, "The Myriad". It showcases student writing and art. It may be a challenge to bridge the genres, or to do them both equal justice. For now I'm brain storming by finding site layouts which may help me devise further ways to make the leap from paper to online publication...

Sites I like so far and why:

Ray Bradbury: I like the fragmentation. I could use a layout like this to showcase quotes, thumbnails of art, pics of the campus and other items. Maybe set the boxes on a timer so that they rotate (think Wheel of Fortune) to read "Myriad" after a given amount of time...

Juked: I like the text overlay of this site and that the article names constitute all the text present...

Opium: I love the type collage in the background. Color scheme and layout very fun.

Rock & Roll: I also like these colors and could easily see the box in the middle of the page being an open book image with rotating quotes and pictures...

And now research continues... :D

Wednesday, November 2, 2011

Color site is online!!!

A successful 1st web-building endeavor! See it in person at kavizthum.com

Monday, October 10, 2011

Assignment: Week 5

Here is a Dreamweaver screen shot of my latest assignment.

It's an exercise in nesting and style sheets- and math since all

the placing has to be added/subtracted out :) Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Assignment: Week 5</title>

.aBox {

height: 200px;

width: 285px;

margin-bottom: 5px;

padding-right: 10px;

padding-left: 105px;

border-top-width: 20px;

border-bottom-width: 20px;

border-top-style: none;

border-bottom-style: ridge;

border-top-color: #0CF;

border-bottom-color: #0CF;

font-size: 9px;

background-image: url(rhys.jpg);

background-repeat: repeat-y;

}

.bBox {

font-size: 9px;

height: 150px;

width: 340px;

padding-top: 20px;

padding-right: 10px;

padding-bottom: 30px;

padding-left: 10px;

border-right-width: 20px;

border-left-width: 20px;

border-top-style: none;

border-right-style: ridge;

border-bottom-style: none;

border-left-style: ridge;

border-right-color: #6C9;

border-left-color: #6C9;

background-image: url(rhys2.jpg);

background-repeat: no-repeat;

}

p {

font-family: Arial, Helvetica, sans-serif;

font-size: 10px;

text-decoration: none;

margin: 0px;

padding: 0px;

}

h2 {

font-family: "Comic Sans MS", cursive;

font-size: 18px;

color: #009;

margin: 0px;

padding: 0px;

}

h3 {

font-family: "Comic Sans MS", cursive;

font-size: 18px;

color: #FFF;

margin: 0px;

padding: 0px;

vertical-align: middle;

text-align: center;

}

</style>

</head>

<body>

<h2> Assignment: Week #5 </h2>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies molestie tellus quis rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam non urna sed nulla semper convallis.

<br/>

</div>

<h3> Assignment: Week #5 </h3>

<p>

<br/>

</div>

</body>

</html>

Wednesday, October 5, 2011

Website Rough

Using fireftp I was able to post my 1st draft of my color-study homepage! It's far from done, but it's a step in the right direction. I'm excited :)

Check it out:
kavizthum.com

Wednesday, September 28, 2011

Absolute vs Fixed positioning

In preview mode, we see...

Monday, September 26, 2011

Web Code: 3 boxes w. Dreamweaver

Untitled Document

Sketches for Web

Wednesday, September 21, 2011

Hello World!

My website is up and running! It's currently displaying my haiku project, but that will change shortly.

Check it out at:kavizthum.com

Webpage designs

Here are my rough designs for my Murex-dying homepage. I want to work with layers and focus more on text that imagery, which is always a big struggle for me.

Monday, September 19, 2011

Site Architecture

Here's the outline for the Purple website I'll be creating:

Something different

A creative webpage I found is: http://gt3creative.com/ (fun roll-over text).

This screen shot doesn't do it justice, so click the link above
to see their interactive menu.

For Reference

So I found this soon to be relevant site:
landing-pages-design-tips-and-examples

It's pretty interesting and link several other insightful pages I can see myself referencing in the near future.

Start wearing PURPLE...

To hear the song, click here

I chose purple since one of my best friends is getting married this weekend and that's "her color". There's a lot of stress associated with the color at the moment for me (I'm matron of honor), so I need a fun, fresh outlook on it. I've never fully realized the color's flexibility in countless hues as it can be either warm or cool, faded or savory, seductive or lighter-than-air. One of the most costly shades in history is Tyrian Purple. Unlike other colored textiles that would fade in the sun, clothing dyed in Tyrian Purple would become darker. The dye came from a Mediterranean Sea-snail called murex brandaris and it would take 12,000 snails to yield 2 grams of dye. The rarity and vivacity of this color led it to become the color of nobility. In Byzantium, Emperors made laws forbidding anyone but themselves to wear it! Thus the saying "born to the purple" came about.

Purple also has other connotations. It often represents spirituality as it is said to be a color that "vibrates". The colors it is composed of, red and blue, compete with one another which can create something near an optical illusion. In Feng Shui, it is recommended to only use the color in healing rooms or meditation areas. The stone/color amethyst is said to be sacred to the Buddha.

I'm looking forward to further exploring this color through web design.

Monday, September 12, 2011

Series of 3

Once you click on the blinking "hot" text, you are linked to...

this marquee text, bouncing left and right on half of the screen.

Because of the movement, you are able to click on ANY of the words...

This final page, "Poppies are blooming". Click the flower to reload the first page.

The background colors are all the same hex#, but they aren't appearing that way from the screen shot...

Wednesday, September 7, 2011

html haiku

Since the code isn't displaying properly (bummer), here's a screen shot of the work...

Wednesday, August 31, 2011

Unsuccessful Webpages

HUMMUS-HOUSE.COM is a fantastic restaurant I found this past Summer. Their food and atmosphere are great, but unfortunately their webpage is not. The color palette is too limited and the lack of contrast make it very dull. The navigation bars are segmented (the main is broken in two lines) giving the visitor a lack of direction and visual flow. The large-boxy images compete with the small text, making it hard to read. Bottom line, the site seems to lack clarity and thematic elements that create visual hierarchy.

LUSHUSA.COM is a site for bath products and cosmetics that are handmade and eco-friendly. Having been to their stores, this was my first visit to their website. It is chaotic and overwhelming! With multiple menus- some horizontal, others vertical- not to mention type and photos clashing with hand-drawn letters and images, it was a dizzy browsing experience. There was too much to look at and read, so I'm left to infer that the page is primarily for shoppers who know exactly what item they're searching for (and can type it in the search box, thus avoiding the homepage hullabaloo).

Successful Webpages

MACDUFFEVERTON.COM is a successful website because of its clean appearance and easy to navigate menus. The use of white space compliments the luscious colors of the photographs, giving the viewer an obvious hierarchy in content. The menu navigation choices are limited and self-explanatory. Much like the Google homepage, this site's design is successful in its simplicity.

EATINGWELL.COM is a recipe site that is loaded with content, both photo and text. This webpage is successful in that it bridges the gap between idle browsing and more direct searching. With an obvious visual hierarchy in play, it is just as easy to navigate to a specific recipe as it is to cruise for edible inspiration. Aesthetically, the site's color palette is fresh and pleasing, hearkening to ripe produce. It seems the designer was very mindful of both their subject and their audience.

Why I'm taking this class...

When it comes to art, the web is a medium that is foreign to me. With plans to move my graphic design career forward, I need to market myself effectively. Learning web design will enable me to do this. The days of submitting a physical portfolio have passed. As a result, I am looking forward to posting my design work online as well as executing the design of the site itself. In addition, I hope to develop a great understanding of the web design process, thus enabling me to add it to my resume.