The value of experience

Experience will help and probably the first few tries will not be without their problems, no matter how hard you try. But there are some mistakes I usually spot on web designs that have been created by print designers or designers that have no knowledge of coding, and that, if you’re in that position, you can easily avoid.

Learning how to code

When you’re handing over a design to be coded by someone else with at least some experience, they will know in a second if the designer has any idea of how things work on the web, or on screen.

Learning HTML and CSS is a must, not an option, if your intentions are to be truly great at what you do. It will make it easier for you and for the developers you’re working with. It doesn’t mean you have to become a front-end guru, but a basic knowledge of how things work will be to your advantage.

But don’t get me wrong! It’s good that there are no restrictions—sometimes designing a layout can become a very rational process if you know you will have to code it later on, but it’s wise to know how things work at a minimum level.

Here is a list of a few things that you should pay attention to when designing for the web:

1. Proportions

Photo by caitlinburke

This one is easy! When you are creating a new layout, pay attention to the size of the elements and think of how and whether they will fit in the page. Are you creating buttons that are too big compared with the rest of the page? What happens when you have more navigation items than you designed, will they fit the design? How will they wrap?

It makes it easier to design with the units set to pixels, because that will be the primary measurement unit on the web. Pay attention that you are not designing a layout that has 20 centimeters, and if you really must, how will it translate to the screen?

2. Organize your file

If you’re handing out Photoshop, Illustrator, or any other layered type files, make sure that the layers are well organized. It doesn’t have to be OCD-organized, but at least separate the big blocks that make up your site in folders and name key layers.

Here is an example of a well-organized Photoshop file:

3. Too many effects and details

I’m referring to details that will not add value to the layout and will just make it harder to code. A rounded border with a coloured gradient border, a complex background that would require multiple images to reproduce and a dropshadow on the same element may be a bit too much (although you never know, right?)!

Your designs don’t have to be all shiny and cute to be beautiful and good.

4. Use fonts that are web-safe

Photo by bebop717

Opinions divide on this matter. Some say we should experiment with type, others that we must adapt to the medium and work with the fonts we have at our display. I would say I agree with both, with limits: we should definitely experiment, but in some cases, we have to play it safe.

In those cases, make sure that long chunks of text or text that needs to be flexible uses web-safe fonts.

Techniques can be used to use almost any font now, but sometimes that will add time to development that may not be suitable to a particular project. So the best thing is actually talk to the developers upfront whether that option is viable.

5. Not following some conventions

Photo by dmmartens666

If you plan on designing a website that is intuitive to use and doesn’t get in the way of visitors and potential clients, there are some conventions you should at least try to follow. Most conventions exist for a very good reason: they make our lives easier, so we don’t have to analyze every single action we take in our day-to-day lives.

So be sure that if you’re breaking a convention, it’s because it actually feels right for your design, and not just because you desperately want to be different. There’s no point in reinventing the wheel.

6. Not using grids or properly align elements

Photo by bollaeszter

Using grids is one of the best advice one can give you. The website will look more balanced and you won’t feel lost with the sight of a lot of stuff just floating around the screen and not knowing what to do with them or where to place them.

But don’t forget, the grid is also there to be broken! :)

7. Use spacing carefully

Photo by Adam_T4

You don’t need to go overboard with this one, but pay attention to spacing when you’re designing websites. Make sure everything has enough room to “breathe”, that the design isn’t crammed and that spacing is consistent across the layout (padding, margins, borders, etc.).

8. Write down notes

Photo by Jacob Bøtter

You don’t have to write a massive report about your designs when handing them down to someone else. Actually, if you do, you will probably be cursed at. I’m talking about small notes that you can write with pen and paper while you are designing and then put on a text file to accompany your layouts.

You can be as thorough as to giving the exact colour codes you used, or as scarce as just mentioning whether it is a fluid or a fixed layout–everything helps!

Conclusion

To sum things up, if you have little or no experience in designing for the web, the best thing you can do is take a look at how other designers do it, pay attention to websites you like using and that you think are good, and reflect on why you like them? What are the common features of a good design, what is it that you can improve in your work just by analysing others’ work and experimenting?

Did you have any problems when you stared designing for the web? What were your biggest challenges and how did you overcome them? Leave you tips in the comments!

Further reading

• Why Designers Should Learn How to Code
• 9 Common Usability Mistakes In Web Design
• Common Mistakes in Web Design
• Top Ten Mistakes in Web Design
• 8 Web Design Mistakes That Developers Make

Attention, rant alert!

First things first: not everybody that uses Dreamweaver is using it in the Design mode, or even Split mode. Or uses the automatic CSS creator/editor tool.

My intentions with this post are not to convince anyone to move from whatever tool they’re using to Dreamweaver—just to make people understand that Dreamweaver is not that little evil tool everyone seems to think it is—a tool for people who can’t code.

One of the reasons I wanted to get a Mac was because then I would be able to use Coda. It looked so clean, intuitive and without all the clutter that Dreamweaver brings with it! Then I finally got my hands on to a Mac, and actually tried Coda: it didn’t last a day.

I’d like to be able to use a cooler or prettier tool, and, believe me when I say that I’ve tried a lot of them: Coda, Espresso, BBedit, Notepad, etc. I end up frustrated because simple things I’d like them to accomplish just aren’t there or, when they are, they’re not clear.

But don’t get me wrong: Dreamweaver is far from being perfect! It’s just that I’m more prepared to miss out on the great new features that keep popping from the new apps, than from the simple ones that Dreamweaver provides me with and that help me code faster.

I’m sorry I won’t be adding any screenshots to this post, I just have to let this out of my system as quickly as I can. :)

The details that matter to me

This list focuses on the way I use Dreamweaver, and that is mainly to code HTML and CSS. I’m aware that I don’t use it to its full potential, so this list could be so much longer, right?

So why do I like it so much then?

• It adds links to the external files your HTML is linking to at the top
• The list of colours, assets, links used in a Site
• It doesn’t close HTML tags as soon as I open then
• It closes HTML tags if I type “</“
• You get a list of all available CSS classes and ids when you're typing "class=" or "id="
• It auto-completes the properties in CSS files (yes, all the others probably do that as well)
• You can add strong, em, or headings, for example, with just Cmd+B, Cmd+I, or Cmd+1
• If you type "&" in your HTML code, you get a list of glyphs available
• It doesn't add annoying project files to my folders
• Search and replace across an entire site
• The inbuilt FTP: it's not great, but it's OK for quick uploads
• I can use the tab key to indent several lines of code without the need of a plug-in
• Update: If you set up a Site, and then change the name of a file (html, image file, etc.), it updates the links to that file within the Site
• Update: When inserting an img tag, after inserting the source file code, Dreamweaver adds the correct height and width automatically when you type in height and width

People keep trying to convince me to move from Dreamweaver (and sometimes I try to convince myself), but save your words if none of the above mentioned features is present in the tool you’re about to recommend.

I’d also like to add that I don't use Dreamweaver's live preview—I never got used to it because it used to suck (I've heard it's a lot better now though), so I use a combination of Firefox and Firebug to do the live editing.

The details that I don’t love, but that I can live with (or without)

• The price tag. At almost £400 (or $399), it’s quite expensive and sometimes prohibitive
• It can be slow
• It’s not as pretty
• It doesn’t know which properties have already been used for a particular tag
• Search and replace could be nicer (like Espresso’s)
• I’d like to have a more visual navigator (like Espresso, for example), but it has one that serves its purpose well
• Spelling checker: if there is one, I don’t know where it is (Espresso has it)

Dreamweaver is sad

So please, next time you say mean things about Dreamweaver, think twice, look at how sad it is:

Photo by protographer23

What would you like to add? Are you a Dreamweaver hater? Do you secretly use it when no one is looking?
Let me know in the comments section!