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.
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.
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.
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.
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.
Interesting article and discussion about this can be read here…
You want to watch this by Chris Coyier. (You know, the awesome guy who runs this site :P)
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.
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. :)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".