Ba-zing!

The new U of L site

Ok, time to get my digs in. I like the overall layout of the U Leth site, but I have some issues with it

First, the good: It’s a very attractive layout. It has clean lines, and nice use of transparencies to make the various elements seem to flow into one another.

The biggest issue I have with the site is that it’s dominated by a large moving banner that doesn’t provide a lot of relevant information other than the daily events. The important stuff for students, namely the Blackboard and the Bridge, are hidden away under a flash menu. this wouldn’t be a problem except that it takes time for it to scroll the page down to open the link bar, which seems like more time than is necessary, particularly if there’s a slow connection involved. I ended up simply bookmarking these pages so that I don’t have to go through the main page.

Once you get past the big banner, the rest of the page is a little cramped. There’s a lot of information down there, and while it’s presented nicely, it still feels a little cluttered

It’s not bad, and since relearning the interface, I prefer it to the old one, but there are still some issues that could be resolved.

Stumbleupon

Stumbleupon

This is a handy little resource for web designers. It was conceived as a way of “channel surfing” the web, but thanks to its interface, it also makes for a helpful tool when designing.

Stumbleupon is an extension for Firefox. When it’s installed, it links to your Stumbleupon account, and allows you to set preferences for your “surfing” habits. If you set one of your choices as Web design, you are given access to hundreds of sites that other users have tagged as helpful for web design. Tutorials, good examples of CSS design, flash toys, all just a click away. (This is incidentally the way that I originally came across the liquid text tutorial)

Another critical review

TV Tropes (be careful, it will ruin your life!)

It’s a wiki, so a lot of the content is user controlled, but I can still critique the basic layout of the pages.

The first thing I notice about TV tropes is that the colours are all very washed out. It’s got tan outlined bubbles against a white background. The text is a lighter blue. They tend to blend into the background, when if you’re looking for information, the subheadings should be emphasized.

The problem with light buttons is even more noticeable when paired with the moving banner ads that coat the front page. The search bar, powered by Google as the banner proclaims, simply hides under the distracting banner. The only reason I find it with any regularity is that I know where it is. The first time through the page, it took me almost a full minute to find it, and even when I did I wasn’t entirely sure it was the right search.

The categories beneath yet another banner on the right side of the page are small, but try to convey a lot of information, which leads to them looking messy as all get out. Having a collapsible system would allow readers to find what they want without the messiness involved in the dozens of subheadings with more sub-subheadings.

TV Tropes is a fun site, but it isn’t organized very nicely.

Assignment 4

Experiences with QR code

Outlining my experiences in developing the QR code project.

Usability!

Google

I’m not going to lie- I am a huge fan of Google. They basically have their finger on the pulse of what the people want, and they have a very firm grasp on how to present it to the people.

First and foremost, there’s the logical layout. The first thing you see on coming into the search engine is the search dialog. You put in what you want, push the button, and boom, you’ve got 7 billion results to choose from. There’s no bullshit bogging down the page, it’s straightforward and to the point. If you want to visit one of the other applications, such as Google Maps, there’s a link that’s discreet but obvious. The links don’t distract from the main point of the search engine, but they’re easy to find if you want them.

Nowadays, I don’t think anybody doesn’t know what Google does, but if someone didn’t, then the search bar would provide an obvious indicator. This isn’t a news site, or some site trying to sell something. The only graphic on the main page is the logo which provides more than enough colour to keep the page looking fun and not sterile. Doubly so when they have a special logo for some anniversary. (At the time of this posting, they are celebrating Sesame Street’s 40th anniversary. The “l” in “Google” has been replaced with Big Bird’s legs and the font is yellow)

In the event that you want more information about Google, there’s a set of links at the bottom, which still fits on the browser with my netbook’s resolution of 1024×600. Everything you need is there, without needing to scroll. (At least, until you get to the results page)

For my money, you’d be hard pressed to find a website with better usability than something made by Google. Now if I can get them to pay me to say stuff like that, I’d be set.

Is it a resource? Or just a handy CSS tool?

Stylish, for Firefox

If you’ve ever had a website that you visit regularly with a design you can’t stand, Stylish lets you reskin sites by applying your own CSS layouts to it. You can fix bad design and impress your friends, all at once!

Website review

Céline Au fil du temps

It’s a French website, but very graphical, so there’s not much difficulty in navigating even if you don’t speak the language. The splash page has a very light sort of feeling to it, and coupled with the cartoony look to the figures makes for a very inviting look. One thing that I find somewhat distracting is the small image scroll at the bottom, but it does pause to allow you to concentrate elsewhere, if briefly.

Jumping to one of the categories is slightly disorienting, with the link bar going from the middle to the top, but once there everything is laid out logically. It’s a good layout, with colouring used to add a little more differentiation between each menu item.

“Liquid” Text and torn paper

Liquid Text

This is one of the resources I used to create the “snot” look for my “Congested” page, though I added a few variations with some clever colouring and level adjustments in Photoshop afterwards to be able to make it look less like water and more “snotty”.

Torn Paper

This is the second resource I used for the same site. In the end, I used an image from Flickr as the paper instead of making my own, but the torn edge came completely from this site.

Assignment 3- CSS

Assignment 3

So, here’s the CSS assignment. I went with the keywords of Natural, Critical, and Congested, and sort of took them as a sort of exercise in literal interpretation.

First off was Natural—I sort of started playing around with this and ended up with a theory of wanting to make something that was recognizably “natural”, in this case a tree, but to do it in such a way that there was a sort of “unnaturalness” to it. So, the proportions are off―you have a big, thick trunk supporting a small canopy, a very simplistic texture to the tree bark, and everything in a very bright, almost cartoon-like style.

Then there was Critical. I wanted to make it look like it was some sort of paper marked up by a very critical sort of teacher, so it was Wacom tablet and Photoshop away. I went through and wrote all sorts of horrible things, and fit them in where I could. I tried a few backgrounds, but found them too distracting, so in the end I simply decided to go with white on black.

Finally, Congestion. I had an idea in my head for this pretty much since the assignment was handed out. Sinus congestion is a horrible thing to have to deal with- especially when it suddenly becomes, well, decongested. The real trick here was making something that looked like nasal mucus without being excessively gross. (It’s still gross, I’m not fooling myself!) A few Photoshop tutorials later, with a little bit of my own ingenuity, and there’s the end result.

There’s actually a fourth page I made (and uploaded) for the “Bold” keyword, but you won’t find it linked, because it’s more of a joke than anything. Feel free to hunt for it, if you’d like, though.

Holy CSS resource, Batman!

CSS elite

Not so much a learning tool, but certainly a place where you can see some well designed CSS stuff, plus there’s always the option of popping in to see the source code.

-Reed out