Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Designing a Website from Scratch

Discussion in 'Website Design Forum:' started by inspiringprint, Jan 16, 2013.

  1. 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!
     
  2. Tony Hardy

    Tony Hardy Guest

    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 :)
     
    si_p and inspiringprint like this.
  3. Squiddy

    Squiddy Guest

    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.
     
  4. Levi

    Levi Moderator Staff Member

    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.
     
  5. Tony Hardy

    Tony Hardy Guest

    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.
     
  6. giantsheepnet

    giantsheepnet New Member

    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!
     
  7. glenwheeler

    glenwheeler Senior Member

    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!
     
  8. Tony Hardy

    Tony Hardy Guest

    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 ;)
     
  9. 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!
     
  10. slopes

    slopes New Member

    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.
     
  11. giantsheepnet

    giantsheepnet New Member

    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.
     
  12. GilmoreVisuals

    GilmoreVisuals Active Member

    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...
     
  13. giantsheepnet

    giantsheepnet New Member

    Oh yeah, for sure. The whole concept and signing off design stage is definitely better suited to Photoshop or similar :)
     
  14. Levi

    Levi Moderator Staff Member

    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...
     
  15. Tony Hardy

    Tony Hardy Guest

    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.
     
  16. giantsheepnet

    giantsheepnet New Member

    WYSIWYG editors just aren't there yet and it's going to be a long time before they are
     
  17. Levi

    Levi Moderator Staff Member

    I never said I'd use muse lol
     
  18. Tony Hardy

    Tony Hardy Guest

    I know? :) I was just putting it out there that I heard it was crap haha.
     
  19. berry

    berry Active Member

    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
     
    solopressuk likes this.

Share This Page