: Is there graphic design software made for beginners, suitable for designing websites? I'm teaching web development to beginners, and it would be useful to show them the basics in design, meaning

@Miguel516

There is a free and online graphic design software at 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!

Vote Up Vote Down

@Nimeshi706

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

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


Create a prototype
Create a full page mock up in an image editing application (Photoshop or similar)
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.


Create Prototype
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.

Vote Up Vote Down

@Eichhorn212

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.

Vote Up Vote Down

@Samaraweera207

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.

Vote Up Vote Down

@Speyer780

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

Vote Up Vote Down

@Kaufman565

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 /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.





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).

Vote Up Vote Down

@Pierce403

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

Vote Up Vote Down

@Kaufman565

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:


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.
Splashup is a free web-based tool that looks and acts quite close to Photoshop.

Vote Up Vote Down