Question for Website Designers

I'm pretty new to website designing/coding, thus the rather nooby questions:

When you submit a design for contests that just require an uncoded site design, what program do you use? Do you just design the whole thing at once in photoshop?

And if you were then told to code it, what do you do?
Would your steps be different from if you were told to code it from the beginning?

Thanks in advance

 

I don't enter contests because they are silly, but I do use Photoshop when designing a site. I'm sure you could use something else though. At this point, if I decided to code it, I could and it wouldn't have mattered if I knew ahead of time whether it was going to be functional or not because I will only design things that can be coded in the first place.

 

I'm also new in designing a site but not a total newbie. I've designed a couple of websites for a client. (See my designs on my sig link).

As far as designing, I directly use Dreamweaver. But when it comes to graphics, I use GIMP.

 

How the hell do you use Dreamweaver to design? You need to evolve past that.

 

Well... In my POV, just like others whom I read in the net, Dreamweaver is used for designing a site whereas Photoshop and the like is used in creating graphics.

 

What do you mean by "things that can be coded in the first place"? What's an example of something that can't be coded?

 

I always code from the bottm up.

 

code happens when you write it by hand.

I think we need to clear some things up here. Design is the marriage between code and graphics. What you've got going on here is code and layout.

Code happens when you write it by hand. It's not something that happens because you learned dreamweavers menus or something. I personally know how to hand-code HTML and CSS, even though I'm a trained graphic designer. I can sit down and write code, but I haven't the slightest idea where to 'auto code' these features in Dreamweaver. I simply use code-view and write it all.

I think it's much harder to learn how to make a site in dreamweaver than it actually is to learn how it's made - and once you do that you can write a site in any software, and you're not required to have dreamweaver to do it.

As for design, Photoshop is common, but Adobe didn't create it for the purpose of web design. Photoshop, much as the name implies is intended for photographic manipulation of bitmaps. Yeah, web uses bitmaps too - that's about the only crossover. You don't use Dodge or Burn tools while making websites - just look at the toolbox - it's obviously not intended for makign sites.

Now, how could Adobe, a company who has a program for just about everything, totally forget web layout in their lineup of tools? Oh wait, they didn't, they called it Adobe Fireworks, and it's made specifically for web design. With more vector tools than photshop, and all the same bitmapped goodness, Fireworks is the simplest, easiest to use and most powerful web layout graphics program there is. Personally, I've made web graphics in Photoshop, GIMP, Inkscape and Fireworks, but I will say that Fireworks is the best tool for the job, even if the others will struggle and make the graphics.

Seriously, learn HTML and CSS and *not* Dreamweaver, and get yourself Fireworks and learn how to use it.

 

Best advice above , use online code schools and learn the basics first, and you will have great results

Contests are a great way to get some looks at your work, but remember that they do consume time,

 

Good advice innovati - especially with the topic of coding. Learning HTML and CSS didn't take me long, learning the features of Dreamweaver wouldn't have been much quicker.

Just one question... how does vector tools come into web design? Never experienced a cross over myself, unless you're making icons, but that falls under graphic design more than web.

 

To the original question, I myself:

Design PSD web layouts in Photoshop, although I do import design elements from other software such as Illustrator, Inkscape, etc.
If coding is required, I then slice the PSD up and code it by hand.

Probably better to work on one side of the job (I recommend the design), perfect it, and then try/learn coding. I learnt code by downloading existing web templates, and studying the code. I also used resources such as http://www.w3schools.com/

Enjoy!

 

Thanks for all the suggestions everyone --

And yes I'm planning to learn css/html by hand instead of jumping in w/Dreamweaver

@innovati - I'm gonna check out Fireworks. But I'm a beginner, so should I even be trying to use that program at this stage?

@saxDesigns - I think this is what's confusing me. In my mind, there are 2 days of implementing a site: 1) coding it w/CSS, 2) Photoshop slice & dice. But I think I'm totally off here. Should they be even put in the same category? Even if you code a site, you need to use photoshop to slice your design right? So it's not like you do one or the other...right?

But someone told me "The Photoshop slice and dice method is likely the worst approach."

This makes it sound like there's another way to code your website designs w/o having to slice it up in Photoshop..

 

fireworks is all you need for graphics, you won't even have a use for photoshop anymore (at least not for web design anyway)

 

There will always be two base stages of creating a web design - Design and Code.

Ah, I think he/she was talking about the export feature. Essentially you can slice up a PSD web design, and then export it as a HTML page. This used to be done in Photoshops partner, Imageready. However, that software has been discontinued, and the export feature is now available in Fireworks I think.

Here is a quote from Wiki:

With or without the extra CSS, the code was always messy and not recommend. Naturally, when I first got into web design, I used it! I recommend that you don't.

Right, basically, I design my layout in Photoshop. Slice it (this means laying down markers for each section, i.e. header, footer, sidebar, etc). Then I DON'T export it as HTML, I simply export it a individual images to use in the CSS, image likes these:





To use on a web design like this - example

You hand code the images into the HTML and CSS design basically. That's how I use slicing, to export images, not HTML.

 

^Thanks! That answers my question exactly.

oh and I took a look at your sig, your designs are great! I would totally hire you for projects if I wasn't looking into creating the graphics myself How long have you been doing this?

 

As for me, I use Photoshop and I try to put different elements of my design into "layers" - use layers - that's my advice for you, as not every coder can code an unlayered PSD file...

BEST of luck!