The other side

Although I can’t say I have much experience interviewing and hiring people, when you’re suddenly on this side of the hiring process, some things become clear, mainly on how people could easily make their CV’s stand out from everyone else’s.

Your 15 minutes of fame

We’re busy all the time, so even though we make our best effort to make sure we only hire the best people, looking at applicants’ emails, agency referrals, CV’s, portfolios, takes a lot of time. So the first thing you should keep in mind is that people are busy. They want to see your work and capabilities straight away. Try to make that as clear a process as you can.

Emails and cover letters

Friendly but professional. We’re talking about web roles here, you’re not applying for a job as a lawyer or an accountant. A friendly, polite, clear, concise—and professional—email about you, your skills and why you’re interested in the job go a long way.

The CV

Some people say CV’s don’t matter, especially for a web designer. I disagree. I’d rather follow links to your most important work from a CV than trying to figure out how the navigation on your site works.

Details on what your role was on each project are highly useful—if you’re called in for an interview, you’ll be asked that anyway.

Try to make the CV as short as possible, but let it be representative of your career so far and/or your accomplishments.

I would recommend you don’t forget to mention the following:

• Name, contact (email, city, phone number)
• Short blurb summarising your competences and what you’re looking for in a job
• Link to online portfolio (if you have one…)
• Perhaps a LinkedIn profile link (for example, you may have recommendations there)
• Education info (I don’t need to see your primary school though)
• Your skills (use known keywords here, and point out whether you’re an expert at something or only know it at a basic level), languages you speak, etc.
• Employment history with description for each role, links to projects you were involved in (make this relevant to the position you’re applying to)
• Published work, or link to your blog
• Other accomplishments such as any relevant awards, or speaking you’ve done

If you want to you can add references or recommendations, although not necessary and this may make your CV too long.

Links are indispensable if the sites are online somewhere (even if just as a screen grab on a portfolio site).

Review

When making your CV, ask someone else to review it for you. If you can find someone with more experience than you (someone who’s used to looking at CV’s would be perfect), and that knows your skills, so they can remind you of any skills you might have forgotten to mention, or tell you you don’t really have a particular skill you mentioned.

If you’re applying in a language other than your own, ask someone who speaks the language to proofread it.

The last time I revamped my CV, I asked a couple of people to look at it, with different backgrounds, but from the industry, and some native English speakers. Their recommendations were invaluable and made my CV ten times better.

Writing and personal projects

Having a personal blog where you express your thoughts and ideas about what you do always gives a good impression (exceptions aside). Writing shows you are capable of expressing yourself, and writing about your work shows a level of commitment and engagement with what you do that is invaluable and usually a synonym of someone who is willing to learn and also willing to share—indispensable attributes for working in a team.

This is especially important if you are a developer, with no visual work to show on a portfolio site. I still don’t know which is the best way for a developer to showcase their work other than in a show & tell/writing scenario. Ideas are welcome, feel free to use the comment form.

A blog is a personal project, but other types of personal explorations are always a plus (apps you’ve made, research, experiments, etc.).

Your skills

By showing you’re interested and engaged (I don’t think you can be in this industry if you dread it—it’s a labour of love), that you can communicate with others, and that you are willing to learn, you will be one step ahead of most people.

If the person or team recruiting notice this, they might be open to take you in as a junior who can progress, who they can mentor and help advance in their career—even when the original idea was to hire someone for a more senior position.

Where are the good ones?

It’s extremely hard to hire good people, especially for full time positions. If you’re good and you know it, and your skills are relevant, you’ll probably get more offers than you need, even if you already have a job or are freelancing.
So what I’d like to ask, besides asking for tips on how to create a good first impression when looking for work, is where would you go to find the good ones? And how can you make sure that they’ll want to work with (or for) you?

Note: I know I’ve focussed mostly on the CV and writing/personal projects part of the story. I could have mentioned actual portfolios, or interviews, or even the importance of expanding your network (people are more likely to interview someone they know or that someone has recommended), but this post is already long as it is, and I’m not in the mood for writing another book right now.

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!