Web Design Workshop #32: Umber
tuts workshop

Web Design Workshop #32: Umber

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, a personal portfolio..


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 #31

Hi! I’m a second-year student Interaction Design in Belgium. This is my portfolio, which consists out of a blog and a portfolio section. The school-part is where I need to place everything related to school (mainly reflection on your education). I’m quite curious on the general feedback. How can I improve my website design-wise and technically? How do you feel about the content? Everything is written in HTML/CSS at this point (I update everything manually) as I don’t know a lot of PHP or any CMS system.

In general I like the ‘roughness’ of the design. It feels different, something which I find quite important if you want to stand out in the crowd. I’m eager to hear your critical opinion! Sven Lenaerts

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..

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.facebook.com/kkirsche Kevin Kirsche

    First, I think it may be beneficial for you to try to move it to a content management system such as WordPress. There are tons of people who can and will help you in the process to move over to such a system. Trust me, it sounds and looks a lot more complicated than it is.

    Secondly, I agree that the “rough” style is interesting, though I want to see that more throughout. Currently, I feel as though you have two main styles. A clean and minimalistic style in the body and a rough / grunge style in the logo and text areas. For me, there is a disconnect there that I think you could benefit from slimming down on and making more consistent. Nonetheless, I agree that rough can be a good differentiator.

    Third, personally, I was unsure if your headings are too light in color. The background immediately pulls my attention away from your content because of how pronounced it is as opposed to your information, which should be drawing my attention in.

    Lastly, change the Twitter logo your using at it breaks Twitter’s branding guidelines (https://twitter.com/logo). That could get you in trouble down the road and you seem like you’re doing well and I don’t want to see that.

    Either way, it’s a great start for your experience currently. Keep it up!

    • http://twitter.com/svenlen Sven Lenaerts

      Hi, first of all – Thanks for your compliment! I know I’m still young and unexperienced, so I’m trying to get better in what I’m doing. Thanks for your tips, they are very useful and give me insight in what other people think of my website. I’ll be taking your feedback in account when further developing the website. Soon enough you’ll see some changes to reflect on the feedback that is given by everyone. Thanks for your time to check it out and write a response! :)

  • http://www.facebook.com/harli91 Ivascu Madalin

    First thing I noticed was the background image loading,

    - second I see that you need some more padding for you’re “read more” buttons in the school page

    - third use some margin for the social media

    - nice and simple layout,will be nice a third color a blue/green

    • http://twitter.com/svenlen Sven Lenaerts

      Hey, thanks for your feedback! I’ll update it ASAP. ^_^

  • http://twitter.com/rj1094 RJ Hallsted

    I get lost in the background near the top. The content does not stand out enough to draw away from the depth of the background. Maybe some lighter text and definitely a larger nav section.

    Also, I would add some brighter colors as the grays, blacks, and whites all tend to blend together. Overall, more contrast.

    I would also highly recommend switching to a CMS (I recommend WordPress), as it will make your life much, much easier. And it will also make it simpler to change the layout and design of the site later, if you so wish.

    • http://twitter.com/svenlen Sven Lenaerts

      Hi, thanks for taking your time to check the website and writing some feedback. I’m taking your feedback into account and will use it to update the website over time. :)

  • webdesdev

    The background is not good way lost in that and content containers are not standing out on that background, so i suggest to try different variation with that background.

    • http://twitter.com/svenlen Sven Lenaerts

      Yeah, I’m seeing if I can find something more suitable – Thanks! :)

  • naman34

    i think looks pretty good. the greys give the site a unique emotion. The background does distract from the content for a bit, but not for long. I think that can be a good thing.
    I do not like the typography however. Add more space around the text. And try a different typeface or at least increase the font size.
    Also, about a CMS, you can choose Tumblr instead of wordpress as well. Using a custom theme with wordpress is both easy and free. Or you could choose not to use a CMS, that’s really up to u.

    • http://twitter.com/svenlen Sven Lenaerts

      Hi, thanks for taking your time to take a look at the website and write a response. I’ll take a look at the typography and play around with it, I’ve never really payed a lot of attention to it so I’m sure it can be improved. Thanks for the tip!

  • http://twitter.com/twistereli Eli Prenten

    Hi Sven, first of all I was really excited when I saw you were an interaction design student in Belgium. Because that’s exactly what I am. I study in PHL at Hasselt and I’m doing the master year right now.

    About your website now…

    As the others already said, at the top the background image gets really trippy and uncomfortable on the eyes. I think there are better backgrounds that also needs to drop shadows behind the text unnecessary.

    Also it could be better to engage a first time visitor more on the homepage, now it’s just the blog which often is the last thing visually minded people look at. That could be more creative than the regular “Hi, I’m Sven and do awesome stuff”… I’m sure you’ll be able to find something really cool :)

    When I look at the portfolio my first impression is humbleness and ‘greyness’. That counts for the whole website actually. At some points it becomes cold and impersonal in my opinion. From the other side it is calm and humble like i stated earlier. With other words a gentle color accent could change the entire design without you having to start over again. Look at this http://dribbble.com/shots/890090-Landing-page?list=users for example.

    You might also get some inspiration from this portfolio: http://www.stefanhellings.be/2013/ it is from some student at your school :D There is also lots of grey and simplicity, but also shouting colors that make everything a little more exciting.

    In short it is a good design, but not something people will remember. That might be a target for you throughout redesigning the portfolio in the upcoming years (one does not simply stop redesigning his own portfolio haha)

    Best of luck mate!

    • http://twitter.com/svenlen Sven Lenaerts

      Hi! Nice to see somebody from the nearby region. I hope your enjoying your studies in Hasselt. :)

      Thanks for taking your time to browse through the website and writing a response, any feedback is much appreciated. The background image is something temporary – It should be changing every couple of weeks. I think it shows that the website is alive and kicking and if you visit it again after a couple of months it ‘feels’ fresh. The current background image is quite busy, yeah. I’m looking for something more calm and simple next time. :)

      A better introduction is a pretty good idea. I’ve always been a more textual person, so I didn’t really think about a visual/creative way to introduce myself. Sweet idea! ^_^

      I was playing around with the idea to add a bit of color to make the website more vibrant, but I didn’t actually try it yet. I’ll check it out and see if it works out. Thanks for the tip! The link to Dribble looks sweet, so that’s a good idea. :)

      The portfolio from Stefan looks sweet, great inspiration, thanks for the link!

      And indeed, a portfolio is something that should keep growing and becoming better and better. Thanks for your help!

  • Pingback: ¿Qué es Tustplus?: Tutoriales y Cursos para Desarrollo Web y Diseño | Eduarea's Blog

  • http://twitter.com/rileybracken Riley Bracken

    Sven,

    Overall I really like the site, and I am impressed that it is all done in HTML and CSS. What you are doing is a tremendous amount of work. I honestly believe it would take less work to learn WordPress and have it handle the backend for you.

    When I was going through your portfolio I noticed some inconsistencies in the bottom link. I really liked how in some items I could hit ‘Return to overview’, but when I couldn’t do it on some it confused me, also some of them gave an option for next post, and took you to the blog.

    • http://twitter.com/svenlen Sven Lenaerts

      Hello! Thanks for the feedback! Considering that nearly everyone is suggesting that I should learn to work in a CMS, I’m going to move to WordPress and figure things out in the future.

      On topic of the bottom links – You’re right! I’ve never really payed attention to that. Thanks for pointing that out. Some of my portfolio items link to the blog post related to that specific portfolio item, while others are old work which don’t have a blog post but an own page. I’ll make that more consistent, thanks. :)

  • http://twitter.com/joshbedo Josh bedo

    I think adding your social media links more above the fold like tabs above the content or even by the menu would help you gain more followers. Also adding little bits of color might help, It generally looks too gray scale to me and doesn’t have any focus and you want to draw your audience to the more focal points of your site and its hard without any contrast. You can even do this my increasing your heading size because it’s really close to the paragraph size which doesn’t focus your eyes anywhere. All in all I love the design but I feel like those things could definitely help you and the other important thing of any other blog is keeping up with it and keeping relevant information for your audience to keep them coming back.

    • http://twitter.com/svenlen Sven Lenaerts

      Hey, thanks for taking your time to write a response! I like your ideas, thanks. I’ll work on it. ^_^