Reliable Web Designer

[liams7]

Why does the layout of the page have to be sorted before programming begins? Agree with all your other comments but surely the layout of the page needs to be flexible enough to cope with user testing. In any case why illustrator? Surely illustrator just provides the mock up, it's the CSS where the styling is applied.

I would suggest that if you find that your design needs completely reworking after a user tests it then there is fundamentally something wrong in the first place. Also the basics can be tested off a mockup. Remember that a fullsized website that is built bespoke will take about 3-4 months to code. To then need to redo this is daft.

It's only when you have completed the wireframe and checked the information flows that you can be sure the site structure is suitable. Until that point you won't really be able to get the layout a little closer.

Why in earth couldn't you see this working on a mockup?
[/QUOTE]
And if you are relying on illustrator or some other package for the layout, does this mean any change reguires a new template? Wouldn't it be easier to just tweak the CSS to make the changes. Moving a nav bar from left to right for example just means change in float:left to float:right.
[/QUOTE]

To move an element on illustrator requires a click and a drag. For any thing more complicated than a standard 'header and column' layout then coding the changes would need much, much more work.

Please note that I'm not saying you can't give the client a few ideas about possible layouts on day one, it's just that I can't see how you can finalise a theme until you have constructed the wireframe to to check the navigation system works and the information flows are logical (I luurve loriet ipsum).

I'm saying that you can connect two on screen mockups in your head which is easier. Also remember that on modern CMS's pages are dynamic any way and can be moved at any point. Do you consider the only important element on a site the menu?

 

[custardfish]

You reckon? Let's take a look at who created the most successful market leading websites/companies and see what their backgrounds are...

google - 2 computer scientists, Larry Page and Sergey Brin
ebay - computer scientist Pierre Omidyar

That's due to basic logistics of building a web site/app more than anything. ie 2 coders can create a fully working site -no matter how poorly designed- on their own - immediately grabbing a userbase. All designers can do is nice screen shots that sit on their own computer that do nothing and go nowhere.

That doesn't however mean design is pointless.

A lone builder can knock you up a house on his own but you wouldn't argue architects are pointless or not needed would you?

Also most of this argument depends on the type website in question.

For a complex web based app, early builds alongside wireframe designs etc are vital but for the vast majority of sites they're really not.

And unless your layout is VERY basic changing the css/html compared to wireframe layouts -whatever the software- is much more time consuming. I can literally change 90% of a wireframes layout structure, placement, font types, sizes etc etc in 5-10 mins.

And by greyscreens/wireframes I mean something like:

http://www.tryjuly.com/images/thefindbuzz_v2.0_wireframes_homeA.gif

http://vectortuts.s3.amazonaws.com/tuts/207_iPhone_App/final_full.png

Essentially though why work in a non-visual way on something that is inherently visual by nature? Its non logical.

 

[custardfish]

My central argument is that the layout of a webpage should not be so rigid that it can't be easily changed if the site fails to perform as required. Have the photshop mock-up but don't use it until the wireframe is constructed and the site has gone throuhg initial testing. You then take the mock-up and style the page using CSS. If all the divs are already in place then this really is a doddle.

As already mentioned that wasn't your initial arguement at all. And also ANY site that is well coded, in semantic html should to a certain extent be totally re-skinable via css etc.

Obviously the more complex the design the more work but that doesn't mean its not possible. And again just because a site is designed well doesn't mean it can't be coded well too! Your essential arguement seems to be design and build very simple, basic looking websites ('non-rigid') as making anything more complex is harder work to do/and change!

You yourself mentioned Zen Garden - do you think the sites on here are just imagined or complexly planned and designed in photoshop/fireworks etc prior to the CSS styling work needed? Each design to me looks 'rigid' - and I would guess if you where delivered them as a photoshop file you would say that too... but good underlying semantic html (as it should be) means its just a fair bit of work to style and re-style.

And its pretty obvious looking though the designs that the vast changes in visual appearance, structure and layout make such huge changes to each different sites userbility ANY prior 'testing' on the basic html/css layout is completely and utterly voided by the overlaying final designs in place.

So for instance look at:

http://www.csszengarden.com/?cssfile=/199/199.css&page=1
http://www.csszengarden.com/?cssfile=/202/202.css&page=1
http://www.csszengarden.com/?cssfile=/203/203.css&page=1

The end user experience on each of these is dictated entirely by the design, putting together an early html/css version with standard left/right columns and top menu would have been utterly utterly pointless from a 'testing'/userbility point of view.

 

[awebapart.com]

They are the MDs - Do you doubt that Google employ interface designers, graphic designers and many more?

When they started they probably did most of this themselves. The first google logo was designed by computer scientist co-founder Sergei Brinn using GIMP, and their first google doodle was designed by both co-founders.

Have a look at the original sites (google, ebay, amazon, etc) on the 'way back machine' at www.archive.org . Some of the sites are no oil paintings now, and you can tell they are not heavily influenced by what a graphic design agency would produce.

Of course companies like Google might employ these job types now. With their money they could probably employ one person to blow on their cup of coffee when it is too hot, and a different person to blow on their cup of tea when it is too hot.

But the guy Google use for a lot of their daily changing logos, Dennis Hwang, is in fact one of their webmasters who also programs, and he has said in past interviews:

"It's very important to me that I can work both technically and artistically. Google is a perfect place to do that. It allows me to have a programming job while letting me express myself artistically, with the added bonus of having my work be seen by tens of millions of people in a single day."

 

[custardfish]

But the guy Google use for a lot of their daily changing logos, Dennis Hwang, is in fact one of their webmasters who also programs, and he has said in past interviews:"

Their head designer quit a while back:

http://www.theregister.co.uk/2009/03/23/douglas_bowman_quits_google/

 

[liams7]

That's due to basic logistics of building a web site/app more than anything. ie 2 coders can create a fully working site -no matter how poorly designed- on their own - immediately grabbing a userbase. All designers can do is nice screen shots that sit on their own computer that do nothing and go nowhere.

That doesn't however mean design is pointless.

A lone builder can knock you up a house on his own but you wouldn't argue architects are pointless or not needed would you?

Also most of this argument depends on the type website in question.

For a complex web based app, early builds alongside wireframe designs etc are vital but for the vast majority of sites they're really not.

And unless your layout is VERY basic changing the css/html compared to wireframe layouts -whatever the software- is much more time consuming. I can literally change 90% of a wireframes layout structure, placement, font types, sizes etc etc in 5-10 mins.

And by greyscreens/wireframes I mean something like:

http://www.tryjuly.com/images/thefindbuzz_v2.0_wireframes_homeA.gif

http://vectortuts.s3.amazonaws.com/tuts/207_iPhone_App/final_full.png

Essentially though why work in a non-visual way on something that is inherently visual by nature? Its non logical.

This is really a good answer.

Perhaps a better analogy is if the people who built google where building a car. They designed a new engine then they needed a designer to design the car to put it in.

 

[awebapart.com]

Let's take a look at who created the most successful market leading websites/companies and see what their backgrounds are...

google - 2 computer scientists, Larry Page and Sergey Brin
ebay - computer scientist Pierre Omidyar
...

That's due to basic logistics of building a web site/app more than anything. ie 2 coders can create a fully working site -no matter how poorly designed- on their own - immediately grabbing a userbase.

Google was not poorly designed, it was well designed, well software architected where it mattered, in its functionality, its system architecture, its software architecture, the design of its algorithms and the relevant results and ads it returned, and its fit for purpose. That's how it overtook the other search engines. Google was well designed by 2 computer scientists, because as good computer scientists they weren't just coders they were solution designers.

That doesn't however mean design is pointless.

A lone builder can knock you up a house on his own but you wouldn't argue architects are pointless or not needed would you?

Design, as in overall solution and system design is important. Again, with the people behind google, they weren't just the equivalent of builders (coders), they were computer scientists who knew how to design and create innovative solutions, architect systems and software, as well as write code. They were the architects too.

 

[custardfish]

Perhaps a better analogy is if the people who built google where building a car. They designed a new engine then they needed a designer to design the car to put it in.

Through human history most inventions out the block are delivered by engineers, (builders not dreamers) - however after the early stages the user interaction, refinements to userbility etc are then very much designer lead.

We all interact on a visual level, with everything around us, every day, all the time.

To see progress look at how visually basic the 'engineer' delivered early OS where, which progressed to text based OS. Just like early text based web sites.

But after much and continued refinement we now interacted with OS on a visually plane - and they're much much easier to use as a result.

I don't see the web any different, 10 years ago - all text based. Now sites interact with users in a complex multi-visual way.

A lot of the latest css/html (and future) standards are and will be heavily driven by the visual needs of end users.

Essentially to down play the role of design is to massively underestimate the role it plays in the needs of the vast majority of end users.

 

[liams7]

Through human history most inventions out the block are delivered by engineers, (builders not dreamers) - however after the early stages the user interaction, refinements to userbility etc are then very much designer lead.

We all interact on a visual level, with everything around us, every day, all the time.

To see progress look at how visually basic the 'engineer' delivered early OS where, which progressed to text based OS. Just like early text based web sites.

But after much and continued refinement we now interacted with OS on a visually plane - and they're much much easier to use as a result.

I don't see the web any different, 10 years ago - all text based. Now sites interact with users in a complex multi-visual way.

A lot of the latest css/html (and future) standards are and will be heavily driven by the visual needs of end users.

Essentially to down play the role of design is to massively underestimate the role it plays in the needs of the vast majority of end users.

Fantastic to talk to someone who really knows their stuff!

 

[custardfish]

Google was not poorly designed, it was well designed, well software architected where it mattered, in its functionality, its system architecture, its software architecture, the design of its algorithms and the relevant results and ads it returned, and its fit for purpose..

I meant poorly designed from the visual, end user perspective...

Also you seem to be arguing for me here, my point is things need designing prior to -just- building!

But there's a big differnce to the type of 'design' you talk about above and visual end user 'gloss' design I thought we were talking about.

 

[custardfish]

Fantastic to talk to someone who really knows their stuff!

LOL - well we agree with each other - that's definitely my preferred definition of "knows their stuff" too!

Nice new site btw... although I couldn't be bothered to click on all the home page reveal dots - do I win anything if I do?

 

[liams7]

LOL - well we agree with each other - that's definitely my preferred definition of "knows their stuff" too!

Nice new site btw... although I couldn't be bothered to click on all the home page reveal dots - do I win anything if I do?

It's not actually possible to clear them. The more you get rid of the quicker they come back.

It might be a fun idea to make it possible to beat it and reward the player with something.

 

[fisicx]

We all interact on a visual level, with everything around us, every day, all the time.

I quite agree (although hearing is a far more responsive sense) but there is more than just visual stimulus.

In the high street a shop window display will often catch one's eye. You may stop and pause to consider the merits of entering the shop weighing up if the products meet your needs or not.

A website does exactly the same. You get about two seconds of 'blink then think' after which the visitor has already decided whether to stay or leave. The layout of the information combined with the quality of that information is the decidning factor but this can be thrown away if the navigation is poor or subsequent pages don't deliver on the promise.

So whilst an inital layout may serve to keep the client happy it's not until testing that you can be sure it is going to work.

I use a lot of science research in my work and use arXiv.org. The interface is very simple becauyse it suits the users. A doctor looking for medical information doesn't need lots of interactivity neither does someone looking for allergy information. would google or wikipedia be any better is there was lots of technology happening?

I'm sure that technologial advanges will make for richer browsing but I can recall many innovations that have been thrust upon us but have now faded away.

Remember the little chain of stars that followed your mouse pointer around.... Or <blink>

I actually think we are all singing from the same songsheet, it just the words we are using.

 

[custardfish]

I quite agree (although hearing is a far more responsive sense) but there is more than just visual stimulus.

In the high street a shop window display will often catch one's eye. You may stop and pause to consider the merits of entering the shop weighing up if the products meet your needs or not.

A website does exactly the same. You get about two seconds of 'blink then think' after which the visitor has already decided whether to stay or leave. The layout of the information combined with the quality of that information is the decidning factor but this can be thrown away if the navigation is poor or subsequent pages don't deliver on the promise.

So whilst an inital layout may serve to keep the client happy it's not until testing that you can be sure it is going to work.

Not sure how much of our hearing sense people use whilst navigating websites but anyway...

Your sort of right, although it's largely though as under 2sec... ie 200ms etc. Which is nothing to do with content and ALL about visual loook and layout.

BUT and this is the big one - whatever that 1st visual based impression is it makes a huge differences to the sites perceived userbility.. Essentially its the halo effect, people like to think they make good judgements. So if there initial <2sec impression is 'hey this website looks great' they'll forgive any problems with userbility.

Likewise if they think it looks poor not only only they likely to leave but they'll back up that initial judgement by thinking the sites hard to use etc.

Essentially they're much more likely to forgive -any- problems on a site that looked good over one they thought didn't.

Also you keep mentioning poor navigation, that's surely down to planning the content a good site map and decent naming conventions - rather than final UI.

I mean unless your doing some crazy Flash thing how wrong can you go with a basic menu these days?

Also with the shop thing, look around you, look in your kitchen cupboards, clothes in wardrobe etc - how much of what we buy is based on looks alone? How many of us buy the 127 different brands of Tea to test and buy our favourite over the one that "catches our eye"! Even if you just buy the brand, whats that based on? Shop brand, the same.

As Liam said previously Brand power is all about image and so if your creating a web presence for LOTS of business, clients that's what it boils down to - and some basic css, layout and navigation just doesn't cut it.

 

[fisicx]

So if there initial <2sec impression is 'hey this website looks great' they'll forgive any problems with userbility.

I've seen the opposite, people mught begin the navigation process to find a product or service but if the UX is poor they won't convert no matter how swish the thing looks. You will get the YES clients but unlikely to convert the MAYBE-YES and the MAYBE-NO have already left the building.

Also you keep mentioning poor navigation, that's surely down to planning the content a good site map and decent naming conventions - rather than final UI.

I mean unless your doing some crazy Flash thing how wrong can you go with a basic menu these days?

You can go very wrong. What may be a visual feast may in fact get overlooked by your users. But if you have the ability to change the position, size and colour of a menu system can test the UX. I've seem a font size increase of 2px double conversions, even removing a border had a positive impact. Which brings me back to my opening points. You need to be able to change colours, positions and seperations to test the site. This comes after the development process. Use the photoshop/illustrator mock-up to keep the client happy but use the user testing to find out which bits work and which bits don't.