Web Design Software for Non-Geek

October 6, 2010 4:26 PM

A friend wants to "design websites". She is great in panting, colors, photography, but has until now no expereience with sophisticated software. I am afraid Photoshop / Dreamweaver is too much for a start. What software do you recommend?
posted by mitocan to computers & internet (17 answers total)

Evrsoft's 1stPage2006 has multiple modes - WYSIWYG to hardcore, that can adapt to the user's sophistication and design needs as they become more accomplished/experienced. Also, free.
posted by Emperor SnooKloze at 4:31 PM on October 6, 2010

Squarespace looks pretty easy to use.

I've also heard good things about Rapidweaver.

Do you mean design websites for herself or for other people? Please say herself.
posted by Magnakai at 4:49 PM on October 6, 2010 [1 favorite]

Also, if she does want to learn properly, then there are lots of great tutorials online.

Nettuts has some things. This two parter (1, 2) is a nice example of a step by step guide.

W3schools.org is a great resource for html and CSS definitions, and just googling around will give answers to lots of questions.
posted by Magnakai at 4:52 PM on October 6, 2010

I'll go out on a limb and be the black sheep here: I was her once, and my mentors tried to molly coddle me since I was a "designer"; don't do that to her. Seeking 'Web Design Software for non-geeks' is sort of like saying "I want to win the Indy 500 but I don't drive and I don't intend to learn."

If she really wants to be an interactive designer, don't hide the complexity of the field from her. She's going to need Photoshop, complex or not, to create all the assets she'll need to create for her designs. She's also going to need it so she can ask questions of other designers and developers, and she needs to run what they run and not "Bob's PaintShop 9".

She also needs to learn HTML, and now is a great time to do it. HTML5 is going to make her prospective job so much easier and her designs much more powerful. Any book on HTML 4 or higher, and a license for TextMate or BBEdit and she's all set. She'll need to learn and understand CSS, too. Have her Google 'Dan Cederholm' or 'Doug Bowman' and see if she stays indoors for a week.

A passion for painting and a passion for information design are often thought to be one and the same (if you're good at one you're good at the other, right?); in truth they're very different forms of creative endeavor. If she ends up loving web design after understanding it's not the same as her other hobbies, she will have definitely made a good choice.
posted by littlerobothead at 5:02 PM on October 6, 2010 [17 favorites]

Lots and lots of website designers never touch the code (ie, dreamweaver). I would suggest that something like photoshop or illustrator be where she focuses her efforts, those being the tools of the trade.

I'd second nettuts as a solid resource.
posted by shownomercy at 5:04 PM on October 6, 2010

I would explicitly advise her to avoid any HTML editor and start with a text editor. Sit down and show her the basic structure of a web page and load it in the browser locally. Then let her make changes to it and see those changes update on screen. Then add a style sheet. Then add some jquery. Then have her create a beautiful design in photoshop and build it by hand in the text editor.

By putting her on Dreamweaver or any other WYSIWIG helper editor, you're actually lengthening her learning curve... a lot. She has to learn the editor itself, and she'll be pretty much helpless to debug it when she's unable to get the effect she wants.

If she starts in a text editor, she'll get somewhere useful much faster, and she'll understand what she's doing. She'll be able to go to CSS Garden and understand how they're achieving those effects. She'll be able to open a text editor, type for two minutes, and test a particular effect.

If she's going to be an actual web page builder, she'll end up there anyway. Don't start her off with the Fischer Price version of the tools.
posted by fatbird at 5:25 PM on October 6, 2010 [4 favorites]

While lots of web designers never touch the code, none of them are good.

Adobe Fireworks is a bit easier to learn than PhotoShop and, in my opinion, the better tool for web design.
posted by Mick at 5:26 PM on October 6, 2010 [2 favorites]

I would explicitly advise her to avoid any HTML editor and start with a text editor.

Seconded. Hand-coding basic HTML and CSS is dead easy, and requires nothing more than Wordpad and a web browser. Anyone could master them inside of a few weeks, I promise.
posted by Sys Rq at 5:42 PM on October 6, 2010 [2 favorites]

I run a webdev office, and the first thing we do with new designers is try to wean them off of Dreamweaver.
PS or Firewroks (<- better) for mockups, than HTML+CSS all the way.
posted by signal at 6:13 PM on October 6, 2010

Learn proper HTML and CSS. It's not as hard as it looks. I recommend the Head First books. They hold your hand, don't assume you know anything, but don't assume you're stupid, either.
posted by empath at 6:52 PM on October 6, 2010

Lots and lots of website designers never touch the code (ie, dreamweaver). I would suggest that something like photoshop or illustrator be where she focuses her efforts, those being the tools of the trade.

I disagree. She needs to know what elements of pure visual design are easily transformed into HTML and CSS, what will take some effort, and what will leave her (or her designated coder) a sobbing mess on the floor. Get her started in hand coding, and once she gets her feet under her, make sure she designs and tests for every major browser out there (see: sobbing mess on the floor, avoiding).

I agree that w3schools.com (NOT w3schools.org) is a great, free and easy start. Not only do they teach the basics pretty clearly, their TryIt Editor gives immediate and useful feedback about any code change, and is offered at regular intervals with sample code in their lessons.
posted by maudlin at 7:03 PM on October 6, 2010 [1 favorite]

I taught someone CSS in like 45 minutes the other day. This was, like, someone who finds email complicated. And I'm also an idiot. It's an extremely gratifying thing to learn! And it's a great thing to have on her resume. Photoshop and html and css coding is all she needs to learn. And if I can learn it, believe me, she can.
posted by RJ Reynolds at 7:07 PM on October 6, 2010

I'm curious as to why she wants to design websites. As a career? As a hobby? To start her own website/blog? This will really change the kinds of answers you're looking for.

I think a good analogy can be drawn with food. Are you looking to cook dinner for your self? Do you want to become a chef? Or just host a dinner party?

You could use some frozen pizza (some program like iWeb or Rapidweaver) and make a perfectly tasty meal. You're not exactly a chef, or even really cooking. But you're eating, and its not bad.

You could cook from scratch, but maybe your limited skills hold back your bigger ideas. You can imagine how delicious caramelized onions are but if you can't slice them thinly enough you're not going anywhere. You've got two options: hire a sous chef (a coder) who can help you with technique while you write the menu, or you can gain those skills on your own. There will be a lot of messy cooking, and it'll take a while.

I don't think, in order to be a great chef, do you need to also be a farmer and grow your own ingredients. Likewise, I don't think you need to be a web developer (ruby, ajax, php, JS, etc) to be a web designer. There are lots of already developed CMSs, e-commerce backends, plugins, widgets, etc for purchase. Having to do it ALL your self is a bit crazy, and typically it's a case of "jack of all trades, ace of none".

I think designers should know basic html and css, and good user interface practices. More importantly they need to know good design fundamentals like visual hierarchy, color theory, typography, grid design, etc. I think a person can be a great web designer if they excel at those design fundamentals, but only have a basic understanding of box models, web safe fonts, etc. That kind of web designer is also dependent on a coder. He or she cannot "make" websites entirely on their own. I don't think that designer is any less legitimate than a designer/coder, they just focus on what they know, and hopefully design beautifully and practically.

That said, if this person is going to be scared of Photoshop or html, theres probably not a whole lot of a future for her in web design. Babysteps don't really exist, or are going to be more hinderance than help. (You can't learn to make a real pizza from a frozen pizza). Forget about beginner software for now. Photoshop, and a text editor is what she should start with.

Community college courses are probably the best way to pick some of these skills up. A trip to a bookstore/library would help too. Jumping in feet first works too. It's frustrating, it might not be something she's used to, but its not inaccessible to an average person.

(also, I don't get the Fireworks love in this thread. Illustrator CS3+ makes great use of vector graphics for pixel based output, slices, pixel preview, export to flash layers, etc. I'm coming from a designer POV where Photoshop and InDesign are my bread and butter so YMMV. )
posted by fontophilic at 9:11 PM on October 6, 2010 [1 favorite]

Nthing the "learn HTML with a text editor" votes. One of the best aspects of web development is that learning HTML and CSS is as easy as picking a site you like and then hitting "view source" in your browser. Copy the code to your computer, then start tweaking it and seeing how it breaks.

Also, this site (http://www.htmlinstant.com/) just launched a few days ago, and could be a quick way for her to hack things out in real-time.
posted by Alt F4 at 9:12 PM on October 6, 2010

(also, I don't get the Fireworks love in this thread. Illustrator CS3+ makes great use of vector graphics for pixel based output, slices, pixel preview, export to flash layers, etc. I'm coming from a designer POV where Photoshop and InDesign are my bread and butter so YMMV. )

As someone who came from a coding rather than designing background, I found that Fireworks was much easier to learn, and also hugely easier to do the basics with. It also allowed to mock things up fast (or at least faster than the versions of PS and Illustrator that I worked with, and sure, this was probably because I hadn't spent enough time getting to grips with them). So yeah, speed and simplicity.
posted by djgh at 6:39 AM on October 7, 2010 [1 favorite]

While I agree that understanding photoshop/HTML/CSS is important, I am also surprised that no one has mentioned learning how to implement a CMS like Wordpress. Does anyone still build websites without a CMS these days?
posted by snofoam at 9:21 AM on October 7, 2010

Not usually, snofoam, but it's best to know how to ride a bike before you jump on a motorcycle.
posted by sonic meat machine at 12:16 PM on October 7, 2010