Vitor Marcellino

CAD System website layout

By Vitor Marcellino

   on Nov 30, 2010
12 Reviews2 Votes0 Favorites663 Views

Concept Reviews

  • Alex Colina

    Alex Colina

    Rank: 1 Elite

    7088

    • Design: 5
    • Purpose: 1
    • Originality: 1
    • Engagement: 4
    4 Votes
    This review has been awarded.
    Excellent but boring

    Posted on Nov 30, 2010 at 3:58 PM

    There is absolutely nothing wrong with this design (aside from the tiny alignment issue mentioned by others) it is clean, very professional and well balanced.

    There is also nothing good..actually I mean nothing interesting memorable or compelling. the raised paper effect and the hand drawn arrow are fantastic but overall it feel blah. Which is weird because again, it is a good clear composition that communicates well and leaves no doubt as to what they want me to know here: CAD is easy fast and secure, there is a testimonial, incredible clients and contact info right there.

    Soooo what to do? first of all do not mess with it too much in fact leave it the same but add detail and rethink the typography. make the 1,2,3 circles more interesting for example. try another font for the headings something modern like HelveticaNue and use bigger font sizes perhaps.

    You might want to experiment with a very very light gray for the top, or a thin band of red at top to anchor the design better, but that is messing with your design which I think is very good

    When I first saw this design I left. Could not review it. It was just good but unimpressive. I am glad I came back to it because in reviewing it I learned something myself.

    • Amado Ohland
      Amado Ohland commented:
      Posted: on Dec 01, 2010 at 7:53 AM

      Yeah typography. But not Helvetica. Existing design has body-text in Arial, which is the bastard child of Helvetica... so Helvetica would not be a strong enough contrast. Consider an elegant slab-serif such as (see http://www.squidspot.com/PeriodicTableofTypefaces/PeriodicTableofTypefaces_large.jpg) Egyptian, Clarendon, Ionic No 5, or Swift.

      (I like Swift. Or, something similar for FREE and available as an @font-face kit, http://www.fontsquirrel.com/fonts/Charis-SIL)

      Use it for titles and heading, and definitely leave the body text alone. So, try it on the yellow Lorum Ipsum Dolor, and the Depoimentos De Clientes, "Conheca A...", Simples-Rapides-Seguro, and Fale Conosco. Try it (Charis Sil) in Regular and in Bold. If you hate it, take it out and forget it.

      If you're concerned about using a non-"web-safe" font in your design, do a Google search on @font-face kits.

      The idea of punching up the (1), (2), (3) graphics is a good one.

      Proceed carefully. If you go too far you may unbalance a good design. But the right Slab-Serif font (I really want to see it with Charis Sil now! Just to see...) could add the visual interest that is lacking without destroying the elegant/sedate/professional overall look.

    • Alex Colina
      Alex Colina commented:
      Posted: on Dec 01, 2010 at 8:09 AM

      Hevetica Neu is the sophisticated cousin of helvetica! ha ha ha (still a bastard but a fun bastard! ha ha ha)

      but I agree with Amado, go for contrast but keep in mind the weight of the font. Your current design relies on the "color" that the relatively thin font you are using imparts on the balance of the page. Charis-SIL is lovely but it is quite "darker" (its fatter) You could compensate by using grey instead of black. but do experiment with serifs.

    • Alex Colina
      Alex Colina commented:
      Posted: on Dec 01, 2010 at 8:19 AM

      Museo-Slab 300...its delicious font I found thanks to Amado's link (Fontsquirrel rocks!) Museo-slab 300 It is not free but it's beauty (Museo-Slab 500 is free but a bit heavy)

    • Vitor Marcellino
      Vitor Marcellino commented:
      Posted: on Dec 01, 2010 at 9:06 AM

      Hey guys, many thanks for your comments. I'll take a look at some nice fonts, and as soon as I found one that fit the layout i'll post it here :)

    • Amado Ohland
      Amado Ohland commented:
      Posted: on Dec 01, 2010 at 11:33 AM

      Helvetica Neue isn't a bastard at all -- it's Helvetica, all dressed up and ready for the real world!

      All I was saying is that if you're going for contrast, and web-safe Arial is your body-text, Helvetica Neue isn't the choice -- the most it might do is make your body-text font look the bastard child that it is. Much more likely that it wouldn't be a noticeable contrast at all.

      Good luck experimenting with fonts! (I wanted to use Charis-SIL on something today, but couldn't for some reason, and used Minion Pro instead. Try that one if you can, but I don't have an open-license equivalent to recommend to you.)

    • Alex Colina
      Alex Colina commented:
      Posted: on Dec 01, 2010 at 12:05 PM

      You are right Amado. Helvetica Neue is nice but it would not offer contrast. In trying to be funny I did not make it clear that I completely agree with the typography contrast idea you suggested. Cheers!

    • Jamie Linder
      Jamie Linder commented:
      Posted: on Dec 07, 2010 at 11:06 PM

      Okay kids ;) Quit milking mice and leave poor ol' Helvetica alone for now. I think Alex's review is spot on. Excellent but boring. Some ideas will be to try playing more with the color palette, rearranging the grid, leveraging more graphics and icons, focus on eye movement (its very left heavy then just abruptly ends). Least of all my concerns are Heletica ;)

  • Amado Ohland

    Amado Ohland

    Rank: 2 Titan

    1069

    • Design: 3
    • Purpose: 3
    • Originality: 2
    • Engagement: 4
    2 Votes
    a little: Alignment, maybe Contrast

    Posted on Nov 30, 2010 at 7:44 AM

    As sedate, corporate, professional home-page designs go, this one is pretty good. I do wonder about what the interior pages are going to look like; if this page were going to present me with a large-ish block of text somewhere (e.g. a news story, a blog post, an "About Us" page), I wonder how you would change the layout for that kind of content. But never mind, I'll focus on what you have here.

    You do some good things here with alignment, and it's mostly spot-on, but there are a few places where it is not. I'm looking mostly at extreme left edge and extreme right edge, but there are some elements in the middle too.

    For example: the "vertical line" which should run from the left edge of the logo, then "Lorem Ipsum Dolor", then the left edge of the box around "Simples, Rapido, Seguro", then the left edge of the soft lines above/below the 5 related logos, then the "Pagina Inicial" in the footer-menu --- it should run straight, and it weaves a little.

    In the middle you nicely line up the left edge of "Fale Conosco" with "3 Seguro" (and its block of text) above it; good! But the right edge of "Contacto" in the main(top)menu breaks the right-edge vertical alignment created by the... gah, I'll just upload a file.

    Little, little stuff.

    The only other thing I would say is about Contrast; you're using good contrast in size and color, but (perhaps intentionally?) taking little advantage of opportunities to contrast by font (or even font-weight). Would your Headings be even more obviously heading like if they were Arial Bold? Arial Black even? Or, a contrasting Display font, something perhaps with Serifs in a Modern or Slab-Serif? Perhaps that would break this design, and make it less professional and sedate (you certainly aren't sedate with that red color!). So, that's something to play with, but not a major objection.

    I assume you can't change the logo, which is a shame; the letters are too similar to Arial, or not similar enough. (Not that I'm a huge fan of Arial, but it's what we've got.)

    For the most part, better work than I know how to critique properly. The red's a challenge, but you've dealt with it fine. Good work.

    • a35c32fb-b675-40cc-9505-73b57927acb6.jpg
    • Vitor Marcellino
      Vitor Marcellino commented:
      Posted: on Nov 30, 2010 at 4:03 PM

      Hey Amado, I fixed the alignment, it looks better now. Thanks for your comment, really appreciated!

  • Aaran Casey

    Aaran Casey

    Rank: 1 Elite

    22778

    • Design: 4
    • Purpose: 4
    • Originality: 3
    • Engagement: 3
    2 Votes
    I quite like it

    Posted on Nov 30, 2010 at 12:14 PM

    Vitor

    This is a simple and very nicely done design, the colors work very well. I like the slanted lines in the red of the header (nice texture add)...

    MY only comment would be to keep the content area to 960, I have attached the image so that you can see how the 960 x12 grid works, these templates can be downloaded from 960.org.

    Overall the colors, the simplicity of the logo and amount of white space is all equal - Great Job!

    • vitor.png
    • Vitor Marcellino
      Vitor Marcellino commented:
      Posted: on Nov 30, 2010 at 4:03 PM

      Hey my friend, just changed the alignment. I think it`s better now :)

    • Aaran Casey
      Aaran Casey commented:
      Posted: on Nov 30, 2010 at 4:05 PM

      Yep that's looking good, you should always keep the original file in here, so that other reviewers can see the progression!

  • Oksana

    Oksana

    Rank: 2 Titan

    426

    • Design: 4
    • Purpose: 3
    • Originality: 2
    • Engagement: 4
    1 Vote
    I like it :) but...

    Posted on Nov 30, 2010 at 3:43 PM

    Hi there!

    I like it! it is nice, it is simple, and it is a lot of text!!!!!! As for me, I don't like to read, if you want me to - blend some picture somewhere...

    Menu...Red is very strong, you already have so much of it, not sure about using it in the navigation bar.

    But I like it! It is kind of WordPress theme-ish...

    Good luck! :)

  • Ferdy Christant

    Ferdy Christant

    Rank: 2 Titan

    1380

    • Design: 4
    • Purpose: 3
    • Originality: 3
    • Engagement: 3
    1 Vote
    Draft

    Posted on Nov 30, 2010 at 8:25 AM

    I like it. the styling and layout look professional and consistent with a proper use of white space. Content-wise, important elements are there, such as a client recommendation, a list of previous clients and an immediate way to contact you. All elements that deliver trust.

    The only thing I am not too fond of is the color scheme and balance. It seems too much attention is drawn to the header and footer, whilst I feel the actual content should matter more.

  • Athena Thomas

    Athena Thomas

    Rank: 2 Titan

    396

    • Design: 2
    • Purpose: 2
    • Originality: 2
    • Engagement: 2
    1 Vote
    look

    Posted on Nov 30, 2010 at 9:40 PM

    I like the layout but it seems a bit boring. It looks more like a site for a non-profit organization than a system development company. I like the colors but you should add some pictures.

  • Prashant Dubey

    Prashant Dubey

    Rank: 1 Elite

    3099

    • Design: 5
    • Purpose: 3
    • Originality: 4
    • Engagement: 4
    1 Vote
    Vitor, my feedback is here...

    Posted on Dec 01, 2010 at 12:47 AM

    Hi

    Well, at first glance, looks great, neat and clean with well differentiated sections using color contrast, which is very good and smart!

    Now, by the name and little description :-) you mentioned, I could make out its highly technology oriented, in CAD and stuff, hence, following are my suggestions:

    1. Try putting a wireframe 3D model or system diagram on top red area. Right now, lacks visuals, which is very much needed.

    2. Consider putting a flash movie clip in the same areas mentioned above in pt 1 for developing and showcasing some interesting stuff...

    3. I didn't see any difference in two images, except that they are aligned differently. I don't know... :-)

    4. Consider putting white background and keeping the steps box as it is, would really bring in some depth in your page.

    5. I think use of systems related 3D icons can definately uplift the image of the home page, specially for representing the contents. Instead of very plain text...

    Well, these are my suggestions, hope you find it crisp and useful :-))

    Wish you all the best,

    cheers prashant

  • Michelangelo Cremona

    Michelangelo Cremona

    Rank: 2 Titan

    773

    • Design: 3
    • Purpose: 3
    • Originality: 1
    • Engagement: 1
    1 Vote
    A simple color

    Posted on Dec 01, 2010 at 12:32 PM

    Color is easy, simple but not of great impact, I get static and unconvincing to persuade users to use your service you give. Well I see it differently this Page Image is a little more 'lively maybe give a little more' movement with the slogan, where there are yellow buttons that contrast earnestly strive for the rest of the layout. In devinitiva Wed I think that this is only my vision of choice in color scale, the kind that I'm about to upload. That's it, I'm sorry if I use google translator, I hope that my view can give you good indication for you. Good Job!

    • color_layout.png
    • Ionut Resetar
      Ionut Resetar commented:
      Posted: on Dec 02, 2010 at 8:15 AM

      Man ... I hope google makes google translate better fast, because most of the times it looks like Michelangelo knows what he is talking about but I just don't understand what he is trying to communicate :D, all I get now is something about the colors, of course the image helped a lot :))).

  • Eloy Munoz

    Eloy Munoz

    Rank: 2 Titan

    443

    • Design: 3
    • Purpose: 4
    • Originality: 2
    • Engagement: 3
    0 Votes
    Maybe an image

    Posted on Dec 09, 2010 at 3:20 PM

    Hello Vitor,

    I see why a lot of people are saying that the design is boring but maybe their comments are distracting you from the correct art direction.

    I guess this site needs to be used (and approved) by your client and a simple, "boring", corporative design might fit just fine with what they want.

    I really think the design works out if it is on the line of your client briefing.

    Three things I might add to improve the current design:

    • As someone else's said. Add a picture, take away the copy on the white layer at the top element and use a picture, something that give some contrast to site.
    • The call to action in the two buttons cant be easily read, change the color for better contrast.
    • The red footer is too prominent, just make it 50% tall and see how it looks like.

    In my opinion you don't even need to find different fonts for dragging attention here, maybe just make the headings on the three steps bolder (as well as the background on the numbers).

    I like better the new alignment too.

  • Michael Rawlins

    Michael Rawlins

    Rank: 1 Elite

    CF Verified professional

    18059

    • Design: 3
    • Purpose: 3
    • Originality: 3
    • Engagement: 3
    0 Votes
    Good Landing Page Layout...

    Posted on Dec 10, 2010 at 11:13 PM

    This landing page is very strong.

    1. Action buttons - Make certain font color is darker (make sure there is enough contrast for quick readability).
    2. Center section fonts are too light
    3. Good icons (helps layout)
    4. Good footer design...

    Great start.

  • Amr Mohsen

    Amr Mohsen

    Rank: 2 Titan

    1065

    • Design: 3
    • Purpose: 4
    • Originality: 3
    • Engagement: 3
    0 Votes
    really plain

    Posted on Dec 18, 2010 at 9:42 PM

    nothing catchy , try some photo or any visual elements behind the navigation bar

  • Imran Mulla

    Imran Mulla

    Rank: 2 Titan

    164

    • Design: 3
    • Purpose: 3
    • Originality: 3
    • Engagement: 2
    0 Votes
    best

    Posted on Dec 24, 2010 at 12:45 AM

    nice corporate layout