Making Website Mock-Ups in Linux? 88
The Ubiquitous Web Designer asks: "I am trying to design a rather complex web page and am wondering if there are any tools which will allow me to make non-functioning mock-ups of each page so that a programmer can work from them. Obviously, it's hard to use the GIMP to make radio buttons, check-boxes, data entry fields, and so on. Can something help me design a page without much knowledge of HTML, or am I better off just doing it with paper and pencil by hand?"
Nvu (Score:5, Informative)
Re: (Score:1, Insightful)
No it's not. WYSIWIG editors are horrible, and produce nasty, unmanigable code that in the end will cause more headaches and time trying to fix it than it would have had you you written it by hand. Learning XHTML/CSS is a must and it's not that complicated.
Re: (Score:3, Insightful)
Re: (Score:2, Insightful)
I start like this: Pen/Pencil -> Image Mockup in Photoshop -> XHTML/CSS mockup with real structure. The last step is the dove tail into the real thing. It gives me the basic starting point and gives the client a chance to see the real deal and interact with the page elements before I plug it into a back end or start replacing bits of it with server side scripting. I don't start with an xhtml page, I start on pape then move into. I probably did communicate that well in my first post.
At any rate this
An unorthodox approach (Score:2)
I start like this: Pen/Pencil -> Image Mockup in Photoshop -> XHTML/CSS mockup with real structure.
I know (from personal experience) that GIMP takes some time to learn, and creating graphics from scratch with it is not exactly easy. But for the image mockup stage I have a somewhat unorthodox suggestion. Try Scribus [scribus.net]. Since you are doing visual layout anyway, why not use a software that actually is designed to create and manipulate such? Different elements are not tied to graphical layers, and dropp
Re: (Score:2)
I have a better idea: use Inkscape [inkscape.org]. Faster than Scribus, much better tools for lining things up, and generally much better in drawing tools. The resulting SVG might even be directly usable in the p
Re:Nvu (Score:5, Insightful)
Personally, I *always* mockup in Fireworks prior to doing anything. Get the look and feel of the site perfect, then handcode the html. Its significantly easier to move around something in a graphics package or WYSIWYG editor than it is in handcoded html, especially if you are doing it a dozen times an hour.
Re: (Score:2)
So, what you need is someting that lets a non-techincal person do simple layout, but maybe link things like buttons. In the day, HyperCard would have done the trick. Maybe Open Office's presenter? I've never used it myself. In any case if
Re: (Score:2)
Re: (Score:2)
Read the original poster's entry!
From the OP's post, they obviously have the luxury of breaking down the job roles... Also if you read, the OP wanted something that would work in Linux. Macromedia products work on windows. If you are a developer, learn to read the specifications (The post's title is: Making W
Re: (Score:2)
Re: (Score:2)
This is wonderful, and allows you to get the best of both worlds. However, in practice I've found that having an HTML document, any HTML document, tells your PHB that the HTML is "done". I remember being handed a bit of HTML (for a form that was maybe 200x300px) straight out of Dreamweaver and told to JSPify it. Six levels of nested tables, and a pr
Re: (Score:2)
This is normally done in Photoshop. for some reason he's finding it hard to do radio buttons in GIMP (which I really don't understand) but he could concieveably do a mockup in NVU, but it'd be hard and he'd never get it to look as nice as if he used a graphics proram. I still think GIMP would be a better mockup program, but the point of my post is that the kind of code NVU creates is irrelevent for this purpose, as it is never going to be used/looked a
Re:Nvu (Score:4, Funny)
Re: (Score:2)
I can agree with Dreamweaver, I personally like it. I've only had a few cases where it messed with my code but its not like FrontPage where it forces you to do what it wants - we've all done REALLY stupid things in our past... Now, Fireworks tosses code right out the door and creates a jumbled mess. Unfortunately, Dreamweaver really doesn't function on Linux very well...
I've used Nvu a little, didn't like it too much before, but
Re: (Score:1)
Seamonkey (Re:Nvu) (Score:1)
Not much out there (Score:4, Insightful)
You can technically find a tool that will let you place checkboxes + radio buttons, etc pretty easily, but you'll find that the visual design of those elements are what require the HTML and CSS skills. You're better off just drawing them how you want them to look and letting the HTMK/CSS gurus actually do all the coding, otherwise all the work you do making them look how you want will have to be redone anyway in code.
just the thing (Score:5, Informative)
Re: (Score:3, Interesting)
Re:just the thing (Score:4, Insightful)
My Method:
1) Paper and Pen
2) Inkscape / Vector editor
3) HTML
Re: (Score:3, Informative)
Re:just the thing ... another vote for inkscape (Score:2)
Oh and Xara
Re: (Score:1)
Personal taste is a large factor in clicking with a UI, especially among creative professionals, I'm finding. I was never a real fan of Inkscape, and I still can't use the GIMP for anything other than the most basic tasks (I'm a Photoshop junkie). Then again, I'm really getting into B
Paper Prototype instead (Score:5, Informative)
Your users will thank you.
Re:Paper Prototype instead (Score:4, Insightful)
I would say paper prototype, and use the chance to get some user feedback before you've poured heart and soul into a full-blown mock-up (or, worse, application). You'll probably find it easier to accept when these crude user tests show up problems - once you've got too much emotional investment in your design, it's far harder not to come up with reasons not to change it.
Of course, some people won't believe in paper prototypes. (I have one or two of those around here.) The compromise that works best here is to use - ick - PowerPoint. You might want to use whatever the OpenOffice equivalent is. As long as whatever you use is obviously not a web page, and a programmer can make sense of it, it probably doesn't matter what you choose.
Re: (Score:3, Interesting)
On my current project, we had an interface developer create an HTML "demonstrator" - essentially, a non-functioning HTML mockup of the site. You could click through a single, typical use case, and it showed you how things wo
Re: (Score:2)
Ha!, this is so damn true. I've all but stopped handing out mockups to people because of this. I even tried printing one out recently for the folks I work with and they still complained about certain things on it. "This info is wrong, it should be this...", "Why are you using this picture. You need to change it before we get in trouble fr
Re: (Score:2)
I cant tell you how many times ive sent mockup database form screenshots to people: "why cant i type" or another common oe "the buttons dont work, its broke" *sigh*
Paper and pencil (Score:3, Interesting)
Paper and pencil? (Score:1)
I use paper and pencil with a ruler to sketch a basic idea and layout. It gets scanned, I open it in Photoshop and start working. Without layer styles in GIMP you might be SOL...
If you do use gimp just download a GTK 2 theme based on the image or experience engine and pull out some transparent PNGs of the controls you need.
Sounds like a job for denim (Score:4, Informative)
check out DENIM (Score:1)
It's like paper prototyping, but without the paper!
Sounds like Visual Basic (Score:1, Redundant)
Re: (Score:2)
Re: (Score:1)
I kind of think it's a good idea, just in that one would be able to position elements, including radio-buttons and check-boxes (and, if they really wanted to, they could make them functional without too much effort, Visual Basic does have its positive side - and that's RAD [rapid application development]), images, and other user-interface
Re: (Score:1)
These are the steps I follow (Score:4, Insightful)
2. Draw the complete layout in Inkscape
3. Export elements into the Gimp for final touch up and optimization
4. Link to images in stylesheet
Inkscape is an excellent tool becuase you can scale you're elements as much as you like without losing quality.
Screen Capture... (Score:1)
One place I worked... (Score:4, Interesting)
You should be able to grab screenshots of the elements you want out of Firefox and then reuse them in your layout. The only "hard" part is that for objects that have variable sizes, you have to grab the right and left sides and the middle as separate elements. Then for a "wide" button you stretch the middle portion to the correct width for your text and then place the right and left elements on the sides.
This may sound like too much work to you, but keep in mind that once you have captured all the parts you need, you can reuse them on future projects of a similar sort.
Re: (Score:3, Insightful)
Re: (Score:2, Insightful)
Re: (Score:2)
You left off a step:
Re: (Score:2)
# vi example_page.html
Or is it:
# cat > example_page.html
followed by a ctrl-d?
Whatever works . . . (Score:2, Informative)
For me, what works... (Score:2)
What it all boils down to is that you need to work the way you work best and leave the coding up to the coders.
I don't mean that you should do this an
Paper! (Score:4, Insightful)
You can probably do a couple iterations on your design in the time it takes you to install and boot up any software package. Hand the best one to the programmer, or scan it and e-mail it to her.
Re: (Score:2)
Re: (Score:2)
Speaking as a programmer, I'd ask him what exactly he expected me to do with the piece of paper. But then perhaps I've been spoilt; while I can (of course) do HTML, CSS, etc, we have people dedicated to that sort of thing. Just as you wouldn't want me admining live servers (although I *can*), you don't want me (or any other programmer) creating the HTML from scratch.
A few years back I met a graphic artist turned webdesigner and using pen and paper was a drum she beat frequently. Get it first on paper t
Re: (Score:2)
Ideally, of course, a "ubiquitous web designer" would be able to, you know, open up a text editor and pull out their favorite cheatsheet [werbach.com] to refresh themselves on how forms work and give the programmer something to work with. But somehow it sounds like the original questioner is convinced they can never lea
No! (Score:2)
You can easily bolt together page elements and then create copies to drop anywhere on your mockup, and group select to alter attributes accross many elements. It can also import raster (bitmap) graphics to show where photos etc would go on the page.
Output is as
For starters, don't use GIMP or Linux (Score:1)
Re: (Score:1)
From this post, it is not hard to see why Linux is not friendly to you...
Re: (Score:2)
gui and graphics (Score:2)
It may also explain why Adobe isn't porting Photoshop to Linux anytime soon.
I'm not so sure Adobe is taking so long to port to Linux for this reason. Afterall they're not porting their software, PS, to MacTels until the third version of CS comes out.
FalconRe: (Score:3, Informative)
Re: (Score:2)
Josh
www.PostcardsToSpace.com
how to make mockups that are easy to make dynamic? (Score:1)
The submitter wants to make non-functional mockups without spending a lot of time. Our designers would do that in photoshop and once the client approved the design, they would then do the mockups in HTML.
The HTML mockups weren't bad, they did thei
why not use xfig? (Score:3, Informative)
If you just want to show layout and don't want to draw by hand on paper, why not use xfig or some other diagram-drawing program? If you do a lot of this and want higher quality drawings, you can create a library of objects.
Inkscape works great (Score:3, Interesting)
I plan on documenting this process soon, because I know a lot of people ask about it, but here's what I do:
* Get the newest version of inkscape that you can, they really are adding excellent new features with each release
* Open a new doc and assuming 1024x768 target browser size set the document to 1000x600 px. For 800x600 go for 760x600px
* Use the layers tool in Inkscape to separate portions of the document
* Create a layer on the very top called "slices" and in this layer, create rectangles that are 10% opaqe or so that cover individual elements that will become images in the final product. This layer will usually be hidden.
* Periodically save your document out as png... remember, most people have a screen res of *96 dpi* not 72.
* When you want to save individual components, for example the logo in the example above, show your "slices" layer, click the square that covers your logo so that it's selected, then hide the slices layer. The square will be selected but hidden. When you choose export, it will export just the visible portion of the image you have selected.
I'm happy to give more details, I'm newz2000 on irc.freenode. I don't have a lot of time to chat, but ping me and I'll help out if I can.
Once we get guasian blur in inkscape I'll probably stop using photoshop. (Yes, I run photoshop in Linux - using crossover office)
Re: (Score:2)
Or in the beta version of Firefox 2.0. I just tried it-- very nice.
Re: (Score:1)
Yes, I use Inkscape a lot also to do my initial visual design and will often generate graphic elements (custom buttons, for example, or logos) directly from the program in PNG then do the final touchups/format conversions in GIMP. I use Bluefish http://bluefish.openoffice.nl/index.html [openoffice.nl] for the actual page coding.
I wish I could say that I've extensively tried other Linux graphic apps/code editors but I haven't. XaraLX is just now getting to the stage of usability for Web stuff; I'll have to spend more time
Re: (Score:1)
Thanks! (Score:1)
I'll give it a try. "JavaScript-focused" sounds intriguing.
* * * * * *
Boy, those French, they have a different word for everything!
--Steve Martin
Try pencil and paper (Score:2)
XHTML isn't really that hard (Score:2)
I will admit, I'm a real GIMP addict myself, but it can definitely be a pain in the ass to learn, it took me around a year or so of playing around with it off-and-on before I really got the hang of things, al
The newly open sourced... (Score:3, Interesting)
For a nice quick design prototype, I'd love to hear if there's anything better.
Re: (Score:2)
Re: (Score:2)
I think what you want is called... (Score:1)
PowerPoint for wireframes, Photoshop for art (Score:2)
At my previous company, our UI designer used PowerPoint to create wireframes. That was to get a feel for where the UI elements would fit on the page. One nice thing was that he could easily share his work by e-mailing the PowerPoint file. He even did some crude scripting so that clicking on certain elements would take you to the next page. The software developers joked that we should just ship his PPT file as our product.
The artistic factors (color scheme, logos, etc.) were handled by our graphic de
You are better off not doing it at all. (Score:3, Insightful)
CSS/XHTML imposes limit on what fonts you can use and what is possible and what isn't
Not only that but you have to make sure it runs on standards compliant browsers and hunk of trash that Microsoft calls IE.
it is the height of arrogance to think that you can design a web page and no nothing about HTML. Kind of like someone that can't change their oil thinking they can design a car.
Find a web designer and tell him what your page needs to do. Then work with them until you like it.
Do not give him a pretty picture and expect him to get it to render on every browser and resolution on the planet.
Here's what I use (Score:2)
First of all I'd like to note that the available OSS tools have come a long way since a few years ago. Inkscape as a vector tool looks impressive, Gimp is a usefull tool for professional work and Openoffice Draw isn't to bad either, allthough it's best suited for flowcharts and stuff.
For professional Print and Web work on Linux I personally use Corel Draw & Corel Photopaint for Linux (CD Version
By hand (Score:1)
I find that when I'm designing stuff quickly, I need to have something that I can use easily and quickly, even when my mind feel like it's going faster than my hands can go, so I draw. Just scribbles, but when I have one that I think is good enough, I'll pull out the ruler and colouring pencils, and see if it really does look that good.
When I'm done, I'll open up Vim and see if I can get a working style sheet & HTML. If I still think it looks good, then I'll go ahead with it.
Quanta Plus / KDE (Score:2)
Basically make your content, name the blocks. Start writing CSS that makes the page look right.
To do a website elegantly, you need to consider CSS from the ground up.
quanta plus has a wysiwyg environment now. Plus it uses konqueror--the browser that passes the acid2 test. and it has some great code collapsing features from the advanced text editor.
--AP
Paper (Score:2)
I tend to use tracing paper, felt tip pens and a photocopier.
Establish your basic grid - photocopy a bunch of shells, you can layer elements to see how the screens build on each other using either light trace or bank paper.
I also find that colour can be useful in mockups - hence the felt tip pens. If links are going to be a different colour, etc... show them as such on your mockup. HMTL is a GUI, chances are they won't be using the site in B&W - colour does impact on the choices people make while us