5

I'm teaching web development to beginners, and it would be useful to show them the basics in design, meaning using a graphic design package to come up with a layout, before turning it into code.

To be clear, I want something for creating the "look and feel" of a page, not the layout. I don't mean prototyping tools. There was some confusion about this, and the meaning of my original question was changed, I just changed it back, half a day later.

The html and css itself will be hand-written.

I need something which is freely available, or really cheap. It can be a program designed for beginners, or a broader program with a "beginners mode", or a less intimidating interface for new users.

Is there software which fits this description?

Improve this question
0

8 Answers 8

Reset to default
8

Similar to Balmamiq but free and open source is Pencil. It's quite good, the interface is easy and you can download sets of graphics (for web, for apps, and so on) made by other users.

enter image description here

Improve this answer
1
  • 1
    It see that it also works as a Firefox plug-in (!)
    – horatio
    Feb 21, 2013 at 22:02
4

This might be the wrong direction if you're going for aesthetics, but Balsamiq is a nice tool for messing around with interface development

enter image description here

Improve this answer
3

In my opinion (please correct me if I'm wrong) this part of your course is intended to show your students the basics of the software they may come across in the real world afterwards. Photoshop, Fireworks are quite standard for creating graphic elements of web design, so I assume that the closer the “light” software is to Photoshop/Fireworks, the better.

Hence, I can think of two possible alternatives:

  1. Photoshop Elements which is a simplified version of Photoshop, and is much cheaper (but not free). Using it in “Expert Mode” shows a lot of what Photoshop can do.

  2. Splashup is a free web-based tool that looks and acts quite close to Photoshop.

Improve this answer
2

Adobe Muse is created for almost exactly that sort of thing (see warning below though). Tagline:

Create a website without writing code!

As far as I know, it's the only serious recent venture at software to create web layouts in a design-y way. Cost is a $20/month recurring fee, so you could use it to get people started, then ditch it when they no longer need it.

BUT - from everything I've read about it, it sounds like a bad plan. Basically it sounds like it's all about fixed unit sizes and inflexible layouts, and turns elements into static images the moment things get complicated. And it creates horrible unusable inflexible code, so it's basically just for prototyping or making comps/concepts.

Based on this, using it sounds no better than the old workflow of Photoshop or Photoshop Elements or Fireworks or GIMP or PixelMator to create a comp/knockup, then, when that's agreed as a concept, get coding. It sounds like the only thing it would add is clickable links in the comp / knockup and possibly semi-usable CSS, at the cost of heaps of design features.

Here's an excellent review where several pro designers and developers try it out - their verdicts are sophisticated, considered... and almost unanimously brutally negative. Everything else I've seen on it has had the same verdict, even when people try to give it the benefit of the doubt.

THAT SAID - the reason Adobe charge a subscription for it is they want it to evolve and they want to add features quickly. So it might suddenly get a whole lot better. I'm skeptical... but maybe they'll prove us wrong.

If they did get it right, it'd be useful - you could design layouts you could show people in a real browser, with real interactive elements and real clickable links, then, when a design has been chosen, export the CSS file and some of the images, which you use it as a starting point as you begin work on the final layout and final CSS/ images. But I haven't seen anything suggesting it's there yet. It's also unlikely to go mainstream while they keep it subscription-only.

So it might be worth keeping an ear open in case it improves. Might even be worth trying it out, since it's subscription-based therefore low risk.

EDIT: Looks like recent updates have focussed on interactivity, and support for mobile designs. Both are things that would be useful to have in web design knockups, so maybe it is heading in the right direction. But it still looks like they're all about rigidity - a site's 'mobile version' and a 'tablet version' and a 'desktop version', rather than anything about responding responsively to a browser's actual dimensions and features.

enter image description here

You might find Project Meteor amusing - it's a group of designers complaining that there's no good dedicated software for quickly designing proof-of-concept web page layouts (but complaining in a semi-organised way).

Improve this answer
2

Wireframe Sketcher is very similar to Balsamiq, although about a sawbuck more.

enter image description here

Improve this answer
2

I like to use Inkscape. It's free and very easy to use, but can still produce really nice stuff.

Wireframe tools like Balsamiq or Pencil (which is really nice, especially given that it is free) works great for desktop applications which are made of mostly standard items (menus, titles bars, toolbars, text areas, etc.), but there are less conventions about how a web page looks and what elements are found on it, which makes it less of an advantage.

Wireframe tools are great, especially if you want to concentrate on the layout but if you want to take your students through the steps of cutting elements and putting them together afterwards, you will need to redo everything properly in a different software.

On the other hand, if you do everything in Inkscape, you can start with a rough layout rather easily and when you get to it in your lesson plan, you can just polish up your design and it's ready to cut, using the same tool your students became familiar with in the layout phase.

Improve this answer
2

Okay... based upon the edits....

I'll assume this is the processes you are considering:

  1. Create a prototype
  2. Create a full page mock up in an image editing application (Photoshop or similar)
  3. slice up the image mockup and then build HTML/CSS

And I assume you are asking about #2 above.

If that is correct, then Photoshop Elements, Inkscape, Gimp, etc can all be used. However, it is very important to realize that this procedure is not how many professionals are building web sites in this day and age.

The old "build an entire image, slice it up, and reconstruct it" is very 1990s or 2000s thinking. I wouldn't teach that method today, but that's me. Primarily because the image mock-up is a complete waste of time in many cases in my experience. I can spend many hours building an image, then an additional 3-5 hours to code what I created in the image with no direct correlation between the two other than basic appearance. Or I can simply code some HTML in an hour or two, and then build many stylesheet alternatives in another couple hours.

HTML5/CSS3 is used to create and define design much more than it used to be. Boxes, buttons, shadows, placement, size, interactivity, etc. are all better defined in code than in an image. To this end, the processes has streamlined a great deal in the past decade. This may be way many answers are swayed tot eh prototyping aspect (they were long before the question title was edited) since you don't want code... that's what's left.

  1. Create Prototype
  2. Create preliminary HTML/CSS mockup using independent image assets as needed.

It is exceptionally rare to spend time creating a full image, trying to mimic css settings, just to show a client. It is honestly a complete waste of time in many cases. It's much faster to construct a basic HTML page then construct a few stylesheets to show alternative layouts. Not to mention, you bypass the whole "That text/box/line/color doesn't look the same as it did in the mockup you showed me." explanation phase.

This may be where some of the confusion was generated. You're essentially asking about a stage in the processes which isn't very prolific anymore. I, myself, haven't sliced an image in several years.

Improve this answer
6
  • I agree about slicing, and don't plan to teach it*. I do think it's important to have an actual design before you start coding though, or things can look a bit well "designed by coders", (I used to threaten my graphic design colleagues with that term when they didn't provide me with assets). *unless somebody wants to do fancy html emails, it's good for that.
    – daveyfaherty
    Feb 22, 2013 at 13:31
  • :) Assets yes.. but full pages pretty much never. I'll create images needed independently in Illustrator or Photoshop. I just don't waste time with entire pages.
    – Scott
    Feb 22, 2013 at 14:02
  • I get you. I'm coming from a background where the artwork for a whole page is presented to a client, approved, and then becomes a web page, so all the assets you need exist in one .psd. I can see how that process wouldn't be best for a designer/developer.
    – daveyfaherty
    Feb 22, 2013 at 14:31
  • 1
    I've actually grown to quickly coding a page and taking screenshots.... using those for approval. I simply keep a library of master assets and recolor/alter as needed for CSS. This shows the page exactly how it will be coded but discourages the client commenting on any interactivity until design is approved.
    – Scott
    Feb 22, 2013 at 14:36
  • I should add, that I traditionally don't build those overly-image intensive sites for entertainment, travel, food, etc. My clients are far more high-end business oriented so the sites I build aren't in the same genre as sites requiring a great deal of images.
    – Scott
    Feb 22, 2013 at 14:45
-2

There is a free and online graphic design software at www.fatpaint.com, it can do many things.

It is the only graphic design software that is completely online and free... I have used it myself for making the mockups of my own website. I specially like the 3D text feature... Check it out!

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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