Grow your CSS skills. Land your dream job.

Creating Designs without Photoshop

  • # February 6, 2013 at 9:44 am

    Hello dear community.

    As a web developer I often find myself to translate PSD Designs to CSS/HTML.
    For creating some on my own, I do not have the abilities to create something in Photoshop format.
    I do not know any of that fancy stuff, instead I build my layouts and designs in CSS/HTML and end with a layout that I am not really able to finish. I have a plan of what to do, I do a few sketches, but I do not really think they could measure up to those fancy PSD works.

    Recently I read an article on Stefano’s Linotype -> http://www.betaversion.org/~stefano/linotype/news/169/
    And I really ask myself if it is possible to create a decent design without any photoshop file full of layers etc.
    Of course I have some kind of direction where I wan’t to aim for.

    How do you create your designs from scratch? Does it require to be a photoshop genius to do a decent design?
    Thank you for any answers and related articles.

    # February 6, 2013 at 10:32 am

    I prefer Fireworks but that’s not really the point here.

    You can design right in the browser, I do it for personal stuff. For client stuff though, I think it’s best to send them a mockup first as the small things “put that over there, change that color” etc are much quicker to do in an image editing program than having to edit HTML and CSS.

    # February 6, 2013 at 10:36 am

    Photoshop will not help if you aren’t creative in that “fancy stuff”.

    I assume by “Fancy stuff” you are talking about color palettes, gradients & such.

    PS just enables a creative type to put their ideas together in a structured form.

    There is no shame in not being creative in that way. It’s the difference between being a developer and being a designer.

    # February 6, 2013 at 12:35 pm

    This is exactly the reason I hired a graphic designer for my shop. My skill set is code, I’m not artistic in the slightest.

    If you can’t do, hire or outsource!

    # February 6, 2013 at 12:38 pm

    I must admit that Photoshop is like a second home to me when working on websites, I always spend a lot of time designing my ideas in there but you don’t need to be a genius in the design department to benefit from using a program like photoshop to map out a site before coding it.

    Obviously it’s not a requirement but you can create a wireframe design in there with minimal knowledge of the program to the correct proportions for your site, work out margins, and padding beforehand and just have something to go by when you start coding it.

    Regardless of my opinion it’s up to you how you want to proceed with a project, if you’re more comfortable building from scratch then do it your way and don’t worry about it too much.

    # February 6, 2013 at 1:15 pm

    Personally, if I’m going to put together any type of design it’ll happen in Photoshop. If something is super basic or I’m just trying a couple of things out I’ll do it in browser.

    # February 6, 2013 at 2:56 pm

    I’m a graphic designer and I think that designing for the web in Photoshop is a complete waste of time.

    Here are a few reasons:

    - Making changes is SLOW… I mean painfully slow. CSS allows us to change a few lines of code to change the entire underlying font structure, while changes like these can take hours or days depending on the complexity of your Photoshop comp. Moving things around on the board might be a bit easier but it doesn’t make up for the huge time suck that is making revisions in Photoshop.

    - It encourages pixel pushing at a stage that doesn’t warrant it. If you haven’t even started building your final deliverable why should you be nudging things around to get everything pixel perfect? Just more wasted time.

    - There is no interactivity. You can simulate interactivity by having comps of each page but what we are creating is ultimately interactive so if you show clients a non interactive comp it’s not really a good comp.

    - It was never intended to be used for web design, Fireworks has a huge range of tools that are **intended** for screen design (Like hyperlinks so you can make interactive comps). Photoshop is simply a static photo editor that designers just started using for web design because that’s what they had been using.

    After you’ve nailed down information architectures and layouts you should be jumping into the browser and actually making the thing not spending countless hours bumping objects around in Photoshop.

    # February 6, 2013 at 4:22 pm

    Interesting article and discussion about this can be read here…

    **Article**
    http://blog.mengto.com/sketch-vs-photoshop/

    **Discussion**
    https://news.layervault.com/stories/1022-sketch-vs-photoshop

    # February 6, 2013 at 8:44 pm

    You want to watch this by Chris Coyier. (You know, the awesome guy who runs this site :P)

    http://www.youtube.com/watch?v=vsTrAfJFLXI

    You’ll see that he only plans basic framework stuff with Photoshop and tends not to spend too much time designing. Just framing the design, or marking up basic blocks that will be valuable to your sites structure.

    Although I do tend to draw out full blown designs for concept (Two page pitch ideas at the most), nothing can beat a bit of pen and paper, prototyping concept work and drawing out spry diagrams that will give create the main plot of ideas; keeping the juices flowing is basically the idea.

    Realistically, to create a beautiful website, Photoshop isn’t required in the slightest. Your imagination is your only limit. Though, you can get some pretty good PSD freebies of web designs out there, go ahead and download a few and look at all the layers individually, inspecting the layer styles & options, plus how the object is created. Though this is pretty time consuming, you can just Google some results about creating individual elements for web design. Things like “Make a pretty button in Photoshop” – It all adds up. But remember, overly complex design pitches require extensive coding. You’ll find Javascript will be needed for that menu, this dropdown and so on, including covering over the design if you plan to create a fluid layout.

    Photoshop is like my second home, but I use it more for creating business branding essentials, including the use of Fireworks/Illustrator for vector designs prior to using Photoshop.

    Like I said though, “Your only limit is your imagination” – Go wild. :)

    # February 7, 2013 at 5:11 am

    This may be going off-topic, but I think working in the browser is the fastest, and also using something like
    /[Moqups](https://moqups.com/#!/ “Moqups”) just to iron out the functionality. Once yourself & client are happy then jump into the browser.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".