Apr 21
While designing, do you think about the next step?
2004 at 01.41 am posted by Veerle Pieters
When you design an interface/lay-out for a website you start probably just like me by translating your ideas into graphics in Photoshop. But while you are doing this, I wonder if you also keep the next step in mind? Are you constantly thinking on how you’ll convert your design into HTML? And whether it is doable yes or no? Or if you’re not, then when should you think about it?
One thing is for sure, sooner or later you’ll have to convert it, so I believe it’s important. Although I must say that the possibilities on how to convert your design has grown a lot over the years and today you got more choices on how you’ll convert your design then 4 or 5 years ago.
Still, you better avoid having a nice design that is almost impossible to create a web-page from… or the question is, does this still exist? Is everything just possible? Is there a solution for everything? I guess depending on the design itself, finding a solution can be a challenge ;-) But I guess you have to be creative in finding the right one or the best one, which doesn’t always mean the easiest one. Nowadays I think in CSS terms, not in terms of tables like I used to, where I kind of try to figure out where to slice things up. I think in areas on how I’ll build my DIV containers.
Well, not sure about you, but I think about this constantly while I’m still in the design stage just because I don’t want to get stuck once I start converting. Of course I give myself the freedom in the very beginning, I guess that’s needed if you want to exploit your total creativity. If you start thinking “I can do this”, “I can’t use that” etc. from the very beginning, you might end up with a design that looks the same as the rest, you might become less original and originality is important, originality shapes a good design.
So my point is that the line between thinking creatively and thinking practically is very tin. You have to be original in your design but also practical, or at least as much flexible as possible. With practical I also mean thinking about the best solution for your navigation, making it easy, simple and clear for the user where to click, making sure they don’t get lost or get stuck etc. The use of images to get your message across etc…
All of that goes in my head while I think of the best interface, it is a whole mix of comparing pros and cons mixed with of colors and ideas. Oh boy my head is a mess sometimes… no wonder people sometimes say the creative minds are a bit complex and hard to follow ;-)
8served
1
I tend to start out thinking about how I’m going to have to convert this design so I’d better make sure I design it with that in mind.
But that usually doesn’t last long. After a short time, I forget about that completely and just get obsessed with coming up with the “right” design, with no thought for how easy or hard it would be to implement.
The funny thing is: when I do finally have that “Eureka!” moment and get the design I want, it often turns out to be quite straightforward and easy to implement.
2
I find that it helps to make it a more iterative process. It takes some of the pressure off in the initial design phase since you plan to rework things later anyhow. Once I have my general specs for the project I sketch out my designs on paper, in Photoshop, and sometimes in Flash.
Then I think about what will be the best way to translate that into a good web interface (use CSS, Flash, etc). Once I take a stab at creating the real page with XHTML, CSS, and whatever I go back and see where my pretty artwork messed up the interface or caused other problems and try to come up with a better way to do things or a way to fix ugly spots. And I tend to go around like that a few times smoothing out the visual and technical parts until it is right.
3
When I’m creating a design, I have a “feel” for what will and won’t work. I don’t sit there and consciously think how I’ll go about implementing something. However my CSS spider sense does start tingling when I see things that could be difficult to implement.
I guess this unconscious feeling is just a product of your experience and environment. By understanding the techniques involved, though prior experience, and from seeing what others have accomplished, it becomes relatively easy to get a feel for what will work and what won’t.
4
I have several CSS templates printed out. What I mean by this is it’s a normal piece of paper with bordered DIV tags on it. I pick a template, and just start drawing over it. That way what I draw I know it will work with one of the CSS templates. Sometimes this speeds up the design process because you already have a basic layout.
If the previous process doesn’t work then I just draw a layout, and then just run lines through to see how complicated it would be to create a CSS layout.
I try to make the design process as painless as possible, so if something can be done an easier way I usually go for it.
5
I guess I also have a “feel” for what will work and not work and I try to keep this in mind while I create my design. Although if there is an obstacle I’ll always try to find a solution, I’ll never choose the easy way out, I will try all sorts of ways to make it work. My design goes first and I don’t give up ;-) Unless I’ve tried REALLY everything and it doesn’t seem to work, then ... and only then I’ll adjust my design, as little as needed.
I’ll never create a website the other way around, starting from templates, but I guess it’s interesting to know that this is also an option.
6
I used to start in photoshop and wait a long time before trying to convert my design in HTML. Since I’ve started with CSS, I’m doing more and more design directly in code, I can even change drastically my original idea and go back to photoshop to alter my images because I’ve found a way to do something cool :-)
I find it’s getting more difficult to design in photoshop and not test right away.
7
hey i have another question, surprise surprise :-)
i was reading one of your articles ‘while designing, do ou think about the next step?’ when i came across something else, by the way nice topic again.
how in the old way of designing we start of using photoshop/corel for creating the webpage and then we chop everything up and put it into html. once the whole design is ready its always where and how am i gonna chop this and make it look similar in multiple browsers?
well i really never had a problem with putting designs into html once i created my file in photoshop. but today its like ive started to learn html, very lost, dont really know how to think of breaking or where to start breaking things up. can you write something on this. it would be great. still creating my first css/html site without tables.
thanks.
8
Hi Kronk, maybe this article of mine could help you with this question. I had a bit of the same feeling in the beginning, it’s like you have to find your way back. Also I feel like going back to how it was, jumping back into the code, when I first learned HTML before there were programs like DreamWeaver or GoLive. I use BBEdit more then ever these days. But finding my way through the code is much easier, since you don’t have nesting tables etc. so that’s a big plus. There is much less code and it’s much more flexible too.