I will post images in a daily basis so you can follow the progress of the whole project: illustration, logo design and web design. I invite you to join the project, you can post your feedback or just ask any question you have.

Step 1: planning the page

Before starting to draw I do a quick sketch to plain everything, so I can figure how much room to play I have.

The page is going to be pretty simple, as you can see, just an illustration on the left and a login form in the right, the goal is increasing the conversion rate.

Step 2: sketching the illustration

En este paso uso prácticamente todo lo que tengo a mano para componer la ilustración, desde fotos a antiguos bocetos. Cuando estoy contento con la composición me dedico a limpiar y retocar las lineas hasta que consigo una base sobre la que trabajar.

Step 3: inking in Photoshop

I have explained the inking process a hundred of times so let’s go ahead, I just will post some images giving you some useful tips.

Step 3: coloring the illustration in Photoshop

Coming Soon!!

And remember, if you want to contribute just share this post in your Facebook or Twitter!

In the meantime, there were some other redesigns, but none of them came out. I made a big mistake: I wasn´t clear about the reasons for the redesign.

But this time it´s definitive, at the beginning of the year SOSFactory V2 will finally see the light. I´ll tell you the main reasons for the redesign:

1.- I didn´t know the clients, I designed for myself.

When I designed SOSFactory my skills were quite limited. So I designed my web considering my tastes as an user. It was created by an artist, not by a designer.

The problem of this philosophy is it attracts one type of clients characterised by their low chances of success in their projects, regardless of their budgets. This kind of client makes decisions with the heart instead of with the head. No ofense, all of them were great to work with but a big percent of these projects never will be even started, obviously it doesn´t help to promote my services.

Now I do know my clients.

However, every corner of this new version is aimed at the client. Moreover, at a very specific type of client. My objective is to recycle my clients educating them, both directly (by articles and tutorials) and indirectly (acting as a model). And maybe to reach some other clients who appreciate communication strategies above visual impact. I mean, clients who put the reason before the heart.

The objective is to get a good portfolio of successful clients vs portfolio of profitable clients.

2.- I didn´t know my own needs.

Since I didn´t know my clients, I didn´t realise my own needs. SOSFactory V1 main page is a reflection of this fact, it´s just useless. I don´t need such a big news area, neither I need a welcome message, nor those links to my tutorials… everything randomly laid out.

Now I do know my own needs.

SOSFactory V2 is hierarchical. All the elements are distributed according to its relevance. My priority was design above illustration. Every decision has been taken in order to reach these 2 main tasks:

Improve my conversion rate:

1. Show my work in the most quick and effective way.
2. If the client decides to hire me, he has to find a quick way to do it.
3. If the client has doubts, I must offer him some reasons to decide.
4. It he finally doesn´t, at least he should enjoy the web and remember me.

Attract my target clients:

1. I want to attract a medium-high profile client: design agencies, big corporations, enterprising entrepreneurs with successful projects…

3.- I denied the social side of my job.

At first, I thought a blog would only distract the clients from buying. In fact, I had two different webs: On one hand SOSFactory, my portfolio, on the other hand SOSNewbie, which was my blog, rather a personal than a professional project.

Integrating my blog and my porfolio in just one domain is one of the best decisions I have ever taken since it increased my presence in the net.

Now I understand that the social side is the key.

This step made me understand how important the social factor is in the Internet. So I´m currently very active in the following networks:

• Facebook
• Twitter
• Youtube
• Deviantart

The new SOSFactory takes social networks into account. The objective is to improve my social support to improve my brand image. These are secondary objectives, but they´re quite important anyway:

1. Keep the users (clients or designers) well informed about possible events, thanks to the up-to-date news.
2. Offer resources to my users, through my articles, tutorials or my Youtube videos.
3. Promote my profile in social networks.
4. Promote my passive income by selling stock designs or premium tutorials.

4.- I didn´t have an identity.

Since I didn´t know my market, or my audience, I didn´t understand my needs, so I could´t have a corporative identity.

In time, I know myself better.

Now I know my own identity, I need a web which reflects my way to interact with the world:

• I´m a businessman more than an artist.
• I achieve my goals, in a simple and funny way.
• I´m a perfectionist, practical, modest and open-natured.
• I´m generous, my success depends on my clients´ success, and the success of everyone who interacts honestly with me.
• I offer good quality service which is worth a decent remuneration.
• I´m honest and I demand the same in exchange.
• I don´t need everybody to like me.
• I believe in hard work above talent.
• I believe in intelligence above aesthetics.
• I believe in facts above words.

5.- I was breaking all the basic rules about usability.

This was the weakest point in SOSFactory V1, I have a brilliant set of utterly silly decisions in this area:

• Instead of emphasizing my logo, y gave priority to this kind of "space" button with links to secondary parts of my web.
• Another epic mistake was using Flash for the navigation bar, just to add some animation and sound, because that was cool!
• The container is optimized for 800x600px resolution, so the content looks too compressed and the text is hard to read.
• The texts are corporative texts, quite generic, so they don´t reflect my personality.
• There is no room to display big images.
• … we could go on and on.

Now I know the basics about usability.

Even though I´m not an expert in this area, it´s one of the aspects of design I enjoy the most. I´m following some interesting blogs about usability, and I think I´ve improved quite a lot in this area.

Everything must be where it has to be, and if it´s not, just change it.

6.- I chose the wrong technology.

As a noob I was, I limited to use what I knew. I used plain HTML with some Flash touches. Templates are restrictive about the design, and the management takes quite long. Each change has to be done page by page.

My new web will be flexible and easy to manage.

It´s created with style sheets (CSS) + HTML, each element of the design is cut in different PHP files. I gain flexibility with this, it´s quicker to manage, and there are many more advantages. In addition, I have some Ajax touches to charge contents effectively as well as Javascript to make changes on the interface.

Final thoughts

The key to build a good website is the intentionality, every small choice must be oriented to a goal, in my case it was atrackting a different kind of client. But before you must know yourself and your market, so you can create the right enviroment, with the right tools.

In the next post I will disclose all the reasoning behind my choices.
And hopefully SOSFactory V2 will be online around middle January.

I hope you guys a great holidays, thanks a lot for your support!

If you’ve been following this blog, you should know how important it is to have an online portfolio if you want to live from your art. While you don’t have a website you simply don’t exist, and of course, people who don’t exist work very little.

In this post i’ll explain what you have to do to have your first website online. I wont talk about web design, for that there are thousands of tutorials and books.

Here you have the complete post index, if you want to skip some parts just click in the topic of your interest:

1. Choose a domain name
2. Hire web hosting
3. Check if your domain is available
4. Register your domain name
5. Point your domain name servers to your hosting account
6. Upload your website files to your server

1.- Choose a domain name

A domain is a name used to redirect Internet users to your website. For example, my domain is www.sosnewbie.com. It seems obvious, but finding a good domain name is a very important step and for that we need to ask this questions:

• Who is our audience?
• What’s our website’s objective?
• I want short ot large term results?
• What’s the vision and mission of mi website?

It’d be ideal to create a list of possible names, since many of them wont be available. Here you have a few recommendations:

Names easy to remember Short names are easier to remember and to write, although there are also long names easy to remember like dividebycero.com or whatsgoingoninyouhome.com

Related to your activity… or not. There are two sides, the ones that consider that your domain name should be related to your activity (ie: webdesign.com) and the ones that think you should create a brand (ie: sosfactory.com). In the first case you’ll have an advantage at the time of google ranking for the words design and web, but there are two problems: normally these domains are hard to find and since they are so generic it’s difficult to put them personality.

If you want to create a portfolio where the quantity is more important than the quality, and what you need is many clients of low budget, probably webdesign.com would be the best choice. I’d go for the second option, the creation of an independent brand, it’s much better in a long term.

Local vs International sales. If you plan on selling your designs in your city you can use something like madridwebdesign.com which will give you almost instantly rank one in Google for searches like “madrid web design”. As i said, this depends on your sales strategy. I personally prefer selling internationally since there are many potencial clients.

Extensions. It’s best if you use .com although i wouldn’t be bad to register also the .net and your country extension (.es in Spain).

Careful with special characters. For example the letter Ñ if you’re spanish, or the letter ß if you’re german. If you decide for a local market there’s no problem, but if you want to sell you design internationally, you’re automaticaly discarded.

Careful with the numbers, hyphens, abbreviations. Careful with numbers, when you say it orally it might lead to confusions (ie: adsl4u.com , adslfouryou.com or adslforyou.com or adslfouru.com…). Don’t use hyphens or abbreviatures.

Careful with pronunciation. If you plan to have international clients research how your domain sounds at least in english, and if there are similar words that can be a problem.

Careful with coincidences. Inverstigate the market, you can’t use a name for your business that another company is using already which makes the same activities that you do. They can sue you, and even take your domain.

Register all the possibilities related with your domain. This can be more expensive but it’s a lot better in a long term, you try to register your domain and all the possible variations that someone can write by mistake (ie: google.com, gogle.com, gooogle.com, gugle.com…).

2.- Hire web hosting

Web hosting is the physical place where your website is, every time someone visits your website, a server (a computer) will be in charge to show it. So imagine how important is to hire the services of a good hosting company.

If you look around the Internet, you’ll be crazy when you see the ammount of offers out there, thousands of companies fighting to sell their product. I have my websites netword hosted in Downtownhost.com and i love it, if you’re not very experienced, the most important at the time of hiring a good hosting is finding a company with a great customer service. If your website starts from zero, the cheapest hosting plan (5-8 US$ per year) will do for a while.

Don’t even think of going with mega-hosting-companies where you have to go through 4 different departments for anything. Also don’t use free hostings, they normally have lots of ads, are slow and barely professional.

If you decide to hire web hosting in Downtownhost.com
but you’re not an expert at english don’t worry, Jorge, the owner, also
speaks spanish and very kindly will help you through messenger.

Hiring your hosting isn’t too much of a mistery; you only need Paypal or a credit card and follow the instructions. At the end of the process you should recieve an email with your username and password to enter the control panel, and your name servers, we’ll see what they’re for later.

PS: Before hiring investigate in google about the company. You don’t want to end up with companies like HostingLMI o Fenixer that for a marital fight he left 4.000 clients for months (i was one of them) without tech service and without possibilities of recovering their domains… with sues, minors in the middle, ex-convicts… a spectacle worthy of a soap opera.

3.- Check if your domain is available

Ok, we’ve already hired our hosting and we have a list of possible domain names for our online portfolio, now we have to see which domains of that list are available. For that there are thousands of tools if you want to check if your domain is available… If it is, run to register it.

4.- Register your domain name

To register your domain there are two ways, one is to do it through your hosting company (not recommended, if you want to know why, read below) or through domain registering companies, i use Godaddy, if you don’t know english search for a domain registrar in your language in Google.

Registering a .com domain is about 10 US$ per year, the best is to buy it for several years, that way it’s cheaper… it also looks like Google takes that into account when ranking your website.

Registering a domain isn’t that complicated, you only need Paypal or a credit card and follow the indications. If everything goes well, you should recieve an email with your username and password to enter the administration panel of your domain (don’t confuse it with your hosting control panel, they’re different things).

***VERY IMPORTANT!!! many web hosting companies offer a free domain when hiring their services. Never use this domain for your business, Why?:

1. Generally they don’t let you access to the control panel of the domain, so for anything you have to go through the customer care service of the company… which can be annoying in some cases.
2. If it happens that you want to change the company because you’re not happy with their service, you’ll only have problems when trying to recover your domain name (ie: changing the name servers to your new hosting company).

You should take into account that registering a .com domain is only a few dollars, what is really expensive is the work that you’ll invest in it’s promotion. So it’s better to be the owner of your domain.

5.- Point the domain name servers to your hosting account

We already have a registered domain and a hosting account, next we have to tell the domain to point to our hosting account. This way, every time someone writes on the internet our domain name, they’ll see what we have in our server.

First we need to know the name servers of our hosting; generally they come in the confirmation email when you hire the service, they should be two, a primary and a secondary, something like ns1.domainname.com and ns2.domainname.com. If you have any doubts, you should contact your hosting company (that’s why the customer service is so important) and ask them directly.

Now we have to go to our domain’s control panel, depending on the registrar it may vary, what you have to do is looks how to change the domain name servers by default, y change them with yours ns1.domainname.com and ns2.domainname.com.

If everything went well, your domain should be pointing to your hosting account, now you have to upload your website to the server.

6.- Upload your website files to your server

To upload your files to the server you can do it via the Cpanel of your hosting account or better, you can upload them via a FTP client, which is a software.

There are hundreds of free and paid FTP softwares, i recommend you not to start with complicated programs at first. I use a very simple one called FlashFXP, which is paid.

To connect to your server you’ll need some information that should appear in the email they sent you:

• IP Address: address of your website. Something like: 209.62.60.132 or you can also put your domain name.
• Username.
• Password.

After you put all this data you should be able to connect to the server. If you take a look, it’s like browsing through your hard drive, you have to go to the folder /public_html/ and there’s where you have to upload your website files.

It’s very important that the main page of your site is called index.html.

And that’s it, i’ve tried to explain in the best possible way and as detailed as i can, if you have any problem or doubt write a comment and i’ll try to explain it to you

Click on the imagen if you want to see the Photoshop videotutorial to learn how to save for the web, the goal is saving with the best quality but the smaller size

Which is the file format I should use for the web? ¿JPG o GIF?

This is the proccess:

1. Save for web in Photoshop “ARCHIVE” menu
2. Choice JPG with 60% (for web we really dont need more quality)
3. We see how many kb´s have the image
4. Then we choice GIF and we go down with the number of colors until it starts to looks bad. 
5. See how many kb´s it is.
6. Depending on the weight of the file we choice our file format.

If you really want to save size when designing for web, the best is using Pixel art, notice we use just a few colors, so the file is really light… here is 2 examples:

PIXELART saved as Gif 64 colors = 8.976 kb

Standard image with JPG 60% quality=18.83kb

Ok, so you already have no excuses

 NOTE: the video textboxes are in spanish, this tutorial is not too complex so I think everybody will understand it. In the future I promise all the videos will be in english… sorry too much work doing 2 blogs (spanish and english) for just me.