Web Design Workshop #22: Creative Man
tuts workshop

Web Design Workshop #22: Creative Man

on Sep 21st 2012 with 32 comments

Web Design Workshop is our regular community project where we ask readers to submit their work for your friendly, constructive criticism. It’s the perfect way to learn, offer opinions and have your own work critiqued! This week, the personal portfolio of Kanchan Rai..

Rules of Engagement

Play nice! We deliberately select work which will benefit from advice and pointers. If you can’t be constructive in your comments, don’t. Other than that, offer any advice you can give. Feel free to link to examples and images which back up your points.

The Design

Web Design Workshop #20

This is the homepage of my portfolio website. I have been working in web for more than 4 years now and had been feeling a strong need for a personal portfolio website since I’m freelancing these days. I like the part above the fold. I’d love comments and critiques on the whole design but particularly on the body part. – Kanchan Rai

Looking for constructive criticism on your own work? Submit it for a workshop – most but not all submissions are published. Be patient though, there could be a queue..

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Hi there! My name's Ian Yates. Welcome to Webdesigntuts+ :)  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://brocknunn.com Brock Nunn

    I really like it Kanchan! Displays good use of balance, color and typography. I think the only suggestion that I would have is to alter the color of the “View my Works” button to stand out a little bit more and encourage user interaction since it seems to be your primary call to action.

    Great job!

    • http://kanchanrai.com.np Kanchan Rai

      Thanks, I will consider your suggestion.

  • http://www.twitter.com/diegolmello Diego Mello

    Awesome!
    The colors that you’ve picked make a great combination.
    I’m with Brock Nunn about “View my works” button.
    And one more thing: all icons in “Proudly all over the web” have an background image with burning pixels.

    You’re amazing! ;-)

    • http://kanchanrai.com.np Kanchan Rai

      Thanks! I’m looking for a solution regarding the icons pixelation!

  • julia

    Really nice! I like the colour combination, the logo and texture.
    Just one small suggestion. The superhero cartoon at the bottom seems childish. The text on the logo at the right-bottom corner is not legible. How about remove the cartoon icon and replace it with your colourful shield logo?

    • http://kanchanrai.com.np Kanchan Rai

      Thanks a lot. Actually, I’ve been thinking about working on the footer again. I’ll keep ur suggestion in mind!

  • rick

    When i click in the slideshow at the top i get a orange outline around it, is this intentional? (google chrome)
    It seems like the same thing when clicking in a input element in chrome. I suggest removing it because it looks like its not supposed to be there.
    Other than that i think your design looks really good, i really like the timer about how long you have been designing.

    Giving the div with the classes “jms-wrapper step-step-3 delegating-step-step-3″ a outline: 0; will fix the outline issue. (if it was unintentional ofcourse :)

    • http://kanchanrai.com.np Kanchan Rai

      Hey, thanks a loads!! It was unintentional! I will work on it!

  • Bennie

    Strong design with lots of fun mixed in with information. I personally love blue and orange, and I think you make good use of them throughout the page.

    The one thing I notice is the inconsistency in the style of the “Hire Me” sign with the superhero drawing at the bottom, as well as those in relation to the rest of the design. I don’t know if you want to redraw the sign to match the style of the superhero, or vice versa. Not sure if this is a big deal or not…

    Another place you may want to put a bit more attention to is your social icon section. Some of the circles are not being given enough room to display and so are cutting off at certain sides. If you are using a sprite sheet, you may want to revisit the spacing of each item from each other, as well as the measurements you are using in your CSS.

    The buttons below the main greeting may work better with some color, especially the one that links to your portfolio. As a portfolio site, this is the most important part of your site, and you want to draw people in as easily as possible.

    Those are very minor things in the scope of your design, and you’re doing a great job in the overall design, typography, and color choices. Excellent work, my friend.

    • http://kanchanrai.com.np Kanchan Rai

      Thank you very much! I’m glad you liked it and your suggestions are wonderful! I’ll work on the icons and buttons!!

  • Torrance Scott

    I like the site. Good typography, feels smooth and natural to use. I think you know what you did well from the other comments so I won’t repeat.

    I agree with Rick that the orange outline in chrome (didn’t check other browsers) looks odd. I also think that it shows up for some reason under the view works button for an instant as the rollover action happens. Other issues I have with the slideshow: the row of stars (with only one highlighted) makes me want to click on them to advance the slideshow, which is not their purpose and is incidentally why I found the odd yellow box around the slideshow; the buttons are just a bit dark for how important they are, though they look great on rollover; the Hero in super hero web designer heading has a thin strikethrough and underline which, if intentional, I don’t understand.

    The arrow on the .more classes looks too close to the text on rollover; just drop the arrow on rollover maybe.

    Change photo on the about me page — looks like you have questionable stains on your pants. Maybe you saved as a png-8 and not enough colors came through or something.

    I assume your work is going to be added soon, cause I don’t see anything. The contact me page looks unbalanced and again I assume that you have a plan to add something to the center column, or expand the contact form.

    It looks like your link colors aren’t quite consistent. I think the basic text links are more purple and rollover to blue, while the .more links start blue and make a nice transition to orange. consider being more consistent on rollover actions and styling of text links.

    Don’t forget a favicon either.

    Like I said, looks great, feels great. If I can only think of tiny things, then you’re nearly there.

    • http://kanchanrai.com.np Kanchan Rai

      Wonderful! Thanks a lot!! Regarding the highlighted stars, your suggestion is an eyeopener!! I’m planning a better photoshoot for the about page! Just a temporary thing! :) The link colors are a bit inconsistent due to the replacement by default link colors of bootstrap. I sometimes have hard time making the elements in my site consistent, you know, miss small things.
      Favicon, I will add it, almost neglected it!! Thanks again!

  • Jesus Bejarano

    Typography : Well balanced , i like the way that is blended with the background.

    Colors: As good as the typography, good techniques there in a very feng shui style.

    Miscellaneous: Even thought the cartoons images do not blend very well with the layout, i would say “what ever” , is a touch of your personality and is your personal website so who cares, right?

    What i don’t like : I think you didn’t care too much about the social icons.

    Overall : A very good desing, it prove what your “Who am i?” part say about you being awesome.Good Work.

    • http://kanchanrai.com.np Kanchan Rai

      :D. Thanks a lot!! Yeah, I will certainly work on the social icons!

  • Andrew

    Every single peace of work was used billion of times by everybody. So usual and so boring.

  • samir

    prety design
    i approve it

  • shruti

    i loved the denim feel you have given to the design….. keep it up….

  • Dave

    I like it, but I’d suggest you give it more of a comic book theme. Right now the theme is sorta retro (stitching and such). Give it word bubbles and such like you’d see in a comic book. They even have a nice comic theme tutorial on this site. :)

  • Agi Ogheneogaga FIdelis

    What can else can i say other than perfectooooo ……a very clean and nice design.

  • http://ividesign.net23.net/ ivascu

    you seem to have some probems with the social network icons ,the icons overlap ,on hover they are ok but in normal they don’t seem round

  • Mubashar Ali

    Really nice and cool design..

  • http://expandable.eu Andre

    Hey Kanchan,

    i really like your design. i’ve found just to small points wich i don’t relly like.

    * On your startpage you have this really nice “slideshow”. the only thing about it is, you don’t see on wich page you are. (lower red rectancle)

    * if the time gets to big, it doesn’t fit into one row (not really bad, not cool althoug) (upper red rectancle)

    Here’s the screenshot i am talking about: http://www.imagebanana.com/view/oq4ll7dq/kanchan.jpg

    i think the “my work” part is not ready yet?

    • http://kanchanrai.com.np Kanchan Rai

      Thanks. The my work part is not ready yet!! I’m working on it!! I really appreciate you giving time for reviewing my site (screenshot, thanks a lot) I will work on your suggestions!!

  • http://mns-design.com Zaethrael

    Really really awesome :))
    I love that style

  • http://www.customicondesign.com Custom Icon Design

    I like the design. But I think you need to change the botton and icons. it does not suit for the design, not impressed in my mood.

  • http://neogrey.com Ivan

    While being nice is generally nice, sometimes one needs a little more harsh critique. My main “rant” here is that I’m a little bored of these ” Hello, I’m (insert name) and I design websites” template. For a designer portfolio, I think you can go more creative or minimalist – like, show us your work and forget about wording. To be really honest, no one cares to read the text on such portfolio sites and your has way too much text. What is the point of having More About Me, while you have those 3 boxes of highlights on the homepage? Redundant, in my opinion. And I’m really sorry, but the interesting facts are not that interesting. The “superman” illustration is a little naive and childish, plus if you want it to actually work on your site do not put it in the footer at such small size. Make it big, make it stand out.

    What’s the point of having those stitches and the denim texture of the background? They don’t speak anything creative to me. And there’s a stone texture as well – what is the purpose of it? How well it combines with the fabric texture?

    And for a Design Portfolio, your homepage has only ONE IMAGE, the recent project one. That’s quite bad. And it fall below the fold. And if I don’t read the text that says you’re a designer – there’s no way I’d know you are a designer.

    The shield at the top, which should serve as a focal point and generally a logo, is too templatey and generic – I’m sure you can do better. And the kerning of your name could be much better.

    I don’t want to offend anyone here – but I’d start all over if I was you, and focus more on the stuff I did, throw more pictures and stay away from textures and other dated fashion tricks.

    • http://kanchanrai.com.np Kanchan Rai

      Hey, that hurt! :P. Thanks a lot! Your comment was wonderful. I really appreciate it. It’s really a sharp one but I’m really glad. Since, this is my first time designing my own website, I know I have made many mistakes. You know, trying to do so much that I’ve missed so many things.

      For the time being, I’ll go on with this design but I think I won’t keep it for long. I might not start all over again but I’ll be tweaking the site time and again! I thank Ian for giving my site an opportunity here!!

  • Pingback: Web Design Workshop #22: Creative Man | Webdesigntuts+ | inLine Media RSS Blog

  • http://www.omegamobil.com mobkas

    i like a similar site Web Design Workshop

  • http://www.creativ.me.uk Sanje

    Namaste Kanchanji,

    I am really glad to see a fellow Nepalese on Tutsplus website. At a glance I thought it was a featured portfolio but then I went on to realise that it’s a critique section which I wasn’t aware of that it existed. I myself am a front-web UI/UX designer/developer based in London and think I could help you with some suggestion.

    Whilst I strongly agree with the previous comment, I also believe the majority of users are used to seeing a strict 960 grid layout, 3 column website. Your website need to stand out if you want to get noticed. At the minute, your portfolio looks like it’s been inspired from most of the landing pages available on the envato’s themeforest.

    Few things I noticed right away are as follows:
    -The header background doesn’t tile properly, has sharp cut-offs? Try viewing it on a higher resolution/screen.
    -The hyperlinks are of inconsistent colors. For e.g., your mailto link and your weblink in the testimonials section is still default blue which looks like it’s been forgotten.
    -Next, font consistency, don’t use too many variations. For e.g., your testimonials text is so small and of totally different style it doesn’t feel like its a part of your site.
    - Next, give your design a bit of breathing space, you can definitely look forward to increasing gutter space between the columns.
    - Style the twitter feed, at the minute it looks like its just been plonked in there.
    - Finally, the text in the footer is black! Its illegible.

    To wrap up, its a good start and you need to keep up with the latest trends. Have a look at this post for e.g. http://99designs.com/designer-blog/2012/06/01/6-web-design-trends-that-are-here-to-stay/

    You portfolio is at a very early stage and needs a lot of refinement but you are getting there. Prayas jari rakhnus. :)

    Best Regards,
    Sanje

  • http://www.creativethien.com John Tran

    What I like most about this site is the navigation bar along with the integrated logo. Visually very appealing combination of colors.

    The big problem I have is, this is a portfolio site which should be a good representation of your work. Unfortunately the design AND layout makes this look like any of the random tutorials or templates on Themeforst.

  • http://www.wevio.com Stephen

    I think the only suggestion that I want to tell me u Emboss “View my Works” & “More about me” button to stand out a little bit more and encourage user interaction.

    Nice job!
    Cheers

  • Rusum Shrestha

    Kanchan Sir, babal cha tapai ko site….. dherai kura haru sikna pairacha tapai bata and tapai ko website bata even tapai sanga nabase pani…