Web Designers/Builders - how do you start?

loloray

Hi people. I'm just wondering how you people start when you first decide to make a website.

Do you grab a pencil and sketch a rough drawing on paper?
Do you draw exactly what you want with colours and everything on paper?
Do you design the website in Photoshop, as exactly as you can, and then go into CSS/html editors and build from there?
Or do you just open up a textpad and start coding and see what happens?

The last expert I spoke to told me he spends ages designing everything in Photoshop. Then when he's happy with the image, he builds from scratch. I'd be interested to hear what the more experienced people do.

Obviously this is really directed at people who design AND build. Thanks.

oeb

loloray wrote: »

Hi people. I'm just wondering how you people start when you first decide to make a website.

Do you grab a pencil and sketch a rough drawing on paper?
Do you draw exactly what you want with colours and everything on paper?
Do you design the website in Photoshop, as exactly as you can, and then go into CSS/html editors and build from there?
Or do you just open up a textpad and start coding and see what happens?

The last expert I spoke to told me he spends ages designing everything in Photoshop. Then when he's happy with the image, he builds from scratch. I'd be interested to hear what the more experienced people do.

Obviously this is really directed at people who design AND build. Thanks.

I am just a developer, I don't design. But this is how it works in the office.

The designer (and sometimes a developer (for large sites)) will meet with the client to discuss what they need. Often times the designer will leave with a basic wire frame jotted down to include some of the key elements that were discussed with the client.

The designer then puts together a mock-up of the website in photoshop or something similar (depending on their preference), this is then passed to the developer for a quick approval (Just to make sure that there is nothing there that would not work with the system the developer has planned, or nothing that would take an amount of time to implement that would fall outside the scope of the project). Once they are both happy it is passed off to the client. Once the client is happy with it, it's passed back to the developer who crops up the image and puts it together in their IDE of choice (I use netbeans).

We'll usually prototype in Illustrator or Photoshop. Illustrator's handy if you're doing vector logos and stuff that may be reused on other projects for the client.

We find that most clients are very visually oriented, and need to see the idea close to how it will look when completed, so we collect as much information as possible. If they are vague in their requirements we'll let them know that after x iterations of the design, we may charge more for subsequent iterations - it concentrates the mind.

Usually with enough consulation with the client, we just need to tweak the initial prototype, and then slice it for the web. It's rare we have to bin an entire prototype and start from scratch.

Pixelcraft

Deleted User wrote: »

We find that most clients are very visually oriented

I find that too, which is exactly why I don't take that approach, after a brief I start with sketches, and progress to wireframes (that look bare, and nothing like a final design to focus what the client thinks about - usability & IA rather than the colour of X or Y) then after that design mockups, then prototype, then development in a nutshell

clientwell

We'd normally take a look at what's best practice in the industry, cast about to see what competitors and industry leaders are doing. Then put together a basic sketch and/or wireframe to encompass the elements that the client wants involved.

My take is that best practice designs adhere to traditional direct marketing techniques - strong headline, good visuals, scannable content, strong call to action.

Then mock it up in Gimp or Photoshop, sign off with client, and get cracking with the development. You often get pulled back when you show the visual mock-up, so I agree with SBS and Pixelcraft that the client is very visually influenced.

I find that too, which is exactly why I don't take that approach, after a brief I start with sketches, and progress to wireframes (that look bare, and nothing like a final design to focus what the client thinks about - usability & IA rather than the colour of X or Y) then after that design mockups, then prototype, then development in a nutshell

It depends on the site, I guess. That would be overkill for a low-budget 4 page brochure website, where any UI considerations can be illustrated with a 20 second doodle on a jotter or showing another website as an illustration. It's not easy to explain a jQuery effect with progressive enhancement using a wireframe.

If we're doing a larger web application, we'll walk through every page or form of the proposed website with the client, using wireframes or flipcharts, primarily to clarify business logic, but also to make design/UI decisions. Even in that scenario, we can usually run up a design prototype in parallel to illustrate the universal elements (header/footer/nav) and general design/typography conventions.

p

loloray wrote: »

Do you grab a pencil and sketch a rough drawing on paper?
Do you draw exactly what you want with colours and everything on paper?
Do you design the website in Photoshop, as exactly as you can, and then go into CSS/html editors and build from there?
Or do you just open up a textpad and start coding and see what happens?

The last expert I spoke to told me he spends ages designing everything in Photoshop. Then when he's happy with the image, he builds from scratch. I'd be interested to hear what the more experienced people do.

The last way is definitely one of the best processes and works for many designers. The main reason is that designing & building are two different modes of thinking. If you're designing a site but you're in production mode you'll start thinking about technical limitations and not designing the right thing in the first place. It's important to be aware of technical issues, but only to a point, you shouldn't let technical decision dictate a design, your client's needs and their customer needs are what's important. Also, HTML & CSS aren't design tools and can limit the speed you can experiment, tweak and change. It's important to use the right tools at the right time, and the right tools for actual visual design are sketching, photoshop, illustrator (and similar)

I'd agree with many other people's approaches here. I'm a web designer and here's my process which I've honed over the years.

- Meet the client, discuss needs, issues and background of project
- Desk research, checking stats, competitors etc..
- Agreement of design brief with client (doesn't need to be big, but something you can both focus on. E.g. design a happy, lively site aimed at a teenage audience to sellf orange juice.
- Sketch out rough ideas and see what works.
- (If a larger project, or web application, black & white wireframes might be done, otherwise, this step might just merge with the next one)
- Start designing in photoshop & design work away until I have 1 or 2 key pages to show the main look & feel of the site and key functionality.
- Refine that until the client is happy
- Design rest of the site until sign off on all key pages.

At this point, depending on the team, the following will happen:
- Building of HTML templates
- Addition of any javascript/flash elements
- Building back-end functionality in PHP or similar.


This works for small sites. For large sites with more functionality then additional specs may need to be drawn up, and the back-end developers may create an initial prototype that needs to be integrated into the main design.

Hope that helps.


Someone else process. I'm not sure I'd agree 100% with their approach, but it works for them and is worth reading: http://www.digital-web.com/articles/redesigning_the_expressionengine_site/

p

Pixelcraft wrote: »

I find that too, which is exactly why I don't take that approach, after a brief I start with sketches, and progress to wireframes (that look bare, and nothing like a final design to focus what the client thinks about - usability & IA rather than the colour of X or Y) then after that design mockups, then prototype, then development in a nutshell

Agree. I think wireframes are a useful tool, but not perfect for all situatons. Many clients can find it difficult to make the mental leap from wireframes to seeing a full solution, so you need to be aware of that. But definitely for larger projects, and especially web apps it's important.

One other thing about wireframes, is that if you're working with a 2 man team, with on person doing wireframes and another the visual design, then you can end up with a situation where all of your sites have the same 'blocky' feel to them. It's important that if you're pursuing more creative visual solutions that wireframes are a guide to what's on the page but not for layout.

Sposs

First write out the website spec in plain english step by step as to what funcitonality you want and what your trying to achieve , this better helps to give you a mental picture of what you looking for. Throw up an outline using wireframes and then a more professional looking feel in photoshop , after that simply slice and dice into xhtml/CSS to move into production.

Tim M-U

Before designing a website, pick up a pencil or imagine it in your head. Once your ready to create a website, there is a website that shows you how to: http://www.2createawebsite.com/ .

Enjoy every miniute of creating a website!

loloray

Thanks everyone for your answers. They are very interesting and helpful for me.

LCblogger

A good idea is too search through other brilliant websites for inspiration. Or for example if you are doing a website about tree's brainstorm on tree's for a theme eg leafs, branches, colours etc

CamperMan

1: register the domain name
2: setup the hosting
3: install Joomla
4: install template
5: add text and images supplied by client
6: site done

I can build a site from scratch but nobody wants to pay the money these days so it has to be cheap simple sites.

Keewee6

CamperMan wrote: »

1: register the domain name
2: setup the hosting
3: install Joomla
4: install template
5: add text and images supplied by client
6: site done

I can build a site from scratch but nobody wants to pay the money these days so it has to be cheap simple sites.

hi, Just wondering re: joomla how u change the joomla header

CamperMan

Keewee6 wrote: »

hi, Just wondering re: joomla how u change the joomla header

easy

Axwell

CamperMan wrote: »

1: register the domain name
2: setup the hosting
3: install Joomla
4: install template
5: add text and images supplied by client
6: site done

I can build a site from scratch but nobody wants to pay the money these days so it has to be cheap simple sites.

What about SEO and Search Engine Friendly URL's? Just throwing a site up in Joomla with a template without any modifications isnt web design. Out of the box joomla is very slow at loading ( your own site takes about 8 seconds and brings up a loading page first), the urls are unfriendly and there is no SEO. Granted you are only charing €99 for this but just because your clients arent aware of the above items doesnt mean they should be ignored if its professioanl proper standards based web design you are offering.