Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 0 down vote favorite

If you have in your mind, on paper, or on screen an image of your Web site, how should you go about implementing it? Use Adobe Creative Suite? A text/HTML editor?

My understanding is that people used to "slice" images in the past, but that seems passe now. I am not a graphic designer but I design sites casually (for myself) and I want to know what the current best practices are. I intend to use HTML5, CSS3, server-side (python) and client-side frameworks (Javascript).

share|improve this question
I'm confused - your later commment "Given a sketch or wireframe, how do you efficiently create the HTML and CSS?" seems to be asking quite a different question. Think you need to rework the question to get meaningful answers. – e100 Dec 17 '12 at 10:45
@e100: Different from what? I'm confused. – Emre Dec 17 '12 at 19:34
Different from your original question above. You originally ask "How to efficiently code a Web site wireframe?" but then "If you have in your mind, on paper, or on screen an image of your Web site, how should you go about implementing it?"; "Given a sketch or wireframe, how do you efficiently create the HTML and CSS?" which seem to be about production code. – e100 Dec 17 '12 at 21:48
It seems similar to me. If you already have the wireframe or sketch, how do you code it--implement it? – Emre Dec 17 '12 at 22:37
"Implement" when starting from paper or an idea implies that you want to create it in digital format (Photoshop, Illustrator, InDesign). "Code" means, literally, writing code. So asking "how do you write code efficiently?" is not the same question as "what's the best way to get my idea from my head into a computer file so I can share it with others?" – Lauren Ipsum Dec 19 '12 at 0:13
show 2 more comments

closed as not a real question by plainclothes, Jack, John, Bakabaka, kontur Feb 4 at 11:27

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, see the FAQ.

2 Answers

up vote 2 down vote

Depends what you mean by "wireframe."

If you want a detailed sketch to show functionality without actually coding, I found Wireframe Sketcher to be a useful intermediate step between "mockup in Adobe product" and "finished CSS/HTML."

If you want a website which actually works, but doesn't have the images, content, or bells and whistles, then just code it like you normally would but use boxes and Lorem Ipsum filler text.

share|improve this answer
Let's say I have a detailed sketch. How should I proceed to the next step: a working site? – Emre Dec 14 '12 at 20:18
Sorry, are you asking "how do I create a working site?" or "is a working site the next step in the process?" – Lauren Ipsum Dec 14 '12 at 20:22
Neither, I would say. Given a sketch or wireframe, how do you efficiently create the HTML and CSS? What tools do you use? – Emre Dec 14 '12 at 20:25
I work in Dreamweaver, but until I get to a point where I can import images and content, I'm usually typing the HTML and CSS code by hand into the Dreamweaver document. – Lauren Ipsum Dec 14 '12 at 21:27
1  
The software tools are irrelevant. The key is learning HTML, CSS and JS. – DA01 Dec 15 '12 at 3:23
show 2 more comments
up vote 1 down vote

These days, once a wireframe is established I simply use BBEdit and a browser to build the framework.

Image applications - Photoshop, Illustrator, et. al. - are used to create individual elements but it has become increasingly rare to build out an entire page in painting/drawing application and then slice it up. It's far more efficient to simply code in many cases.

Now, I am generalizing to a degree. Much of this depends greatly on the site design. There are some image-intensive sites which need to be graphically created then broken down into proper background images or elements for use in CSS.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.