4.14.2011

fine line between good web design & usability

As the technology advances, we get more and more freedom in how we design our websites. While this aspect allows creativity beyond imagination, it also creates dangerous pitfalls that should be avoided. First, you have to accept and understand that you are designing a web-page not a print (poster etc.), which is the most dangerous pitfall for beginner web designers especially for those with a graphic design background. (GripLimited; welcome to poster design 101, great typography but a ton of problems). Then, you have to think like a simple internet user, where will they look, what will they see, can they reach the desired information easily. Know that, not everyone will be as proficient as you are with internet browsing, nor will be able to see your website like you see it.

During the design process, there are mainly 5 issues that you have to be careful with. These are visual placement, visibility\accessibility, navigation, loading times\problems, categorizing\archiving (if used).

Below, I will try to give you some examples of what "NOT" to do. The selected sites are particularly well designed however due to one of the facts above, each suffers major problems in usability.

Visual Placement - or in this case Visual Mess:

This is what I would like to call hammering the visitor. I don't even understand what the page is about, nor where I should click.

Nicely done, but what am I looking at? There is so much going on, stuff moving on its own. It is impossible to understand what is a link and what isn't. A navigation disaster as well. Plus on smaller screens, it re-sizes itself, I can't even imagine browsing this site on a netbook.

Visibility\Accessiblity - or in this case Invisibility:

Incredibly fun and innovative design, yet an overkill due to the ridiculously big design. It gets tiresome to drag yourself around, not knowing what is where.

Innovative design and yet again too large for its own good, it is hard to understand what and where is content. Plus the site scrolls from bottom to top and the scroll is at the right bottom. Also too much content at one page, it takes quite long to load.

Navigation - how will I browse?:

Where to begin? This site is a lesson by itself. Disturbingly long load time, no proper menu (just a bunch of images that bring out names that don't mean anything). Slow and jagged transitions on images. Again more load times for new pages. And marvelously, you have to go to a new page to actually shut off the sound.

There was on thing that wasn't on Toyota's mind while designing this beautiful website, navigation. It is really unsatisfying going over those numbers on the bottom to actually see where they might be linked to.

Loading Times - lets face it, no one will care how beautiful your page is if it takes more than a minute or 2 to load. This is especially a problem with those who tend to use flash. In HTML, the only thing you have to be careful about is the size of the images you use. If you are crating a page with massive and high quality images, try to use pre-loading and loading screen javascripts to prevent partially and slowly appearing images. Even in this case, there is the same problem with flash, if you overdo it, it will take disturbingly long:

Along with no proper navigation, it also takes quite a while to load. Add to this, the fact that there is no way whatsoever of skipping the introduction animation and you get a beautiful and yet useless website.

Categorizing & Archiving - you have to create an intuitive interface so that the visitor can find what he/she is looking for easily... or maybe you don't as in the following cases:

This is the pillar of confusing categorization. Just click one of those stripes and see what happens, how could anyone find what they are looking for over there.

Another very confusing categorization, just move your mouse pointer to the right side of the page and you will see.

Finally...
I hope this gives you a good perspective on what to consider when designing for web. Good and innovative design is very important but overdoing it results in losing visitors which I guess no one would want.

.................................................................................................................................

4.13.2011

the trio: padding - border - margin

The most common and confused elements of the css.

Border: As the name suggest it is the border around your element. If the border has 0 width, the border edge is the same as the padding edge and invisible.

Padding: Defines the space between border and element content. If the padding has 0 width, the padding edge is the same as the content edge. This means that your content will stick to the edge of your defined content box.

Margin: Defines the space between border (if you don't have a border then padding, and if you don't have a padding then content)  and other surrounding elements. If the margin has 0 width, the margin edge is the same as the border edge(if you don't have a border then padding, and if you don't have a padding then content).

Each edge of margin, padding and border may be broken down into a top, right, bottom, and left edge. (for ex: padding-right: , margin-left: , border-bottom: etc.)

The image below may give you a better understanding.
















.................................................................................................................................

CSS position attribute

Position is the most vital component in web design and thus it deserves a separate post of its own. It tells your elements where and how they will be positioned in the flow of the page.

There are basically four different positioning properties that are available.

Static: The default property. You don't need to specify this unless you want to enforce a change on your element which receives a different position property from a parent element that is out of your control. Static does not do anything, it practically places the element into the flow of the page in the order it is written in the HTML.

Absolute: Like the name suggest, it is the most overwhelming positioning property. When you choose position:absolute, you have to specify the position by using attributes such as left: , right: , top: , bottom: (not all of them are necessary, use just the ones you will need). These will position your element according to the next parent element, if there are no other parent elements then it will take top-left corner as the reference point.

Beware while using absolute positioning, as powerful as it is, its improper use will restrict the flexibility of your page. As the absolute positioning removes your elements from the flow of the page, they will no longer be in interaction with the other elements of the page. They will rather become stand-alone elements that don't get effected by where other elements are.

Relative: The most commonly used positioning property. When used properly it is the most effective tool that opens up a bunch of powerful opportunities. However it is also the property that gets used improperly most of the time, leading to various problems.

It is confusing because when you say relative, people tend to think that it is relative to some other element, whereas it actually means relative to itself. Let me explain this with a simple example. Say you give an element position:relative; and no other attribute. In this case, you will have your element placed in the flow of your page just as it would have been in static. However when you start giving it attributes such as left: , top: , then you will have your element's position shifting relative to where it should have been.

With the relative property you also gain the chance to use z-index attribute, which is a very powerful attribute. It allows you to place elements on top of each other, the element with the higher z-index will always show up on top. There is a catch though, if you have a static element in that area, it will always be at the bottom even if you specify a z-index. this is something you have to plan beforehand.

Fixed: The rarest property among all four. It certainly has its uses, but has to be thoroughly tested because it has proven to be one of the most problematic on different screen resolutions.
This property positions the element relative to the browser window. When you scroll a page the browser window doesn't change thus your element will stay where it is no matter what, it will practically scroll with your page.

The most popular uses of this property are having a non-scrolling background image, having your header always stick up to the top of the window and having your footer always stick to the bottom of the window. Sometimes it is also used to keep sidebar navigation in view at all times as well, though this is highly unrecommended. Also do never use this for content area elements unless you have an overwhelmingly creative idea.

Bonus Tip: Relative+Absolute: If you have a parent element that has relative position, you can create a child element to it and then absolute position it inside that relatively positioned element.

If you want to delve into the topic more and get a good grasp of the uses, I recommend you to read this 10 Step Guide which explains the uses very clearly.

.................................................................................................................................

HTML/CSS starter kit

I have prepared a simple webpage including a header, footer, navigation area and 3 columns. It is written in W3 standards and shows all the simple actions such as ordered lists, unordered lists, image placement, use of header and paragraph texts, linking, styling using css and also inline styling. Of course there are hundreds of layouts to be explored and it is up to your imagination. This is only an example to get you started and familiarized with the structure. You can download it from here. Alternatively here.

The .rar file also includes a commonly used styles.txt for a reference point. But it is impossible for me to explain how each one of them is used or what their variables are. I highly recommend that you take a look at this. It will give you a great insight on how you can use them efficiently, if you are planning on coding your own website. 

.................................................................................................................................

4.12.2011

using a blogspot template for a fast design job


I was asked to put together a fast and furious promotional design package for this upcoming event at our university. And what better way to do it than right here? Ultra-fast, ultra-clean and ultra-easy design solution!

What this approach has given me is an instant visual identity, complete with color scheme, typographic scheme, visual side elements (the thin strokes), and of course grid, layout and structure. Such a visual identity normally takes quite some time to put together, but it has turned out to be a cinch here. And once you have this in place, it is very easy to adapt it to other media as well, which is what I may need to do eventually.

I took the Ethereal template, which I have been wanting to play around with anyway, because of those really nice thin lines which you can have running at both sides of your content once you make the main background transparent and keep the border as a color. Added a dark gradient background, changed fonts and colors a bit  - and not even all that much, to be honest. Only problem with this template is that you cannot modify the size of the blog description, unless you go into the code. However, that can very easily be fixed by importing the header text as a png file from photoshop. And here we are:

The organizers may also want a poster at some point. No problem! This is a perfectly aligned, well structured, ready to go layout in which all the visual hierarchies are correctly placed. (Not bragging or anything, nothing that I spent a lot of time figuring out, just works that way - the indigenous web format sees to all of that most efficiently ;-). So, as I already said before, this will adapt itself to other media quite easily. And, since almost everything here is text based there will be no major resizing issues either. All I will need to do therefore, is to print this page as a pdf, at an A2 size (or even larger), open it up in Illustrator, where all of the text will still be editable by the way. Delete whatever isn't working (which will be all the bitmap based stuff), clear the background and the header (again, both are bitmap and won't resize without some very serious loss of quality), and then copy paste the whole shebang into photoshop, which I vastly prefer to Illustrator as a design medium. Add the images, the background, the header and - you have a poster!

Or even change the format (portrait to landscape, different aspect ratios, etc), move the elements around, and you have a flier, an invitation, a brochure - whatever it is that you need really...

.................................................................................................................................

4.11.2011

custom header for blogspot

As you will see up top we now have a custom header. Not just a plain header text image, but also a second line with a menu and image rollovers. 

Very easy (and also very tough) to make: The tough part was getting things aligned properly and it basically just involves a lot of trial and error. Lots of going back and forth between photoshop, dreamweaver, blogspot and picasa to where I uploaded the blog title image which I kept tweaking to get right and then re-uploading. Still not completely there - but it will have to do, I guess.

I used a basic table*** inside dreamweaver to assemble this, from where I copy pasted the entire code (also including what was in the <head>) into a custom HTML/Javascript gadget. The gadget will automatically delete unneeded info as it saves, except for one line at the top - the document title, which you have to then go back and get rid of manually.

Something to remember when you do this is that you have to put all the images that you are using online first, and then embed the image URL's into the correct table cells in the HTML editor. The menu is actually a direct copy paste from the HTML gadget which we had on the sidebar, into a table cell in dreamweaver, and the images which that one uses are also online, of course.

Dreamweaver, with it's split window is wonderful of course, and I have been looking around to see if there is a comparable software which is free. However, no such luck so far. The best that I have been able to find is called Page Breeze and you can download it from here >>>. You do have a visual interface on this, which helps, however no split window, I'm afraid.

And finally, you can see the full code of the header, where I am also highlighting a few important parameters which you need to pay attention to in order for everything to properly work, here >>>.

*** No lovely CSS <div>s for me. My skills do not go that far - not even close... ouch!

.................................................................................................................................

the outbrain post recommendation gadget/widget

Fırat has just found us another goody:


This website installs a gadget on your blog which puts recommendations underneath your posts, directing your readers to other related posts through thumbnails. Very neat for sites which have a lot of images in their posts. I have already put it into the visual communication history blog where it will make sense to have it since I do have a lot of images on that one.

Although the gadget configures it's appearance based upon your CSS there are still a couple of design problems with it: The "You might like" thingy, for one. Not sure if this is needed in the first place - stating the obvious it seems. But even if we do need it, do we need it to be quite that large? And bold? And then those fat wide borders around the thumbnails too, I could certainly live without...

I added a dotted line at the bottom of the posts, with an added space (&nbsp;) underneath it, and that seems to help since it gives the gadget a bit more negative space to breathe in. And yes, unfortunately once one starts one has to do this to all of the past posts as well, since the thumbnails appear on the entire blog. No sweat, did that too. Just a fast copy paste job really, took all of 10 minutes or so.

However all nit picky stuff aside, this is a very cool thing indeed. So, once again, thank you Fırat!

.................................................................................................................................

4.10.2011

playing around with free vectors and photoshop layer modes

The original vector file is here >>>
And here's what happened to it:



Read all about it (and also see other versions) here >>>
Download the photoshop file from here >>>

.................................................................................................................................