Designing a Website from Scratch

Hi Everyone,
I have built some static web pages in the past using CSS, HTML, and a Serif Illustration package, however, now that I've been given a new graphics pad I've decided to go for the industry standard Photoshop and Illustrator. I was wondering which of these two do web designers prefer to use to design their websites? Understandably Illustrator is used for illustrating, however, its capability to edit exact measurements of each element made it a desirable choice for me.
I'd like to know if I can use Photoshop to create an entire website layout and if there are any tutorials that can help with these because my skills in Illustrator are far better than in Photoshop?
Many thanks!
 
Hi Remy,
I was in the same boat as you at the start of the year. Had created a few basic sites, but then decided I wanted to learn HTML/CSS properly, ground up.
In regards to the software you use (and I'll probably get a bit of flack for this - but hey ho) I honestly don't think it matters. I'd try and strive for pixel perfection all of the time though. So if the margins of your site are going to be 10px online, make sure they are in your mockup too.

One handy thing to do this is View >> Snap To Grid. Then always set up a 10px grid and work to that. Something else that is handy is the 960gs. Do a quick search for that, download it. You can use his prebuilt grid templates, comes with both Photoshop and Illustrator (and 100 others) and it's a great starting point.
Have a look at the Tuts+ Network for some great tutorials. There's NetTuts, WebDesignTuts and more.

Google is your friend :) As are our forums! If you need any help, just keep posting :)
 
A combination of determination and Google will yield fantastic results. There is so much out there, you just have to find it. Tuts+ is an incredible network with a lot for you to learn, but there are also tons of other sites out there which can help you!
Personally, I prefer to use Photoshop for web work, but actually it doesn't matter too much. A lot of the Adobe products are very similar, but there are small differences which will often make one program better than the other. You won't really notice these things until you go to do a specific task, and wonder why it can't be done "just like in <insert Adobe product here>" then you realise their whole money making scheme...!
Here are some of my favourites from Tut+ It's the kind of stuff that you simply don't think about on your own unless you've had years and years of experience and are actively seeking out the answers to specific questions. It's nice to have something so complex all wrapped up in a simple article!
http://webdesign.tutsplus.com/articles/design-theory/the-gestalt-principle-design-theory-for-web-designers/
http://webdesign.tutsplus.com/articles/workflow/the-importance-of-getting-great-feedback-in-web-design/
What I like to do is to compile bookmark lists of the best articles I find, you will find in the future that you need to refer back to one of them and it's unlikely that you will find it again by guessing the search terms that you used.
But yes, you can definitely create the design of an entire website in Photoshop and whilst it may feel like you're having to learn a whole new program in terms of Photoshop vs Illustrator, the principles surrounding use of the two are virtually the same, save for a few small things here and there.
 
out of the two options most would say use photoshop.... however a fair few people say use fireworks (also part of creative suite) for web design instead as it's more suited to it than photoshop.
 
Levi said:
out of the two options most would say use photoshop.... however a fair few people say use fireworks (also part of creative suite) for web design instead as it's more suited to it than photoshop.
I forgot to mention in my original post that personally, I use Photoshop, but then, I use a combination of both Photoshop and Illustrator for most of my work.
 
Some really good advice in here, net tuts etc. try them out :)
Personally would recommend Photoshop for the majority (definitely not all) web work as the raster handling in PS is better than AI but at the end of the day neither are wrong or right, it's all preference!
Good luck!
 
I must say, graphic design software such as a Photoshop, illustrator etc are a massive no no for me. Why? Because they all use a fixed width canvas from the go! Our web is no longer fixed. Our browser view port can be any size depending on what device your viewing it on. I mean he'll we have web browsing going on, on games consoles (including handhelds), mobile phones, tablets, 80" tv screens, 50" tv screens, desktop computers, even down to your new fridge freezer. I feel we all need to step away from "Photo Editing" software or graphic design software. Its a thing of the past and we need to get used to it now.
If you looking to provide mockups or wireframes then OK. Grab a hold of some dot grid paper, or as Levi has said get into fireworks as its very simplistic to shape up a layout idea. Although I have heard they are killing it off after CS6.
GOOD LUCK GUYS! Lets keep creating an awesome web!
 
glenwheeler said:
I must say, graphic design software such as a Photoshop, illustrator etc are a massive no no for me. Why? Because they all use a fixed width canvas from the go! Our web is no longer fixed. Our browser view port can be any size depending on what device your viewing it on. I mean he'll we have web browsing going on, on games consoles (including handhelds), mobile phones, tablets, 80" tv screens, 50" tv screens, desktop computers, even down to your new fridge freezer. I feel we all need to step away from "Photo Editing" software or graphic design software. Its a thing of the past and we need to get used to it now.
Whatever happens when I'm designing, I keep all the responsive web stuff in mind. I use Photoshop to get my colour palette right, and my margins for desktop machines. Then, convert them all to %'s and em's and off we go ;)
 
Thanks guys, lots to think about here. Been looking through tuts+ which should help. Will let you know when I get my first new site up for some feedback!
 
Hi, I just designed my first website... as a graphic designer. I found that it is simplier if you design your wireframe first on paper, then go to photoshop, make sure everything is pixel perfect, and then when you start coding you will have the correct dimensions which will save you a lot of time. If you need to show it to someone else I would create the wireframe in Fireworks, since it gives you the option of interactivity and the other person can see how it would work if it was a life website. And yes, Tuts+ was a great help and still is.
 
glenwheeler said:
I must say, graphic design software such as a Photoshop, illustrator etc are a massive no no for me. Why? Because they all use a fixed width canvas from the go! Our web is no longer fixed. Our browser view port can be any size depending on what device your viewing it on. I mean he'll we have web browsing going on, on games consoles (including handhelds), mobile phones, tablets, 80" tv screens, 50" tv screens, desktop computers, even down to your new fridge freezer. I feel we all need to step away from "Photo Editing" software or graphic design software. Its a thing of the past and we need to get used to it now.
If you looking to provide mockups or wireframes then OK. Grab a hold of some dot grid paper, or as Levi has said get into fireworks as its very simplistic to shape up a layout idea. Although I have heard they are killing it off after CS6.
GOOD LUCK GUYS! Lets keep creating an awesome web!
Hey,
What do you mean by step away from Photoshop, graphic design software is essential and surely always will be. It sounds like you favour 'straight to code design' to account for responsive design but realistically it is no where near a replacement to a graphics suite in terms of speed and flexibility.
Sorry man I don't mean to argue but you have blown my tiny little mind with that statement. A graphic design suite is an integral part of the web design process and always will be in my eyes.
 
Maybe having a basic design made on photoshop/illustraor and then moving (the design concept) it to responsive web design would be an alternative?
If the main focus of the site is fitting the screen and looking right then it should still be based on a default/standard size...
 
GilmoreVisuals said:
Maybe having a basic design made on photoshop/illustraor and then moving (the design concept) it to responsive web design would be an alternative?
If the main focus of the site is fitting the screen and looking right then it should still be based on a default/standard size...
Oh yeah, for sure. The whole concept and signing off design stage is definitely better suited to Photoshop or similar :)
 
I think adobe is trying to direct people towards muse (or it's other online tools) when it comes out of beta over using photoshop.
I'll be honest, I've been using photoshop to mock up my idea for my site update (waits for squiddy....) but it was after pen and paper etc...
 
Levi said:
I think adobe is trying to direct people towards muse (or it's other online tools) when it comes out of beta over using photoshop.
I'll be honest, I've been using photoshop to mock up my idea for my site update (waits for squiddy....) but it was after pen and paper etc...
Pen and paper is the only place to start when it comes to design.
I haven't any experience of Muse but from what I've read about it, people say it generates a lot of unnecessary code and is a bit, for want of a better word; shitty.
 
Tony Hardy said:
Pen and paper is the only place to start when it comes to design.
I haven't any experience of Muse but from what I've read about it, people say it generates a lot of unnecessary code and is a bit, for want of a better word; shitty.
I never said I'd use muse lol
 
I know? :) I was just putting it out there that I heard it was crap haha.
 
1. Photoshop doen't make you a designer - it's software not an idea
2. Design requires an idea an an application of a Strategy to fulfill objectives - that is where current designer fail.
3. I've used Muse and it's ok
4. Never put Design in front of Communication - how many times have I said this on DF!
5. We are in the business of SELLING not Design.
6. Everything is out there - if you look hard enough
7. Always find the shortest route to fulfilling the objectives
 
Back
Top