Youtube Facebook Twitter Deviantart My feed Feed directly to your inbox

6 Web design mistakes that I won’t make… again

6 Web design mistakes that I won’t make… again
Choose your language / Elige tu idioma:englishespañol

Some time ago I announced about the redesign of SOSFactory, my corporative web. It was designed 6 years ago, when I still had no idea about web design. The current design (SOSFactory V1) has been profitable but it has restricted me in many aspects. It´s an involuntary but systematic attempt to break every principle of design.

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.

SOSFactory Versión2

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.

Alexa Rank SOSFactory

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:

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.

Evolución logotipo SOSFactory

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.

Sosfactory Header

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!

This post was written by:

- who has written 96 posts on SOSFactory Blog.

My name’s Sergio Ordoñez I´m illustrator, graphic and web designer. A selection of my work is included at SOSFactory. If you want to support this blog, please be an active member: tweet the posts, participate in the discussions and the exercises :)

Contact the author

  • http://www.bryan-kun.deviantart.com Bryan G. C.

    It’s nice to see you evolving. When I discovered the site it was still the first version, without any intention of doing the new one. I can’t remember, but it was around 2008 :)

    If you have any time, please visit my DeviantArt page and leave a comment. I know just ten pictures won’t do any good, but I’m doing new things right now, moving on :D

    • http://www.sosfactory.com/blog Sergio Ordonez

      Looks good but obviously you need to keep practicing to improve and go to the next level.

  • http://hrangue.com Hrangue

    I’m learning from making many of the same mistakes myself. I’m at a turning point where I can still make changes though. I would show people and they’d like my site, but they’d think… what does this have to do with me? I ended up making a blog portfolio (separately… http://www.anthonywilsonjr.com ) because it would take me too long to figure out how I want to do my original site. It’s only through recent coursework in studying user experience (UX) that I became aware of these pitfalls.

    I’m a student and now that my semester is over, I’ll have the time on my hands to get a solid direction. Everything you’ve said is right on the money. I’m glad I saw your tweet. Thanks.

    • http://www.sosfactory.com/blog Sergio Ordonez

      This was exactly my problem. Since I had no experience designing websites I have been working on this redesign for years, I did dozens of designs but as soon as I finished one I felt it was not good enough and back to the starting point. The good is I learnt a lot, the bad is I used a bad design for a very long time. Hopefully my portfolio was improving and I got work enough but it have been a pain.

      My suggestion is you put all your efforts on designing your first version, publish it and start over and over until you are satisfied. Actually this was the very early SOSFactory version, as you can see I don´t even knew the difference between an email and a domain name (I wrote “www.sergitosuanez@hotmail…”!)

      Cheers!

  • OcasoProtal

    One mistake that you still make: You use acute accent “´” instead of apostrophe “‘”
    That’s just plain ugly! Blergh!

  • http://www.tshirt-factory.com Adrian

    Wow….congrats for the new version, who look very neat and professional.

  • javier hernandez

    felicitaciones, una vez mas, nos sigues enseyando, aun lado el corazon, que venga la razon!!, que bien sergio, muchas gracias, eso vision empresarial

  • La Antorcha

    Muy buen articulo! La verdad q es grato ver como estas llevando el rediseño a cabo para saber que ‘errores’ no cometer.

    Un abrazo desde argentina.

  • OcasoProtal

    6. (or is actual 7.? I see 5. twice? Weird) I don’t accept criticism!

    My comment about apostrophe vs. Acute accent was moderated away? Why? IMHO it is a strong point? A webdesigner who has no (basic) knowledge about typography isn’t wort a dollar.

    Otherwise this is a really nice article.

    • http://www.sosfactory.com Sergio Ordonez

      Thanks a lot for the corrections, Anita translate my posts because my English is not too good, and she do it almost for free, you are welcome to contribute. The previous comment was classified like spam (fixed).

      • OcasoProtal

        Ahh, ok, then sorry. I didn’t want to sound harsh.

        BTW: Your comic style banners look really good!

  • http://www.cquence-a.com Andrey

    Nice post, Sergio. It’s a timely redesign, your current design is not very attractive. I like the new one, will be sure to check it out when It’s ready.

  • Bruno

    felicidades, muy profesional el rediseño….

  • http://twitter.com/ruleo_clothing ruleo

    Well, I can say from a teachers view; you have come along way with your web design. Just remember as an artist/designer you need to keep up with every trend and know how to do it, but that doesn’t mean you have to do it. I tell my students all the time, you must know your audience and you must know what they need and not what they want. I’m not sure if that makes any sense. Well good luck to you and keep up the good work :)
    - Ladie Sevon
    Owner | Artist
    RuLeo Clothing (TM)

  • Iosef Poe

    sergitosuanez,Excelente tu talento! y felicitaciones por tu evolución… he aprendido aún más viendo (y leyendo) acerca de ti, soy diseñador gráfico junior y desde niño he dibujado,
    ahora puedo colorear en PSD y otros software y me has dado grandes nociones sobre como hacerlo… ¡genial!
    EN HORA BUENA TIO

  • Elwever

    Sergio, tu pagina “vieja” todavia esta online, no esta la nueva :S

    • http://www.sosfactory.com/blog Sergio Ordonez

      Me parece que no entendiste el post, es un rediseño in progress!

  • http://twitter.com/dianah86 Diana Hernandez

    Me encanta el nuevo diseño de tu portafolio,muy profesional, y sobre todo el como destacan los diseños, layout, etc.por cierto, qué significa tu nuevo logotipo? y fue más difícil hacer el código ya que mencionas PHP, Ajax, que aún no sé mucho de eso. Por otro lado, tb me gustaba el diseño anterior, pq es dinámico aunq como mencionas nada de usablidiad

    Yo aún trabajo en mi primera versión :P , y es muy bueno saber todo esto, para no cometer los mismos errores, asi como tú, mi meta es enfocarme más en el diseño que la estética artística, es decir que sea funcional.

    Diana.

    • http://www.sosfactory.com Sergio Ordonez

      Gracias Diana,

      el logotipo hace referencia al acrónimo SOS (con subrayado superior), sólo que en este caso el subrayado en lugar de ser recto es irregular, haciendo referencia a cualquier tipo de accidente. Por otro lado hace el logotipo más interesante.

      De la parte de Ajax y Java se encarga mi primo, que es un crack. En cualquier siempre puedes usar elementos ya diseñados bastante fáciles de aplicar sin necesidad de meterte muy de lleno.

      Suerte con tu diseño!

  • Slaton A

    Great post! It’s really cool to see your progression based on your own business experience. I work in web design and I can tell you your thinking is correct. A really great resource is Don’t Make Me Think, a book by Steve Krug on usability. Past that, I’d recommend some click-tracking analytics packages that let you see a heat-map of where people click. What to you looks like an icon may look like a button to many frustrated visitors.

  • http://www.nitch.co.za Derek Jansen

    I think that point number 1 is particularly poignant – it is essential that you get to know your client and their industry. Without this insider knowledge you simply cannot design a site to meet their specific needs.

  • Pingback: Solving design problems: uniqueness | SOSFactory Blog

  • http://profiles.google.com/angel80y7 Ángel Navarro Baeza

    Hola Sergio, sigo este blog desde hace tiempo y admiro tu trabajo, ¡es excelente!. Tengo algunas dudas: cuando diseñas una web ¿en el diseño va incluido algo de programación o eso ya queda fuera de tu trabajo? ¿diseñas desde cero o utilizas alguna página, portal, etc. como base?

    Enhorabuena por tu blog.
    Saludos.

    • http://www.sosfactory.com/blog Sergio Ordonez

      Hola Ángel, todo depende de lo que necesite el cliente y de su presupuesto. No tengo conocimientos de programación pero hace poco mi primo se ha incorporado a SOSFactory, todavía está un poco verde pero aprende rápido, en el futuro haremos de todo.

      Normalmente diseño desde cero, aunque uso como referencia trabajos anteriores.

      • http://profiles.google.com/angel80y7 Ángel Navarro Baeza

        Muchas gracias por la aclaración.

        Saludos desde Sevilla.

  • Cesar

    Hola Sergio, antes que nada muchisimas gracias por la informacion que proporcionas para todos nosotros.  Tus trabajos son impresionantes!  Tengo entendido que utilizas Dreamweaver para tus diseños Web y mencionas que has utilizado CSS, PHP, Javascript etc para la nueva version de tu pagina.  Que tanto experiencia es necessaria, usuando estos tipos de lenguajes de web, para crear una pagina?  Por ahora conosco un poco de HTML y absolutamente nada de Javascript o CSS.  Que es tu recomendacion tocante que lenguaje apreder, cuando de ello aprenderlo y acual seria el mejor en empesar a aprender?  Algun sitio de internet que puedas recomendar? 

    Cesar

    • http://www.sosfactory.com/blog Sergio Ordonez

      Domino HTML y CSS, de PHP y Java sé muy poquito, lo mínimo para echar a andar un script que me permita por ejemplo validar un formulario de contacto. Por suerte en la web puedes encontrar código gratis que te sirve para la mayoría de tareas simples.

      Deberías empezar con CSS, es muy asequible y se complementa con HTML, es lo mínimo que necesitas para diseñar una web sencilla.

      ¿Dónde aprender? Pues es cuestión de practicar y acudir a Google para consultas puntuales, sobretodo a la hora de arreglar bugs en determinados navegadores.

      Saludos!

      • Cesar

        Muchas Gracias por la informacion.

  • F.David Carter

    Hi Sergio.

    I visited your site for the first time just recently, via your excellent “60 cartoon character Illustration Tutorials” hotlink posted at tshirt-factory.com. Really great tutorial by the way, I learned a lot from it.

    I think your site re-design is coming along really good, I like every aspect of the new site (especially the color scheme) except your new “S,O.S Factory” text. It looks good, no doubt about it, but in my opinion, it doesn’t say “artist” to me, it says “corporate”.

    I think the self-caricature of yourself at the top of the page complements the whole page nicely, but in my opinion, with your dynamic drawing style, a company logo that captures the essence of what you do best would be a much better fit style-wise to your new page. Maybe the information you have about yourself in the space between your new logo and your artwork at the top of the page could be made larger too.

    Hey definitely don’t be offended by any of my critiques, these are just my opinions on one single aspect of your new page, I think your portfolio is really great, and I wish you much success in the future.

    • http://www.sosfactory.com/blog Sergio Ordonez

      Thanks a lot for the feedback David :)
      The thing is I’m aiming for a more corporate sort of client, I’m targeting design agencies instead individuals with low budgets and low design culture.I don’t want to be perceived like a comic artist, it’s because I’m going away from eyecandy style… I think the logo is the paradigm of this redesign.

      Cheers!

  • http://www.facebook.com/azhari.subroto Azhari Subroto

    a few months ago I saw your homepage http://sosfactory,com, and I ask to my self…” why professional artist like you still use flash in your site?”
    now you’ve did your best…

    • http://www.sosfactory.com/blog Sergio Ordonez

      The use of Flash is not a problem, the problem is I was using it in a wrong way.

  • http://www.facebook.com/profile.php?id=100001717736633 Wang Newton

    Thank you very much for sharing your knowledge.
     Being as open as you are with your “secrets” says a great deal about you as a person.
    You are very inspiring to a great many people.
    Keep up the great work!

  • Carlitosvillas

    Grande Sergio, no hay nada mejor que usar tu propia trayectoria como ejemplo.

  • web design

    Nice sharing.I enjoyed reading this post.You shared few basic mistakes that businesses
    must avoid while working on web site design projects to be successful.A website
    design mistake directly affects your customer relationship and can have a
    negative impact upon your business.Thank you so much for this fine piece of quality content.

  • Zee

    Nice article and great to see you’re not ashamed to show the awesome evolution you’ve produced :)