Well I hav completed my first Flash website. The great thing about it is that it was a learning process and my next one will be significantly better. The bad thing is that I don't like feeling that way about the things I make, but the high blood pressure from screwing 10 other things up while trying to fix one little flaw (it was like my site was imploding on myself, perhaps designating itself to be a metaphor for my brain functionality) was starting to make me hate the entire Flash program. And that's no good. I'd rather take a grade hit than get a pit in my stomach the next time I start a Flash project. I want Flash to be my friend.
Things I learned though, besides the obvious technical skills to even start building a site in it:
1. I think I would do a lot better with a paper blueprint. Maybe with more practice I won't feel the need to chart every button and what I'll need to do to make everything cooperate, but I found myself getting lost in the little squares of the timeline a lot sooner than I thought. I think the next project I undertake, after creating a digital comp, I'm going to go back to the sketch book, redraw the final look, and start taking notes on that paper about what each specific element should be (what kind of symbol with what properties, animations, or events on which timeline), what needs to do what, and even basic Actionscript earmarks that will need to be considered on the page.
2. Flash can be waaaaay cooler than I realized. And it's more important in web development than I thought. I've only heard of complaints that people only know how to build sites in Flash and that nobody knows code anymore, never the other way around. And I guess that it goes without saying that being able to do BOTH is in fact the best quality. I'm glad I was raised on code, but I'm excited about what I can make in Flash. I'll need to start dividing my time between learning more Actionscript and getting to know jQuery.
Here it is. Enjoy.
I already know what needs to be fixed in both functionality and design. I'll catch it next time around.
http://www.fall10.graphicinterfacedesign.com/students/hswenson/flash/nocutsnoglue/
Thursday, December 9, 2010
Tuesday, October 12, 2010
HTML Website
I have completed my HTML website... I hope. From past experience you need at least 24 hours to keep poking at and testing and reading the site before you find all of the bugs and typos, etc. Oh well.
http://www.fall10.graphicinterfacedesign.com/students/hswenson/html/ipa/index.html
http://www.fall10.graphicinterfacedesign.com/students/hswenson/html/ipa/index.html
Thursday, September 23, 2010
CSS Tutorial
This tutorial is going to show you how to use CSS to make text appear when you hover over a link, or an image, and how to use that same concept to make an image appear when you hover over an image or link.
The page will look like this with our text appearing below the link box and our image appearing to the side of the link box.
Step 1: Download these images and name the accordingly for ease of using the code samples I provide.
thumb.jpg
fbthumb.jpg
facebook.jpg
Step 2: You'll need a basic HTML page and an attached external style sheet or space between your head tags for an internal style sheet. Put a single <div> with the id="box" in the body. This is where we will place the link text and image that we will hover over with the mouse.
</style>
</head>
<body>
</body>
</html>
<a href="#">Some Link<span>Your little hoodrat friend makes me sick. But after I get sick I just get sad, cuz it burns being broke, hurts to be heartbroken and always being both must be a drag. </span></a>
Breakdown: The anchor tag encapsulates the whole thing. Just after the a tag we have the words that will actually appear as the link text. Just after that we have a span tag with some other text content. This text can be whatever you want. The text within the <span> will be the text that appears elsewhere on the page when you hover over the link.
Now let's add an image link. This link will also make the text within the <span> appear when you hover over it.
<a href="#"><img src="thumb.jpg" /><span>NERD!</span></a>
Now let's add another image link that will make an image appear when you hover over it.
<a href="#"><img src="fbthumb.jpg" /><img id="appear" src="facebook.jpg" /></a>
The first image is the image that will appear in the link box. The second image is given the id "appear" in order to help up style it differently from the first image. Without any styling, our page will be in quite a bit of disarray. It should look something like this:
Step 3: Let's add some basic styling to the page and our link box. This will separate the links and designate their space, and open the space for images and text to appear.
body {
background: #000000;
}
#box {
position: absolute;
top: 100px;
left: 50px;
width: 150px;
height: 200px;
font: 16px Arial;
background: #999999;
}
Our page should look something like this now:
Step 4: Now let's format the <span> to get that extra text out of our view. This will affect the text in both the first and second link.
a span {
display: none;
}
This styling hides the text so we can focus on formatting the rest of the page the way we want it.
Step 5: Now we need to organize our links within their box. The following code gets rid of that pesky underline, colors our <a> text white, and give some spacing between the three. The second bit of code puts a bit more padding between the picture.
I also threw in a <br /> just above the first link as some simple band-aid formatting to give more even space between the first link and the top of the box. Here is what we have so far.
Step 6: That Facebook picture is getting on my nerves at this point so let's hide it from view now. To hide an image we need to do something a little different. We need to give it's height, width and border no value so that it doesn't pop up when the page loads. After we do that, we'll bring it back with the hover just like the text of the other 2 links.
#box a #appear {
height: 0;
width:0;
border-width: 0;
}
Now we can make things reappear where we want in the empty space. Notice that the code above is referencing our larger image that has an id of "appear" and not just any img.
Step 7: Lets bring out the text that we hid and style it. I am going to have the text for both the text link and the image link appear in the same place. To do that, we need to style the <span> in its hover state.
a:hover span {
display: block;
position: absolute;
top: 300px;
left: 0px;
width: 200px;
height: 200px;
color: #ffffff;
font: 10px Arial;
text-decoration: none;
}
Breakdown: Where we said display:none in the normal <span> styling, when a mouse hovers over the links, we want it to display again as a block of text. We want it to go to a specific place, so I placed the position as absolute. Now I need to give it coordinates on the page. The ones I chose were 300 pixels from the top of the page and 0 pixels from the left side of the page (this aligns the text to the left edge of the link box). I also need to determine size of the box within which the text will display and went width 200px wide by 200 px tall. The color of the text in my <span> will be white. The font will be smaller than the default size at 10px and will be displayed in Arial. I'm also getting rid of that pesky underline by removing text-decoration.
Step 8: Now to bring back the Facebook picture when we hover over the 3rd link. For me, the hardest part about doing this was figuring out how to path the selectors. Here's what works with this page:
The page will look like this with our text appearing below the link box and our image appearing to the side of the link box.
Step 1: Download these images and name the accordingly for ease of using the code samples I provide.
thumb.jpg
fbthumb.jpg
facebook.jpg
Step 2: You'll need a basic HTML page and an attached external style sheet or space between your head tags for an internal style sheet. Put a single <div> with the id="box" in the body. This is where we will place the link text and image that we will hover over with the mouse.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
Step 3: Lets add the content. The first thing we add will be a text link. Here's mine:
<a href="#">Some Link<span>Your little hoodrat friend makes me sick. But after I get sick I just get sad, cuz it burns being broke, hurts to be heartbroken and always being both must be a drag. </span></a>
Breakdown: The anchor tag encapsulates the whole thing. Just after the a tag we have the words that will actually appear as the link text. Just after that we have a span tag with some other text content. This text can be whatever you want. The text within the <span> will be the text that appears elsewhere on the page when you hover over the link.
Now let's add an image link. This link will also make the text within the <span> appear when you hover over it.
<a href="#"><img src="thumb.jpg" /><span>NERD!</span></a>
Now let's add another image link that will make an image appear when you hover over it.
<a href="#"><img src="fbthumb.jpg" /><img id="appear" src="facebook.jpg" /></a>
The first image is the image that will appear in the link box. The second image is given the id "appear" in order to help up style it differently from the first image. Without any styling, our page will be in quite a bit of disarray. It should look something like this:
Step 3: Let's add some basic styling to the page and our link box. This will separate the links and designate their space, and open the space for images and text to appear.
body {
background: #000000;
}
#box {
position: absolute;
top: 100px;
left: 50px;
width: 150px;
height: 200px;
font: 16px Arial;
background: #999999;
}
Our page should look something like this now:
Step 4: Now let's format the <span> to get that extra text out of our view. This will affect the text in both the first and second link.
display: none;
}
This styling hides the text so we can focus on formatting the rest of the page the way we want it.
Step 5: Now we need to organize our links within their box. The following code gets rid of that pesky underline, colors our <a> text white, and give some spacing between the three. The second bit of code puts a bit more padding between the picture.
#box a {
text-decoration: none;
color:#ffffff;
padding: 20px;
}
#box img {
padding-top: 20px;
}
text-decoration: none;
color:#ffffff;
padding: 20px;
}
#box img {
padding-top: 20px;
}
I also threw in a <br /> just above the first link as some simple band-aid formatting to give more even space between the first link and the top of the box. Here is what we have so far.
Step 6: That Facebook picture is getting on my nerves at this point so let's hide it from view now. To hide an image we need to do something a little different. We need to give it's height, width and border no value so that it doesn't pop up when the page loads. After we do that, we'll bring it back with the hover just like the text of the other 2 links.
#box a #appear {
height: 0;
width:0;
border-width: 0;
}
Now we can make things reappear where we want in the empty space. Notice that the code above is referencing our larger image that has an id of "appear" and not just any img.
Step 7: Lets bring out the text that we hid and style it. I am going to have the text for both the text link and the image link appear in the same place. To do that, we need to style the <span> in its hover state.
a:hover span {
display: block;
position: absolute;
top: 300px;
left: 0px;
width: 200px;
height: 200px;
color: #ffffff;
font: 10px Arial;
text-decoration: none;
}
Breakdown: Where we said display:none in the normal <span> styling, when a mouse hovers over the links, we want it to display again as a block of text. We want it to go to a specific place, so I placed the position as absolute. Now I need to give it coordinates on the page. The ones I chose were 300 pixels from the top of the page and 0 pixels from the left side of the page (this aligns the text to the left edge of the link box). I also need to determine size of the box within which the text will display and went width 200px wide by 200 px tall. The color of the text in my <span> will be white. The font will be smaller than the default size at 10px and will be displayed in Arial. I'm also getting rid of that pesky underline by removing text-decoration.
Step 8: Now to bring back the Facebook picture when we hover over the 3rd link. For me, the hardest part about doing this was figuring out how to path the selectors. Here's what works with this page:
#box a:hover #appear {
position: absolute;
top: 0px;
left: 200px;
width: 600px;
height: 400px;
}
position: absolute;
top: 0px;
left: 200px;
width: 600px;
height: 400px;
}
Fished product in the 3 different states:
Thursday, September 2, 2010
Site Critique: Hathor Dance Collective
http://www.hathordancecollective.com/
http://www.agencynet.com/
Since Dave brought up Rebecca Clayton in class, I figured I would use her site for my critique. Well, there are actually a couple of reasons why, I guess. First I have to get on a soap box and almost pontificate the god-awful business sense and web professionalism of belly dancers. They SUCK. I know nobody cares about this except other belly dancers who actually work in a technical field and have to navigate their comic sans brochures of poorly Photoshopped direction-switching gifs and general confusion, but they are a particular breed. Belly dancing is very popular and is very web-dependent to spread information about events and classes and registration for either. Rebecca's is a beautiful site, very professional, and is the Queen Mary in a sea of bad belly dance sites. Plus, I've seen her work progress nicely from the beginning of her graphic design days and I like to look at her stuff and think "...One day..."
Enough rant. I feel this site is very successful because of it's killer aesthetic, easy navigation, consistent use of space and color and pattern, and just enough information. When you first pull up the site, you're greeted with a beautiful graphic of the girls that run the school. Excellent photography captured really nice images of them actually performing dance moves rather that just showing them doing hokey still poses. The balance of warm and cool colors in the photography combined with the cool-colored graphics that compose the rest of the page makes this centerpiece graphic seem really warm and inviting. When you scroll down, the information supplied underneath is minimal-but just enough for the 90% of the people who will look at it for whatever reason. The with the use of transparent PNGs for the text dividers, the content scrolls over what looks like literally a stylish and modern Victorian inspired wall (fixed and masked with lots of black to give it depth) and complements her use of negative space with the content, making the content look even lighter (bulk wise) and more readable, like all of the content is on a thing glass window in the middle of the room.
If you have a smaller monitor and don't see the content underneath the centerpiece, there is a simple top bar navigation that points you directly where you want to go. There are no sub-menus and only the important and relevant information is top navigation. She didn't put a button for every bit of information that is provided in the site, which is nice. If you cared to look further into different aspects of the school, then you would find extra sort of "bonus" content. This top navigation remains in place no matter which page you are on, which keeps the viewer mentally grounded as they explore the site. She uses a common but effective inverted appearance of the button when you hover, and the active page has a light cast shadow under the text with no hover action. The font is consistent and is wide and round and clean. It comes across both casual and friendly, but also very professional.
The whole feel of this website can be summed up in an analogy I think of when I look at it. Other sites, particularly of this genre, are like a college dorm room. Whether the tenant is neat or a slob, there's something that seems so temporary and non-cohesive about the space. Rebecca's site is like walking into a nice, established homeowner's house. The decor matches the personality of the owners--in this case, the dance school-- and there's been actual money invested in it, even the yard is kempt, and the whole environment is very established and solid.
For my project I was thinking about making a website about the circus, particularly the 1870-1950 era of traveling vagabonds and freak shows and crazy acrobats.
http://www.agencynet.com/
Since Dave brought up Rebecca Clayton in class, I figured I would use her site for my critique. Well, there are actually a couple of reasons why, I guess. First I have to get on a soap box and almost pontificate the god-awful business sense and web professionalism of belly dancers. They SUCK. I know nobody cares about this except other belly dancers who actually work in a technical field and have to navigate their comic sans brochures of poorly Photoshopped direction-switching gifs and general confusion, but they are a particular breed. Belly dancing is very popular and is very web-dependent to spread information about events and classes and registration for either. Rebecca's is a beautiful site, very professional, and is the Queen Mary in a sea of bad belly dance sites. Plus, I've seen her work progress nicely from the beginning of her graphic design days and I like to look at her stuff and think "...One day..."
Enough rant. I feel this site is very successful because of it's killer aesthetic, easy navigation, consistent use of space and color and pattern, and just enough information. When you first pull up the site, you're greeted with a beautiful graphic of the girls that run the school. Excellent photography captured really nice images of them actually performing dance moves rather that just showing them doing hokey still poses. The balance of warm and cool colors in the photography combined with the cool-colored graphics that compose the rest of the page makes this centerpiece graphic seem really warm and inviting. When you scroll down, the information supplied underneath is minimal-but just enough for the 90% of the people who will look at it for whatever reason. The with the use of transparent PNGs for the text dividers, the content scrolls over what looks like literally a stylish and modern Victorian inspired wall (fixed and masked with lots of black to give it depth) and complements her use of negative space with the content, making the content look even lighter (bulk wise) and more readable, like all of the content is on a thing glass window in the middle of the room.
If you have a smaller monitor and don't see the content underneath the centerpiece, there is a simple top bar navigation that points you directly where you want to go. There are no sub-menus and only the important and relevant information is top navigation. She didn't put a button for every bit of information that is provided in the site, which is nice. If you cared to look further into different aspects of the school, then you would find extra sort of "bonus" content. This top navigation remains in place no matter which page you are on, which keeps the viewer mentally grounded as they explore the site. She uses a common but effective inverted appearance of the button when you hover, and the active page has a light cast shadow under the text with no hover action. The font is consistent and is wide and round and clean. It comes across both casual and friendly, but also very professional.
The whole feel of this website can be summed up in an analogy I think of when I look at it. Other sites, particularly of this genre, are like a college dorm room. Whether the tenant is neat or a slob, there's something that seems so temporary and non-cohesive about the space. Rebecca's site is like walking into a nice, established homeowner's house. The decor matches the personality of the owners--in this case, the dance school-- and there's been actual money invested in it, even the yard is kempt, and the whole environment is very established and solid.
For my project I was thinking about making a website about the circus, particularly the 1870-1950 era of traveling vagabonds and freak shows and crazy acrobats.
Subscribe to:
Posts (Atom)