I'm wondering how all you web designers out there like to work when it comes to building a new website. I've had this discussion with a few graphic designers lately that design websites in photoshop and pass them over to a coder to put together.

To me, that's a ridiculous way of working and leads to websites with poor usability. You cannot test functionality in Photoshop, for example.

I prefer to code the layout of the website first, the functionality of it, and then build a site from there, adding the graphical elements as I go.

How about you guys?

Well, as a provider. We always ask our client preferred layout. Most of the time, ill ask them to provide an example website so it would be easier to our staff to figure it out.

I prefer to code the layout of the website first, the functionality of it, and then build a site from there, adding the graphical elements as I go.

If you have both the artistic skills and the coding skills that is entirely feasible, however they are rarely found in the same person

My thoughts on designing/development are here.

Originally Posted by chrishirst

If you have both the artistic skills and the coding skills that is entirely feasible, however they are rarely found in the same person

My thoughts on designing/development are here.

I guess I'm fortunate enough to have both. I studied as a software engineer at uni before moving into graphic design, which I've done for the past 15 years or so. Before that, I had studied Industrial Design at sixth form.

"Development" is a more technical skill and very rarely do technical skills and artistic flair go hand in hand.

Now this is where I would disagree, but maybe it's just me. Design to me is both technical and artistic, and coding to me is both as well. I see artistic flair in nicely written, intelligent and efficient code. Learning HTML is no different to learning how to use InDesign or Illustrator. For design, you can be as creative as you want to be, but you still need technical knowledge to produce good designs.

Imagine a "designer" walking into a studio looking for a job (and I have actually interviewed someone along these lines at a magazine I used to work at).

"great portfolio, we don't see much sketch work these days"
"thanks"
"Ok we use the Adobe Suite here, you can use that?"
"no, I just design on paper"
"ok please stop wasting our time"

John Delorian didn't consider materials technology when he came up with his car!

If he didn't he wasn't a very good designer. Designers SHOULD take into consideration materials, manufacturing processes etc. Good designers are constantly researching new materials and new manufacturing processes. Apple and Jonathan Ive are great examples of this: Jonathan's groundbreaking designs always rely not only on never before achieved manufacturing processes, but also discovering new materials. Bad design comes from the separation of these two facets, I think.

Any designer would know how to at the very least prototype the items they're designing. Most should be able to make working prototypes. The better ones should be able to manufacture their design in it's entirety. Obviously this gets implausible when it's an entire car, or a large building.

Sorry for cherry picking your answers from the other posts, there's a lot to go through there!

Any designer would know how to at the very least prototype the items they're designing. Most should be able to make working prototypes.

Why?

Science fiction writers have "designed";
Rockets, Computers, Mobile phones, Tasers, Laser weapons, and so on LONG LONG before the technology and capabilities to produce prototypes even existed!

Leonardo Da Vinci had the conceptual ideas for concentrated solar energy, a tank, a helicopter. None of those could be built at the time (the 15th/16th centuries).

Conceptual Designs, Imaginative ideas and dreams have been the driving force for developing technologies, materials and methods of construction through the ages, why should it be that we say about websites "Yes very nice, but can you build one"?

Why should design be stifled to what can be done right now or by the person with the idea?

Originally Posted by chrishirst

Why?

Because it leads to better solutions.

Originally Posted by chrishirst

Science fiction writers have "designed";
Rockets, Computers, Mobile phones, Tasers, Laser weapons, and so on LONG LONG before the technology and capabilities to produce prototypes even existed!

You're confusing "design" with imagination there I think. I'm sure some fellow dreamed of a nitrogen powered motorbike long before the technology was there, maybe even drew a few doodles. But they didn't design it. A concept idea isn't necessarily what one could call a "design." They might have designed the outer case, but not the mechanics, not the fine detail. And the outer case shouldn't even be designed until you know what needs to go in it. Working the other way is just working backwards.

Originally Posted by chrishirst

Leonardo Da Vinci had the conceptual ideas for concentrated solar energy, a tank, a helicopter. None of those could be built at the time (the 15th/16th centuries).

Conceptual Designs, Imaginative ideas and dreams have been the driving force for developing technologies, materials and methods of construction through the ages, why should it be that we say about websites "Yes very nice, but can you build one"?

A concept design is quite different from a finished design. Concepts are great, but to quote Steve Jobs on this, real artists SHIP. And that's the difference. Concepts seldom push anything. What pushes technology is the people who actually make things work.

I used to work for an architecture company and saw so many concepts from various architects around the world, mainly eco stuff. None of the built, none of the technology realised. A bit of a waste of time, I'd say.

Originally Posted by chrishirst

Why should design be stifled to what can be done right now or by the person with the idea?

It's not "designed" until before it's realised, otherwise it's just a concept design, and that's fine, but that doesn't make the person with the idea a designer. It's just some bloke with an idea.

Originally Posted by edgray

I'm wondering how all you web designers out there like to work when it comes to building a new website. I've had this discussion with a few graphic designers lately that design websites in photoshop and pass them over to a coder to put together.

To me, that's a ridiculous way of working and leads to websites with poor usability. You cannot test functionality in Photoshop, for example.

I prefer to code the layout of the website first, the functionality of it, and then build a site from there, adding the graphical elements as I go.

How about you guys?

Honestly I am not sure what sort of functionality would require "testing". If you are skilled you should be able to draw a photoshop comp with functionality in mind, its never been an issue for me. I usually spend no more than 5 minutes laying out the basic elements on paper such as nav bar here, text here, etc., just the main elements. Then I draw in photoshop based on that structure, mainly so that i can incorporate all of the content the client requests.

What you are proposing is similar to if you used a template or CMS system as many major companies already do; most of these systems are based say on a 2 or 3 column design, with top navigation bar, etc. So it is exactly what you are proposing; but rather than start adding graphics to each area as you say, what I will do is then draw a photoshop comp based on this basic structure. I do not do this for functionality, I do this because I am stuck or constrained to the specifications of that template. - In an ideal world I would draw the site in photoshop as step one, keeping in mind that I need 2 or 3 columns, etc.

In addition, I actually measure all of my graphics in photoshop using the ruler tool to get the measurements to build the site out in CSS. If I have an ad graphic or such in a column, how do I know what size to make it until I draw it and play with the sizing in photoshop until it looks its best. So it serves a purpose of giving the measurements for the project.

Originally Posted by edgray

Now this is where I would disagree, but maybe it's just me. Design to me is both technical and artistic, and coding to me is both as well. I see artistic flair in nicely written, intelligent and efficient code. Learning HTML is no different to learning how to use InDesign or Illustrator. For design, you can be as creative as you want to be, but you still need technical knowledge to produce good designs.

You are completely wrong here. The really really good graphic designers out there are "Artists" at heart, they are interested in drawing "Art". They like to draw a photoshop layout, graphic, logo, brochure, etc. - THEY ARE SIMPLY NOT INTERESTED IN LEARNING NERD CODING. THEY ARE ARTISTS. So you are left with a situation where you as a web designer have to build out this work of art that the artist drew.

I guess my point is that a GREAT graphic designer can CHOOSE to be an artist and not learn the coding. That is a luxury a really great graphic artist has. If they are desperate or need work perhaps things would change.

It has always been my belief that a graphic designer or artist will always be far superior at drawing a website comp than someone who is more of a web designer. If that graphic designer chose to draw and code they would be a great asset to any firm, but they have the luxury to not code; that is a luxury great graphic artists have, and they will still get hired.

What pushes technology is the people who actually make things work.

Yep. The developers who will take a design concept and make it reality.


Been there many times in my engineering and electronics days.

Mock-ups are created by graphic designers / web designers for clients to approve. From this mock-up, a website is created by coders and developers.

Some have skills of being both a designer and developer but these skills are not specialized enough. A focus on a specific skill is important.

Originally Posted by mintdesignnz

Mock-ups are created by graphic designers / web designers for clients to approve. From this mock-up, a website is created by coders and developers.

Some have skills of being both a designer and developer but these skills are not specialized enough. A focus on a specific skill is important.

This is a great point, I definitely have to draw a site first to get a clients approval, there is no way around that.

Regarding the skills; I believe a graphic designer can be taught web design coding, but a web designer cannot be taught to be an artist, you have to be born with it. Its similar to Rick Rule's commodity investment firm; they hire geologists and teach them the financial side, because they can't teach brokers to be geologists!

Déjà vu

Edgray - did you come across that thread?

If I had a dollar for the amount of time wasted making 'web' designs from designers/artists more suitable as an actual website, I'd be a rich man. Designing websites is a specialty - not something any halfwit with aesthetic sensibilities can hammer out with a pen and napkin!

I design in Photoshop but all of my clients are small business people. I rarely build a site with more than a dozen pages. If I want to demonstrate a menu, I will do a quick mockup for the client to view. For PHP, I implement available scripts. I send clients demos of those scripts. The functionality thing isn't an issue for me and probably isn't for a lot of smaller sized websites. My clients get a good idea from the Photoshop design how their site will actually work and can ask for changes before I've done any coding work. This saves me time, which saves them money.

I design in Photoshop but all of my clients are small business people. I rarely build a site with more than a dozen pages. If I want to demonstrate a menu, I will do a quick mockup for the client to view.

Originally Posted by Boar

Honestly I am not sure what sort of functionality would require "testing". If you are skilled you should be able to draw a photoshop comp with functionality in mind, its never been an issue for me. I usually spend no more than 5 minutes laying out the basic elements on paper such as nav bar here, text here, etc., just the main elements. Then I draw in photoshop based on that structure, mainly so that i can incorporate all of the content the client requests.

Generally the functionality I'm talking about is information placement on the page. Whenever I've been handed photoshop documents to convert into HTML, consideration is seldom taken for this. Because photoshop is entirely based on absolute positioning, designs can often go awry once content is added, especially when unnecessary complexity is involved. I'm working on one at the moment, where the client and "designer" insist a web form fit on a single screen. This has lead much of the form to be made with absolute positioning, and a nightmare to code and update. Not to mention of course that photoshop renders fonts quite differently from web browsers, meaning this absolute positioning becomes a real bind.

I'm also currently updating a site that was designed in this manner, and I'm coming up against all manner of problems with boxes not having been designed to expand etc.

Originally Posted by Boar

What you are proposing is similar to if you used a template or CMS system as many major companies already do; most of these systems are based say on a 2 or 3 column design, with top navigation bar, etc. So it is exactly what you are proposing; but rather than start adding graphics to each area as you say, what I will do is then draw a photoshop comp based on this basic structure. I do not do this for functionality, I do this because I am stuck or constrained to the specifications of that template. - In an ideal world I would draw the site in photoshop as step one, keeping in mind that I need 2 or 3 columns, etc.

Starting with a code outline and building a design within it is no different to designing a printed page based on a design grid. Any designer worth his salt builds a simple design grid before they commence work.

Designing a (printed) magazine template, for example, would involve first laying out a grid: at the very least, your margins, then your columns, header and footer, and the baseline grid too. Next you'd build the elements on top with those guidelines in mind. And that's for an end-product that has almost zero usability and no compatibility issues.

By designing your layout in HTML, you get the functionality of the site done from the start, and you know exactly which elements need to be fluid, which ones fixed etc etc.

Originally Posted by Boar

In addition, I actually measure all of my graphics in photoshop using the ruler tool to get the measurements to build the site out in CSS. If I have an ad graphic or such in a column, how do I know what size to make it until I draw it and play with the sizing in photoshop until it looks its best. So it serves a purpose of giving the measurements for the project.

Of course you can measure them, that's great. Then you drop in content and Photoshop renders the fonts differently and you can start to hit problems.

If you know HTML and CSS, which you do, that isn't so much of a problem, you can plan ahead for this kind of thing and being aware of it means you'll take all of this into consideration beforehand. A designer than doesn't know HTML or CSS can't do that.

Originally Posted by Boar

You are completely wrong here. The really really good graphic designers out there are "Artists" at heart, they are interested in drawing "Art". They like to draw a photoshop layout, graphic, logo, brochure, etc. - THEY ARE SIMPLY NOT INTERESTED IN LEARNING NERD CODING. THEY ARE ARTISTS. So you are left with a situation where you as a web designer have to build out this work of art that the artist drew.

I completely disagree. Any designer knows that design IS NOT art. Designers are NOT artists. They are creative communicators and problem solvers. It's a skill that requires as much creative flair as it does technical knowledge. You can be as arty as you want, but without knowing the technicalities of communicating through design, you're not going to be producing design of high standards.

Real art, as explained to me by an art curator I know, is something that has to be explained. That's fundamentally the complete opposite of design: design is all about communication, nothing should need to be explained if a design is a good one.

As for learning nerd coding, as I explained before, it's just another tool in a designers kit, no different from learning how to use InDesign or Illustrator.

Originally Posted by Boar

I guess my point is that a GREAT graphic designer can CHOOSE to be an artist and not learn the coding. That is a luxury a really great graphic artist has. If they are desperate or need work perhaps things would change.

a graphic artist is NOT a graphic designer. That's a different skill entirely.

I think for designer not to learn to code HTML is not only self-defeating, but pure laziness too. It's not rocket science, and at a web design company I know they train all of their designers to code their own sites.

Originally Posted by Boar

It has always been my belief that a graphic designer or artist will always be far superior at drawing a website comp than someone who is more of a web designer. If that graphic designer chose to draw and code they would be a great asset to any firm, but they have the luxury to not code; that is a luxury great graphic artists have, and they will still get hired.

I do agree that someone from a design background will obviously make prettier designs than someone from a coding background.

I do think that designers not learning to code HTML and CSS is shooting themselves in the foot, robbing them of the ability to produce awesome websites. The larger percentage of designers I know can code their own sites. The ones that can't have to pay someone else to do it.

Again, a graphic artist is a different job entirely.

Originally Posted by mintdesignnz

Mock-ups are created by graphic designers / web designers for clients to approve. From this mock-up, a website is created by coders and developers.

Some have skills of being both a designer and developer but these skills are not specialized enough. A focus on a specific skill is important.

if it's a content driven site, I firmly believe the first mock-up should be an HTML wireframe mock. From there, the client can see the functionality of the site, and from there the next stage would be to add the graphics. I'm certainly not the only one to work in this way, the company I mentioned above also works in this method.

Originally Posted by metho

Déjà vu

Edgray - did you come across that thread?

If I had a dollar for the amount of time wasted making 'web' designs from designers/artists more suitable as an actual website, I'd be a rich man. Designing websites is a specialty - not something any halfwit with aesthetic sensibilities can hammer out with a pen and napkin!

I hadn't noticed it before starting this thread.

This is my point exactly: turning a photoshop design into a working website can be a real nuisance. If they don't understand the mechanics of HTML and CSS, there's little way they can design with all of the factors of web browsing taken into consideration.

As I mentioned above, I'm working on right now and it's going to end up a very poor website because of it.

Originally Posted by fma001

I design in Photoshop but all of my clients are small business people. I rarely build a site with more than a dozen pages. If I want to demonstrate a menu, I will do a quick mockup for the client to view. For PHP, I implement available scripts. I send clients demos of those scripts. The functionality thing isn't an issue for me and probably isn't for a lot of smaller sized websites. My clients get a good idea from the Photoshop design how their site will actually work and can ask for changes before I've done any coding work. This saves me time, which saves them money.

I'm all about saving time, but for me, getting the layout coding out of the way first, showing the client the most effective way of displaying their content, makes designing the graphic elements so much easier and faster.

Graphic Designers/Artists are all wannabee painters; they would be selling their paintings at the local farmers market if they could make a living at it; but computers is just sort of their backup gig to actually make money. Have you every looked at a graphic designers website? Many have sections for paintings for sale!

You are also wrong about their being a difference between a Graphic Designer/Artist - the skills go hand in hand and are interchangeable; all of the ones I work with could hold either title at a company.

Regarding photoshop fonts, I am not sure what you are talking about; if I can't replicate the font in CSS, then I save it as a graphic. I simply slice up my photoshop comps and take the bare minimum plus the measurements, color codes, etc; I don't save as html from photoshop or anything if thats what you are referring to.

Again, if you build a wireframe for a client and then add graphics; at that point you are already at the point of having drawn a comp beforehand correct?

Originally Posted by Boar

Graphic Designers/Artists are all wannabee painters; they would be selling their paintings at the local farmers market if they could make a living at it; but computers is just sort of their backup gig to actually make money. Have you every looked at a graphic designers website? Many have sections for paintings for sale!

I've seen a few, especially on sites like Deviant Art, but I think you're talking about a minority of designers - most I know consider themselves graphic designers, and only designers.

Originally Posted by Boar

You are also wrong about their being a difference between a Graphic Designer/Artist - the skills go hand in hand and are interchangeable; all of the ones I work with could hold either title at a company.

Not all graphic designers have illustration skills, that's how you would normally distinguish them. Most that I know who consider themselves Graphic Artists are the ones who can illustrate in a highly artistic manner. I think you can be a designer without being an artist, as some designers prefer to develop other skills instead, such as photography skills. My illustration skills are good, but not so I'd call myself a graphic artist. I have spent more of my career focusing in on other areas.

Originally Posted by Boar

Again, if you build a wireframe for a client and then add graphics; at that point you are already at the point of having drawn a comp beforehand correct?

well no, because you've done most pretty much all of the code. So rather than just having 1 comp, you've got a comp that functions.

As web designers, it is our job to instruct our clients how best to communicate their information in a way that is usable, then make things pretty. So by doing the wireframe, finding the best solutions for the usabilty of the site, we can build the design around that. Otherwise the functionality of the site can become a subjective thing.

I personally feel usability is something that is so overlooked these days. I've seen so many visually impressive sites over the years that are a real pain to use or to access the content. Get the usability out of the way, and you can build a design that won't inhibit access to the sites content.

Four steps:

1. Obtain all possible content types
- you can't "design" anything unless you know what you're designing for
2. Build a wireframe site to present the content
- using live or dummy content, and including common functionality, navigation etc
3. Build the site
- core HTML/CSS/JS + programming
4. Develop the look and feel and integrate into the site
- based around the wireframes

Originally Posted by Boar

You are also wrong about their being a difference between a Graphic Designer/Artist - the skills go hand in hand and are interchangeable

It's painfully obvious you have absolutely no idea of what you're talking about. Anyone with aesthetic sensibilities can pick up a brush and paint a decent picture after learning the medium for a month or two. Does this make their painting skills interchangeable with visual design? Does this make them an Artist?

There are several types of artist. Most common are the dabbling artists, amateurs with half decent skills that like to do landscapes, portraits and other garden variety works that say little more than 'hey, I can paint - doesn't look half bad hey!' It's a hobby for them, hobby artists.

There are the decorative artists whose work is supposed to be pretty, suited to enchancing the decor of the space it occupies, and appealing to the masses. These artists are pandering to popular taste for the sake of boosting sales, like a commercial artist of sorts. Designers that 'paint' would most often product work falling into this decorative category.

There is the fine artist, fine artists produce work that is the opposite of decorative. Fine artists produce work that is an exploration of a concept, medium, social issue or self exploration (to name a few subject matters). Fine art is is supposed to challenge the viewer. Fine art is usually the works that completely alienate the masses, "You call THAT art?". The participants of most commentary around fine art are historians, journalists, other fine artists, and art/history/design academics.

Artists by vocation are generally hopeless at design. This is an observation I made during my 3yrs doing a masters in multimedia. There were two streams of students in the course, graduates of graphic design and graduates of fine art - either were prerequisites. The artists needed basic design tutoring before they produced something on the level of a 2nd yr graphic design student. The designers were good decorative artists, but lacked the sophisticated vocabulary of self expression that the fine artists had.

Originally Posted by chrishirst

If you have both the artistic skills and the coding skills that is entirely feasible, however they are rarely found in the same person

Lol,and in my own experience,CMS is very popular and easy to use.That is a preferable choice.