How to Create an astonishing Online Reputation as a Web Designer/Developer

by
on December 12, 2009
(9 minute read)

Here are some useful tips I would like to share about my experience in the jobseeking world and what I have learned to create an online reputation as a front-end web developer and designer and to place myself in this huge, ever-changing and thrilling market. I have been working closely with recruiters from around the world for more than 2 years, freelancing for several more and lived some time with an IT recruiter who gave me great advice.

Personal Website

I’ve got invites for a free bank transfer!

Your website should be simple, fast and intuitive. Page should load in 5 seconds as maximum, make no more than 10 requests (at least until the DOM is loaded) and weight less than 500KB.

Regardless of these requirements, you should have a strong and unique design so experiment with several designs and the best way to code them.

Domain name

If you are looking for a job as an individual, go for yourrealnameandsurname.com. No discussion on this. Having your name in the URL will increase your professional reputation while making you more visible and easier to find. If you have a common name (search your name in Google) then get your domain and variants ASAP.

People looking at your personal website are usually recruiters, managers or professionals that don’t want to read extensive essays or learn something complicated. They just want to know more about you and they may just need one thing. Some may have read your CV and are interested in viewing your portfolio or download the most recent version of it, some may have just visited a website you have created and want to find a way to contact its creator.

As per the KISS principle and usability standards, users should be available to reach your portfolio, contact information and CV in no more than one click from the start page.

Online portfolio

Should contain between 4 and 12 recent websites/projects/templates each of them containing:

  1. a brief description on what it is and what you did
  2. some pictures focusing on parts of the website you want to show
  3. a link to the website or to a full screenshot if it is not online

Try to keep it up to date with the best projects you’ve ever participated in and describe the different areas of expertise of each being as varied as possible.

Contact information

Provide at least two different ways to contact you: e-mail, phone and/or online form. Let the user decide which one they prefer.

Curriculum Vitae

Provide a direct link to a Word Document (.doc) file. Most recruiters prefer reading Word documents rather than PDFs. Extra point in providing a PDF version of it, your resume will be more visible to web spiders, PDF libraries and recruiter research tools.

You need to upload your CV to all the job boards you find available or useful. Although updating your CV in all these sites is a tedious task, you should always keep the CV as updated as possible, at least the one hosted in your website.

It is very helpful to add a note at the bottom of your CV stating something like “Please get the latest version of my CV from mywebsite.com/cv.doc“.

Here’s an example of an HTML/CSS CV format ready for you to use.

Brief description of you

Don’t extend it too much, two lines of text are enough. Describe yourself a bit, your hobbies or what are you up to at the moment. Try to be passionate and positive.

Optional features

There is no hurry on these, and they’re not strictly necessary. But they will help spread and create you a strong name around the Internet.

Professional Blog

If you like writing, linking to a professional blog of yours is a good way to let interested people know more about you. It also gives an idea of what you like/dislike, your communication skills and your passion in your job. Keep the blog restricted to work, do not talk about how much you hate chickpeas.

Extra point if your blog follows the same design patterns as your personal website since it creates correlation.

Networking sites

Links to professional networking sites are great ways to increase your professional network. Even if you just visit professional networks once a month or never, it is a great point in having them.

Whenever you receive an e-mail from an agent or relevant employer, check if they have their profile linked in their signature and send them a connection request.

The most important professional networking sites you should (at least) have a profile in, are:

  • LinkedIn
  • Twitter
  • Behance

A photo of you

This is a tricky one and needs to be chosen carefully. A picture of yourself increases confidence in your possible next client or recruiter. It also helps to give a more personal feel.

Spend your time in deciding which photo you want to show. Should you be wearing a smart suit? Should you smile? Indoor or outdoor? Black and White or coloured photo? That depends on what impression you want to give. In my case, I choose to show a quite casual picture of myself by following these key points:

  • Optimistic and passionate: Big smile
  • Friendly and open-minded: looking straight at the camera without any lame pose
  • Practical: informal clothing

Remember to retouch your picture as much as you want (increase contrast, add some neat filters…). It is also a great way to demonstrate your Photoshop/design skills.

The design

Design is very very very important even if you are a back-end developer. There are basically two options:

  1. The first one is to create an effective design without too much fancy details.
  2. The second way is to create a trendy design which will be much more eye-catching and demonstrate that you are up-to-date with technology. The disadvantage is that you need to be careful and may need to redesign your website in a few months or a year.

Quick tips and common mistakes

Web design

  • Use no more than 3 colours: one for the background, one for the text and one for the headers and links.
    In my site I use white as the background, black as the text and blue for the headers and links. I have a pattern textured background using black and blue variations outside the “canvas” to provide a modern look.
  • Don’t mix squared and rounded corners if you are not sure. Same goes for solid and gradient backgrounds.
  • Keep element spacing even: set a standard separation of 10px or 20px and apply it whenever possible. Same goes for font sizes and text leading.

The Front-End

  • Your website is part of your portfolio, and a great way to show your coding and semantic SEO skills. Do it the best you can and keep it improving when you get the chance or come with new ideas.
  • Attention to detail
    Try to keep everything as perfect as possible without cluttering the page with useless crap. Customize your own 404 and JS disabled messages and add some funny details to your page to give it a warm touch. Maybe have your last tweet printed there or a cool jQuery effect. In my case, when you put the mouse over my picture, it says “Hi, it’s me!“. It is completely useless but some people appreciate these little Easter eggs.

Simple usability testing

Once you have finished with the mockups or a quite decent wireframe, get some real people and have them do the test.

Although your target users may probably be agency recruiters and CTOs, you should test the usability of your site with people from different sex, age and profession. The easiest way is to get one of your parents/sons, your brother and another friend.

Some useful questions are:

  1. Can you find a way to contact me?
  2. Can you download my CV?
  3. Tell me one of the recent projects I have been working on.
  4. Go to my LinkedIn profile and connect with me.

All of these questions should be answered in less than 10 seconds. Expect unfamiliar users to take longer than what you would consider usual. This simple test should take no longer than 10 minutes.

Your Curriculum Vitae

The most important thing you need to know: the traditional resume structure does NOT work for web developers.

Now that you know that, get yourself a whole day, weekend or so and start creating it from scratch.

Structure the CV in order of relevance to the reader:

  1. Programming languages, Software and Skills
  2. Professional Experience
  3. Professional Awards/Goals
  4. Education
  5. References

Do not add a picture of yourself in the CV. Do not write your age, it is not relevant at all and some people (non experts) may disregard you just because of being too young or too old. Keep it improving, correcting and adding things you learn from interviews.

Interviews

Won’t talk much about the typical things you need to do, but think this is necessary to highlight:

  • Your first interviews are going to go wrong. Don’t doubt about it. You are used to design, program and document under strict stressful deadlines during non-stop 12 hours in front of a computer, not to explain your career randomly to a stranger that asks questions. With this in mind, go to the interview to practice your convincing skills. Once you get out of there, note down every time you struggled and why. Try to correct it and improve it next time while searching your CV for leaks.
  • If you feel comfortable talking about something in special, write your CV in a way that you mention that but not everything of it, leaving the employer the possibility to ask questions on it.
  • If you get the same question again and again, add that information to the CV. If that doesn’t work, check if your CV is too long, an understandable reason why people won’t read it completely.
  • You do not need to wear a tie and a suit, but dress nice. In your future job you’ll be facing Mr. Keyboard, Ms. Mouse and the Screen twins so there is no need to be immaculately dressed. Although a minimum of decency is required. The most, the better.
  • First thing you should do when meeting your interviewer is to reward him with a sincere smile.
  • If you don’t know anything at all about something then just be extremely honest and say “No, I do not know anything about it”. Most of the employers expect and want you not to know everything but want you to have the willingness to be flexible and learn. Caution with this, you should just recur to this once in an interview, excess of doubt may get you disqualified.
  • Abstract questions suck. There are two types:
    • The typical ones: “What are your strengths and weaknesses?
    • The I-can-read-your-mind ones: “What would you take to a desert island: a fork, a tire or a guinea pig?” or “How do you put a giraffe in a fridge?“.

    Sadly, you will need to have an answer prepared for the typical ones. For the other ones, just try to be as abstract and unexpectable as possible. Focusing on being practical and not serious or dramatic.

  • Sleep well the night before an interview and eat an amazing breakfast the interview’s day.
    Interviews are exhausting and you need the better out of you to multi-task your words, emotions, body language and take mental notes on the interviewer, the interview itself and company/business details. A good rest and meal will improve your mood and positiveness.
  • You do not need to bring a printed portfolio if you have it online. Working for an Internet company that doesn’t have a laptop available for at least 10 minutes during your interview is not worth it in my honest opinion.
  • Be flexible with the interviewers, but not in excess. Or you will start the never-ending interviewing loop in which they require you to be interviewed by 5 different people on different days.

Additional notes

If you are not familiar with any of the terms used above, check my English Web Design definitions post or Google them right now! The terms I have used above are in no way complicated and every interviewer will expect you to know them. If they ask you a question about the DOM and you don’t know what that means, you are doomed.

Once you get your site up and running, advertise it! Paste your URL in your e-mail signatures, put it as a status message in your favourite chat services and add it to your Facebook, LinkedIn, Delicious, Twitter and other networks.

Post dedicated to Ahmed and Yaser, hope you find it useful :-)

Looking for cool gift ideas? TrendLiker.com lists hundreds of nice items and lets you know when they go on sale on Amazon.

Did you enjoy this article?

Grab me a coffee ☕

4 comments

  • Neal says:

    thanks ! It’s been 10 years that i design website, i use to leave company as soon as i’m bored and became an expert to fond new jobs, but after reading this, i am happy to see that i still have a lot to learn !

    Thanks again !

  • Xavi Author says:

    I received a very interesting question so I’m going to post it here:

    I recently came across this article and found it pretty helpful, thanks.

    However the second point you make is having your real name as the domain name. Now I think this is a good idea but wanted to talk about exceptions and if this would really effect potential clients.

    My name is not very memorable and I’m often asked how to spell it, because of this I decided to go with something the majority of friends call me and it’s easy.

    So my question is, would having my full name as the domain be detrimental to possible clients/recruiters? Or am I doing more harm by using this more casual name?

    I used to have “LuckyShot” when I was younger and started doing websites. One day when I started going more serious and looking for jobs at banks and stuff I had to change it to something more professional, the simple act of changing it and getting a new website made me lose a lot of freelance business since I lost a lot of mentions in forums and websites which where getting me client leads.

    That’s why I chose to use my name, it’s something that will always be and that I can later reuse if I ever decide to stop developing websites and become an astronaut (if I had chosen “Super Web Designs” as my personal website I would be stuck in that market).

    Another reason is to protect your name, imagine someone called the same as yourself would get the domain name and start posting about being a porn actor (nothing wrong with it though), but recruiters searching your name would think you are a porn actor haha

    There’s no problem using your nickname, just make sure your website shows up first when googling for your real name (this can be done by mentioning it in your meta description, heading 2… doing a bit of SEO) and that it’s something you’ll be happy in 10 years when you are a senior in your specialty and hopefully the boss of a big company.

    Hope it helps clear your doubts :)

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.


/*Twitter*/ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); /*Facebook (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=28624667607";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));*/ /*Google+*/ window.___gcfg = {lang: 'en-GB'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
Airbnb 25€ discount