Sunday, November 23, 2008

Regrouping

I am starting over again. I am determined to take something away from this class besides the memory of failure. I haven't failed, for I have learned so much and internalized so much that I didn't have a clue about before. But, I will feel like a failure if I just throw together a site with no organization. At the very least, I want to have mastered external style sheets and the use of HTML. As for graphics and drawing, I have decided that the skills I need for even begin to get a handle on that are way beyond where I am right now. If I am going to get anything meaningful out of a drawing program, that will require another course. I literally spent days trying to find a gimp tutorial that I could make sense of, and I've tried to get a handle on Photoshop Elements, but I really need some separate instruction.

So, to recap, I am going to master something well when I leave this class. It will not be everything, but it will be a base, something solid, that I can take away. I want to make sense out of something in all of this.

Wednesday, November 12, 2008

Lesson 12: SmartWebby

A free design guide.

Web Design Tips:

Wait. . . Before I go here, I want to go back and take a few more notes on last week's sites:

One Page Love: Luigi Marco Simonetti: Gray, simple, yet cool.

Ideas: Gray with library red writing.
Subtle brush stuff like on Altgold and Zahngold.
CSS Imagine: Samtech: leaves under paper in corners.
DamonBauer: colors.

I'm now switching tactics. First I had planned to do a site devoted to Hastings Library Youth. Then I decided that was too much stress, and I would make a site about making a site. Then I could be thinking about what I was learning as I was learning it. BUT, I now am back to the Hastings Youth. It is better suited to a web page, while the other topic is more suited to a blog. The library site is better suited to something that will be constantly changing.

Latest and Last Plan:

One page devoted to Teen Lounge: Take pictures on the 15th!

One page devoted to Past Events: Picture Hastings, Halloween, and Talent Show.

One page devoted to Upcoming Events: December Poetry Reading: Juice up the True Say and Found Art.

One page devoted to Story Time

One page devoted to In the Works: Teen Book Club

Now, Smartwebby:

I looked at the feather tutorial that Pamie recommended. This would be some handy knowledge if I decided to use images like that. I don't have Dreamweaver, but there is probably something comparable in Photoshop Elements.

A place that I may want to revisit when I sit down with my site this weekend:

"Cool Text Effects Using CSS Styles in Dreamweaver." It's under CSS Styles Tutorial. I don't have Dreamweaver, but maybe I can translate to the tools I have. Specifically, I want to get rid of the underline and use text spacing.

{A short interruption: Pamie alerted us to a website called Post Modern Shrines by Michael De Meng. Don't forget to go back there when you have time!}

Sunday, November 9, 2008

Still Lesson 11: Inspirational Websites

Cool Websites dk: I was intrigued by the green background and parchment-type paper in a thumbnail of a website called Topia World. Upon enlarging it, I wasn't so enchanted, but I did notice something I haven't yet encountered on a website. It's a 3-D menu in the form of floating cards in a circle. You can click on an arrow on either side to spin to the next card. Topia World is a fantasy game website. Actually, the more I look at it, the more I am appreciating it. There is very subtle movement, too, when you move the mouse without actually clicking on the arrows. The cards float left, right, up, or down, depending on where you point. This further creates the illusion that the cards are floating.

I just clicked on Rudebox, and I'm seeing a pattern here. Now I'm in the center of a room, and when I click on the arrows, the room spins. The menu is on display on different sides of the room. Again, moving the mouse moves your perspective up, down, etc. When you click on a place to go, like video, you zoom in, and fade into a different scene. Wow. In the new window, the menu remains on the left, and when you move to different parts of the menu, the menu, and the layered textures that make it up, move, too. There is so much going on visually that it is hard to describe in words. I admire the artistry involved in this.

There were many "I'm so old" moments for me on this site. The menu is written in graffiti-style writing - and I can't read it! Some words I can make out after sitting there a while or moving the mouse over them and watching the words being written (That's another feature I've never seen).

Also, I'm not technologically/visually sophisticated enough to realize that the countdown numbers on the first screen were just reflecting the download time. I sat there saying, "Gosh Darn it - What is this newfangled thing?" Then I didn't have the sense to click the mouse when it was finished to start the tour.

What's more, I didn't notice the subtly incorporated "sound on/sound off" button. When I finally figured out what to do with the mouse, "WHY YOU SO NASTY?" blared out loud enough to blow me off my chair.

Wow. It doesn't take very long before a person can become visually illiterate.


CSS Heaven:

Hooping.net: I can really appreciate the difficulty of trying to stuff as much information as possible into as little space as possible. This site does everything possible to remedy overload. For example, pages are lined up vertically at an angle, so that you can see about 5 clearly and then can scroll forward if you want. Meanwhile, beneath that area but still above the fold are a set of three pictures which are switching out by the use of fades. Meanwhile, a very slow scroll menu is in between. A menu, with large type (relatively) is on the right and there's a place above to input personal info. This is a very delicate balancing act, getting all of these elements in one space. It almost doesn't work, but it does. It is extremely easy for me to feel overloaded by stimuli, but this works well enough that I don't just click out. If I were truly interested in the info here, I would be happy to stay.

FWA:

OMG. I found most of the thumbnails somewhat disturbing. I just clicked on the RoutanBabyMaker 3000. An idea engineered by Volkswagen, it is creepy genius. I picked that thumbnail out of many because of the cute, yet disturbing quality of the baby. That's because it is a virtual baby made out of a convergence of two photos, one of mom, one of dad. The baby's eyes move when you move the mouse. The site is made, I think, to appeal to women whose biological clock may be ticking, or who may just want to be mothers. Brooke Sheilds is the model. The goal of making a baby, supposedly, is to show you how safe the Routan is. From here you can go from designing a baby to designing your own car.

Aside from the marketing genius, the design of the site is pretty effective. The menu is a designed to look like a radio, and when you move your mouse over it, a blue light comes on for each menu item. I hit on the VW radio button, literally, and a promotion for thing called "Sign and Drive" comes up. Move the mouse over the cars, and the headlights come on. I was totally sucked into this. Can you tell I'm a children's librarian?

I consider myself pretty saavy when it comes to advertising, but they got me this time!

Best Web Gallery: These thumbnails are much more inviting. A lot of them appeal to me, and I'm not sure what to click on first. I'll try Paperheads. (BTW, I like this gallery. When you float over a thumbnail, a slightly larger version of the site comes up. Cool.) Oh, I really like this! I have no idea what is being promoted here, but two guys in business suits and paperbags for heads (with faces drawn on) come up in front of different backgrounds. Each background stays for a while. The first looked like somewhere in Tokyo, the next was on a beach, the next was in a convenience store. . . Oh, it looks like they are back in Tokyo.
This so cool. This company does web design. The menu on the right provides four visuals of work they've done. You can click on any number of pages for each client. A simple "About Services, Contact, Clients" menu is on the top of the primary screen. There is too much to describe in words what I like about this site. It is hilarious and cool without trying too hard. I'm sure it, too, will be passe one day!

Friday, November 7, 2008

Lesson 11: More Inspirational Web Sites

CSS Creme! Best Web Flavours

Larissameek.com: I like that when you float the mouse over her tag at the top or the "about" ticket next to her picture, they change color. Also, her links change color, but in addition have a little grooved thing that pops up as you pass over it. Also, she has a lot of information on the page without making it look too busy or crowded. I think that has to do with the relative size of all the elements: the type, the pictures, etc. - everything balances nicely. I also like the background. It's subtle - a dark sort of wallpaper over which a smooth similarly colored slate is placed. That is not solid, but graded, yet everything is so subtle that works together. I wonder how she made those cartoony lollipops at the top?

I notice quite a few of these sites have quite a bit of black and subtle grays. On the other hand, there are sites with a lot of white and clean, simple fonts. Doodies Doodles is one that I like: her artwork is colorful, yet has a pastel look to it. It looks very good on a white background.

Wednesday, November 5, 2008

Lesson 11: Advanced Topics

I'm trying to stay afloat here. Not being able to make sense of GIMP tutorials on layers, I've hit a brick wall. I've spent hours and hours starting over with it, and it's not clicking. What I really need to do is sit down with someone and do a hands-on lesson. I would have not been happy about traveling to Tampa for more classes, but this is very hard to do with a book and on-line tutorials. I gave up on GIMP and went to my husbands Photoshop Elements 2. I got some books out of the library and am looking them over, trying to figure out the basics. If I had come into this class with even a basic understanding of the image program, I wouldn't be in such a funk. It stresses me to go on to advanced topics when I'm back in remedial basics, but I have to go on.

This week we look at five to ten websites on places to get inspiration.

I will start out with "One Page Love":

I like Sako Karalekian's very simple one pager. I sort of had something in mind like that for my page. She uses images of office stuff like paper, tape, push pins, and is very minimal. That's what I like; not a page that blows you out of the room with too much stimuli.

I also like Marianna Gibara's. Again, very simple. I don't know though - Isn't that organic swirly stuff getting old? Maybe not yet. I just seem to see it everywhere, from websites to t-shirts, which makes be think people will soon tire of it. I do like it, though.

Web and iPhone Application Development: Here is a very simple site with some movement. Though I like the cleanness and simplicity of it, I still don't like images moving on a site. Maybe I'm just an old fuddy-duddy.

I love the chapstick conspiracy by Zeke Shore. This is only one item in his portfolio. As for his site, I like that, too. You can scroll through each item, while his menu remains static on the left-hand side.