evolvexmb — 2013-12-11T10:47:11-05:00 — #1
Please take the time to review my site http://www.webdesigncode.com
It's a simple portfolio web site showcasing some of the web design and development work I've done, and also a jQuery based contact form for potential clients to get in touch. Kept the design simple because that's usually what these type of sites are....
Comment on the design, the user interface, and the content... feel free to provide any suggestions.
technobear — 2013-12-11T11:50:47-05:00 — #2
The first thing that struck me is that your text at #888888 is far too pale to be easily legible against the pale grey background. A quick test suggests it needs to be at least #444444. I suggest you download the Colour Contrast Analyser, which will help you check. I also found that the texture in the background added to the difficulty of reading the text, as does the breaking of words across lines.
By comparison, your contact form feels very dark and heavy.
The brown background to the dropdowns seems out of keeping with the generally grey/blue theme to the site - but that's just my personal taste.
I rather think that this bit
percise, high quality work delivered in a timely fashion, with flexibility and ease for further development making our services desirable by customers
might not be conveying quite the image you were hoping for. Also, did you mean "optimized templates which converse to higher rankings", which is what you have, or "optimized templates which convert to higher rankings"?
I was confused by the first image in the section "Our Recent Work" - mainly because I didn't at first realise it was just an image and tried to work out what I was meant to do with it. Your other site visitors will, hopefully, be rather less dim, but I do think it would be helpful to have a few sentences of explanation about each project.
Sorry if that sounds rather negative, but I hope it helps.
xgibbousx — 2013-12-11T23:04:12-05:00 — #3
Very nice start!
I'm a big fan of one page designs due to their simplicity. I did the same thing with my web design portfolio <snip/>
I really like your logo. It's nice and big with a cool design. I like the code on the right in the background and the colors are simple and go well together.
I think each "Our Recent Work" image should link to its own slide show with multiple images from that project.
Definitely make the design responsive to show off what you're capable of. Since the site is so simple, you could probably remake it pretty fast using Twitter Bootstrap to get it nice and responsive.
It's a really nice and simple site and I think you should keep it that way. By the way, how's business going? Where are your clients coming from?
christiankomodo — 2013-12-12T13:44:03-05:00 — #4
My first impression of your site is very positive. It looks professional and is only in need of small changes in my opinion.
The first thing I would add would be a description of what the site is about. I thought it was an instruction site when I first saw it because it says "web, design, code!" Is that your company name? I would definitely have a line in there like "Full service web design and development firm" or something. And then maybe "We provide..." above the three boxes for "Front-End Development", etc. Happy Cog's website says right at the top: "We are Happy Cog -
We connect you to your audience through digital experiences that balance beauty and utility". It explains what they do. It's tough to think from your visitor's perspective sometimes since your company is so obvious to you of course, but a new visitor won't know all the basics.
Another small thing would be spacing - I would add some more padding in those boxes - a little more breathing room. So in the top three white boxes, I would add more spacing so the text is off the edges a bit more. And I would increase the line spacing to further relax those boxes so they don't look crowded. Just a little will probably be fine - in Firebug I increased it from 10px to 15px and maybe space out those <h2>s from the subheadings. For an example of great spacing, plenty of white-space and beautiful design I always look at Tiffany's website. It's a lesson in elegant spacing.
I need to mention the complexity of the background and the low contrast text on top of it, but I don't think it's as horrible as the other commenter here. As Dieter Rams and other masters have said, "design as little as possible". Especially since the trend nowadays is about simplicity and clean design. Don't put in any elements that aren't needed to enhance the design. For instance your background has a watercolor-paper texture and also angled stripes. Do you need both? Would it look just as good if not better with just the stripes? Or a more subtle texture? SubtlePatterns.com has a great collection of very clean, very nice textures that might give you that depth without making the text even the slightest bit difficult to read.
The word "contrast" comes up a lot as I look critically at your site. I bet if you made the lines of code behind the word "code" in your header graphic a different color, like a blue-grey perhaps, it would create some contrast that would make the word "code" on top of it come out more (notice I didn't use the cliche word "pop" Look at the word in the middle - "design". It's in nice bright white on top of a nice navy blue background. Very nice and clean and easy to read. How nice would it look if it had the unity that would be created if all three words had equal impact and legibility?
Overall I like it a lot - VERY nice considering it was designed and built by someone with only one website in their portfolio! Keep up the good work, I'm interested to see if you make any changes!
francky — 2013-12-12T21:25:22-05:00 — #5
The first thing ! saw was the rather central placed box:
"Valid HTML & CSS
validated W3C HTML5 and CSS3
are followed to build a rock-sol-
id, standards-compliant design
structure on all web site pages"
When I read this on a webdevelopers or webdesigners site, I always wonder if they have made a "selfie" before or after putting the site online. :shifty:
Personally, I should have done something with the hyphenation in the "rock-sol-id", which has cleaved the solid rock.
Then: "Responsive Layouts: flexible, scalable, responsive layouts for consumption of web site content on any device, including mobile, tablet, and desktop environments".
Sounds enormous, but:
- A quick Cntrl-Mouswheel for text-enlarging shows that the header text is breaking out of the background, and the text-boxes are giving white holes and break the design.
"Intuitive semantic coding: (...) make sites display properly across all major browsers (...)" - In Internet Explorer 8 the blue background of the logo is absent, shows Browsershots (Netrenderer shows the same).
"Instant load speed: avoid bloating up code by any means necessary with small size, quick-loading pages and fully table-less CSS coding to serve pages, fast"
The [[U]Yslow[/U] add-on (in [URL="http://getfirebug.com/"][U]Firebug[/U]](https://addons.mozilla.org/nl/firefox/addon/yslow/)) tells:
- Overall performance score: 75.
- Compress components with gzip. There are 7 plain text components that should be sent compressed.
- Use a Content Delivery Network (CDN). There are 33 static components that are not on CDN.
- Configure entity tags (ETags). There are 28 components with misconfigured ETags.
By accident my mouse touched one of the 3 white boxes under the header, and it appeared to be roll-out boxes. I didn't expect that; I saw the right-pointing triangles, mostly used as "More..." links, and expected it should be menu items.
I should give them the downwards triangle (as in the hover state), and for the hover state I shouldn't change that (as there is no clicking function on the triangle).
Then I wanted to see the menu, to know more about the "us" who I have to choose for web design and coding, to throw a look at the contact-info (in order to see the country), an so on. - There is no menu! :rolleyes:
Ok, then have look at what they can make: "Our Recent Work".
It are just 3 images, without click option to visit the site, or to get more information.
- The first one is a form box, and has as alternative text: alt="A web site about Japan and its culture."
- The second: a collage of web related images, with an alt="A still image of a flash project.". One of the used images is the logo of lullabot.com, an interactive strategy, design, and development company as they say. I guess they have the copyright on their own logo, and don't like it when other design firms use it for promoting goals... :eek:
- The third is an image of a site "Gamepoint, news for gamers", with the alt="A web site about landscape design.". - A Google learned that Gamepoint is a large international operating company for online games, in a lot of countries. The Gamepoint-image is not one of them, and it has a Lorem-textbox; so the visitor can conclude that it is not an example of an existing design/website.
In all texts this page is promising very much: the top of the mountain.
In reality I don't see a mountain, and no top.
My advise should be:
- Some PR in a site is allowed, but only mega advertisement language doesn't impress, and visitors will not trust it. Be modest and show what you can do; that can be images of example sites/pages as well, nothing wrong with it, but tell that it are examples and not live sites/pages (or put the example-sites/pages online, that's even better).
- Give more information in follow-up pages: experience years, who are "we" (a team of 25 people, ore a 1-man/woman firm?), what are the prices for what, and so on.
- Start small, and grow big!
erick45 — 2013-12-13T03:10:33-05:00 — #6
I like your logo and because your website having low loading time so it is Good.
I like the design and the contact forum which you have used on the top is really helpful
jare — 2013-12-16T16:17:12-05:00 — #7
I would recommend:
- Avoid usage of heavy bluish color especially with heavy gray. Personally i prefer energetic blue (#429bfd) -Google uses it for control elements or as prime color. In some cases it might look too dominant but you can adjust it with gradient.
- Change background pattern to something more abstract like paper texture or noise.
- Also your pattern has some kind of vertical stamping but it's almost invisible. Generally it recommended to avoid "barely perceivable" design elements because they cause some perceptive tension.
- lines on the background can easily contest small fonts - it's extra limitation on your future design.
- You might want to convert small pictograms to one big css sprite because browsers have cap on concurrent connections.
- Combine header background images and use jpeg instead of png.
- Make menu animation snappy because it feels slow and sluggish.
- Align icons to some baseline.
- You can fully switch to the icon fonts. For example http://fontello.com/ has all of your icons.
- I can clearly see "call to action" in design flow but i have issue with ordering. As potential consumer i prefer to first see large preview of your portfolio and then what is your specialization. Only then i might want to contact you.
rahulonmark — 2013-12-17T05:54:51-05:00 — #8
The site looks really professionally made. However, I would improve the section about your recent work done. It is difficult to understand what those pictures are about. But all in all it is well done.
nielz — 2013-12-30T17:37:37-05:00 — #9
I think the site would do well if you would put in a more emphasized focus for the viewer. Currently, one enters the website and everything is shown to you at once, which could be a little bit overwhelming at first. For the other points (more specifically with regards to the structure), I agree with the others.
lieto — 2014-01-03T06:51:44-05:00 — #10
Who this site is for? If you aiming for b2c than there are too much text. Clients dont care about things like "semantic coding", they want to see the results of your work — both projects and how they perform.
Other than that its just... grey.
soapmarine — 2014-01-12T10:10:26-05:00 — #11
- Drop-down menu
I'd say you have too much text in block in the brown dropping menu, it's not inviting to read, maybe you could split the "block" with bullet points or some spacing? It would be much more easier to read.
- Color scheme
I'd go little bit more risky with colors, to give more personality. Because coming to you site I have an impression as the client that you can code very well, but you lack of ideas or creativity.
Overall impression is that you are organised coder and take your profession very seriously. Well done!
chgeorge — 2014-01-20T15:23:23-05:00 — #12
Wow! Clean looking site! Like mentioned before, I agree that one page designs are beautiful simplicity.
Some things that I recommend is that:
Making your text unselectable. I accidentally held my mouse button and highlighted the whole thing.
Capitalize each word in the first part of the description. To me it just looks like it was forgotten or something. Doesn't quite go nice with my eye
Try to round out the edgers of your contact us box. Since the theme of your site is curvy, I think it would look a lot better and blend it more with a rounded contact us box.
Keep it up but then again it looks like its pretty polished!
system — 2014-01-26T04:35:17-05:00 — #13
My experience is that if we talking about Portfolio. Better we show only portfolio. Why choose us?
Should me mention in about us or company profile. Am also running IT company in India.
technobear — 2014-01-26T07:10:59-05:00 — #14
Thread closed as OP has never returned.