Web Design Workshop #2: Umbrarum Regnum
tuts workshop

Web Design Workshop #2: Umbrarum Regnum

on Feb 24th 2012 with 28 comments

Web Design Workshop is our weekly 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!

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 #2
More Images

Umbrarum Regnum is mainly a blog. The entire layout has been created with one goal in mind: minimize the use of images and create a site that’s almost entirely powered by modern web technologies (the analytics for the old site indicate that only a negligible percentage of my visitors use browsers incapable of rendering HTML5, CSS3 and SVG). I make heavy use of gradients, box shadows and rounded corners.

Just a remark about the color picker in the top left corner: it’s not part of the UI, obviously, I just used it to make sure I always use the same colors.- Dominik Marczuk

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
  • Shannon

    Love the color scheme and overall design elements.

    Just a couple nit-picky things:

    1. Too much use of the same font makes it difficult to read. It also doesn’t allow a hierarchy of what to read. Everything has the same kind of weighted value. Use your main stylized font for just a couple headers. That particular font is hard to read when it’s smaller than header size. Definitely take it out of the navigation.

    2. Padding and margins. Your padding and margins are inconsistent. Try using the same width for most elements and spacing between them. Decide on a good number and use it throughout the entire site. A good example would be your outer container padding. It looks too thin because your margins between elements is larger. Also, your margins are also inconsistent between elements. Your Page ID div has a smaller margin under it than over it. Make it all the same and you will see a dramatic difference.

    Other than that, I think it looks clean. Nice job!

    • http://www.umbraprojekt.pl mingos

      Darn, that font looks so nice! But I guess I see your point. I’m not a big fan of mashing up more than two fonts though. Maybe I’ll just look for a similar styled, but more readable font…

      As for margins, what exactly seems inconsistent to you? It’s all aligned with a grid, 12 columns (OK, I make use of three only…) with a fixed 10px margin around them (so, a 20px gutter between columns)…

  • dj

    A nice handsome design but I won’t comment on that. How about giving some specs? This seems to me to be “best viewed” in a 960 grid, is it? To me, it doesn’t look like it will scale well to a wide screen desk top and/or a mobile device without substantial re-arrangement. THAT’S what I would like to see Webdesign.tuts+ be focusing on to a greater extent. I personally have stopped even looking-at/caring about anything that isn’t responsive. Code this up in WordPress-HTML5 with enough thought to make it responsive without the overhead of a grid system and I’ll buy it.

    • http://www.umbraprojekt.pl mingos

      It’s a 960px grid, 12 columns with 20px gutter. According to my analytics, the current (old) site has only 2-3% monthly visits from mobile devices, and for all other devices, the smallest resolution noted in the last month was 1280×800. For this particular blog, I’m not going to bother with a responsive design because it would target only a negligible percentage of users – but thank you for the comment nonetheless. I’ll keep the advice for work I actually get paid for ;)

      • dj

        @Mingos… I understood the “rationale” you gave before you gave your defensive reply. My comments were: given because you asked for them, word-crafted with concern for making clear they were my observations and carefully chosen to minimize offense. Now, seemingly having failed the first attempt, I feel the need to make one more effort at conveying what living quite a long time has taught me; in, perhaps in a more obvious way.

        Go into ANY Walmart, Sears, Target, Dillard’s, Macy’s (fill in your national brand name store here) and look for ANYthing that 95% of the worlds population ISN’T ALREADY buying. Anything! TRY and find a so-called “sales associate” to help you. Explain what you need and can’t find and, after going to look for herself (because she thinks you’re too stupid to find it on your own) and/or after he reads the same labels out loud to you that you’ve just read (because he has no clue and is winging it), the universal EXCUSES you will hear are:

        3) “We don’t decide what to carry” – [in other words - I only do what I'm being paid to do, and with the least possible effort];
        2) “We never sold many of those” – [our analytics show no body is buying them];
        1) “I don’t own the store” – [right, and you probably never will.]

        So this time without as much word-smithing, the critical points I was trying to make are: [and you can only try to convey them to our Clearasil-using "sales associate"]

        1) Responsive design is NOT the future, it is the PRESENT; and to not even consider it in your design is not only short-sighted, but irresponsible if you are taking money to do it (and even if you only doing it for your “portfolio”);
        2) Analytics only tell you what HAS been, because of the way you are already doing things, – “you can’t sell what you don’t carry” [I wouldn't visit the site mobily either if it looked like crap];
        3) You act like a robot, you should be paid like a robot and probably end up like a robot: with your best hope being only to be salvaged and used as spare parts.

        ps – with all the neologisms, I incorrectly assumed “Umbra-whatzit” was mere “lorem ipsum.” However, I Google’d it and now have still further comments:

        A) Anyone who thinks that the majority of “fantasy-world-living gamers,” even those who’ve aged enough to be coders, don’t own and use mobile devices must have their head in a dark place. How I now interpret the issue is that: if your statement about analytics is true, the site has a very serious problem. There should be way more than “2-3% visits” from mobile devices! [Think iPads not just phones]
        B) “I’m using a (someone else’s coded) grid… (so how can it have) inconsistent margins”; “I’ve loaded 12-columns… but only use three”; “I’m really bad at… and usually adjust things (only) when the client (complains)…”; “I’ve never considered the content vs. functionality issue…”; — come on, really? And,
        C) In reality, even if you never take any of this advice everyone is giving, my impression is that your new effort will most likely be a welcome relief to the readers.

        • http://www.umbraprojekt.pl mingos

          Your initial comment caused no offense, despite my defensive reply. Maybe it was just me being too sleepy (4AM…) to respond politely enough not to sound like I’m defending an old fashined and backwards approach to web design and development. I apologise if I sounded rude or stubborn.

          Let me clarify: I really appreciate the remark about site responsiveness, and even more after reading your second comment. What I meant wasthat since the whole project is a just-for-fun blog about programming (the RPG-related articles are but a remnant of the last 10 years of my futile attempts to write a computer game – the blog’s focus switched to web development and this is why I felt like redesigning it). While I would do my best to make a site look good on a mobile device for a paying client, a hobby project makes me take a more “relaxed” approach to the trends.

          The iPads indeed are the number 1 mobile device the site is viewed with. I don’t have a tablet, nor know anyone who does, so I have never seen the current site on one. I have no idea how it would look like. On a smartphone, it’s an unholy mess. Now, I don’t assume roguelike developers are cavemen with no mobile devices, but since the site dates back to the pre-smartphone era, it wasn’t created with such devices in mind. I guess you do have a point with making it mobile friendly with the redesign…

          As for your final remarks, point B)… Huh? “Come on, really?” is not a comment, it’s a statement which I understand as “your approach is a bunch of worthless excuses”. Maybe I’m misunderstanding your intention, but it sort of made me feel sorry I replied to any comments here. Don’t get me wrong, I do appreciate your remarks, I really do. And especially your effort to explain your point the way you did. But it still felt sort of bad to read this particular part of your comment. I’m using a grid, never mind who coded it. “Come on, really?” doesn’t help me in any way to find out where the margins are inconsistent, and thus to eliminate the inconsistencies. It doesn’t help me to be better at UX, and it certainly won’t make me consider any UX-related issues that I’m plainly not aware of. My concern is readable and well documented PHP code, a solid PHP framework, efficient URL routing, fast data caching, etc. If I’m ever to gain knowledge and experience in the design and UX field, which is ultimately my goal here, it’s probably not through remarks such as this one :(.

          • dj

            @Mingos… I’m not sure whether that was a “frowny face” or a “pouty face” that you signed your reply with. Was that a tongue I saw sticking out?

            When I’m riding in the car with my grandchildren (I told you I had been living a long time) and turn on the radio to listen to “Alabama” (or other generational equivalents) they turn to me and give me that exasperated/condescending/pitying look that only adolescents can give. I say to them “What? This radio is as old as I am and this is the only thing it will play.” They then roll their eyes and say “come on… really?” Which I take to mean “get with it… and don’t give me any lame excuses.” I actually take those words to be a real “comment” from them; a kindly one at that, as I have heard them talk about people they really don’t like; a referendum (of sorts) from them about how they see right through my lame excuse and hope that in the future I won’t insult their “maturity” with such silly rhetoric. I am grateful that they cared enough to want me to be “cool” and that they actually hope that “some day” I might be more grounded “in their world.” I don’t take offense at them, and neither should you. [It might help you to go back and read my comment letter B again - it was clearly relating to only the items which I had quoted from your... forgive me again... excuses, not margins or any other technical thing.]

            One last thing though and I’ll be through with this. You excuse in your comment-replies that the original “site dates back” to near prehistoric times; but, that is not how you presented your new code in your introductory paragraph. You (seemingly) wanted feedback on a current effort, in fact you lead us to believe “The entire layout has been created with one goal in mind: minimize the use of images and create a site that’s almost entirely powered by modern web technologies.” I really hope that your defensiveness allows you to see that your choice of words might be seen as trying to set your effort up as something to emulate. Perhaps if you had actually disclosed in your intro paragraph that even you, the author, consider this a “just-get-by” technique for projects that you don’t consider worth your best efforts (like you just did to me in your comment-reply) there wouldn’t have been any confusion. I can tell you that, had I known that is how you considered what we were asked to critique, I wouldn’t have even commented in the first place.

            So, just so we have something to agree on: One doesn’t need to bloat into an entire grid system just to get your three margins straight; and, we do seem to agree that even the automatic use of a so-called “960″ width isn’t considered “best practice” if you want to use “responsive design.” [A thing which I still wish Webdesign.tuts+ would focus a tad bit more on].

          • http://www.umbraprojekt.pl mingos

            @dj, please! I don’t feel like arguing. I already told you: I appreciate the comment and the effort to make me understand your point. My rhetoric or my approach to this or any project are not the subject of this conversation. As much as I’d like to indulge into these matters, they’re getting too off topic. Plus, I feel uncomfortable using a foreign language, especially since I get the impression we’ve come to a misunderstanding more than once now. My choice of words might be poor here and there, but please understand that while I’m doing my best to produce understandable and sensible text, English is still a tremendous effort for me to use and I will always trip here and there.

            So. I never tried to use the “prehistoric times” argument to back a lack of interest in responsive design or anything related to new technologies. I merely said the old site is outdated and not prepared for mobile devices, which might be the cause of the low number of visits from mobile devices. I meant to say that your argument about the analytics showing “what has been” and due to how the current content is made is a valid one and I agreed with you. I apologise if I was unable to make it more understandable.

            And since you apparently do treat my replies as (lame) excuses, let me make this clear: I’m not trying to excuse myself from anything. This is my rhetoric. I admit I suck at certain things, and whatever pschycholinguistic there might be behind me adorning the comments with remarks about not having considered something, I’m not telling anyone I’m not willing to accept the advice everyone’s giving me. You quoted my grid vs. margins question, adding the “(so how can it have)” part, which completely changes my point. I was asking for insight about what to correct – you took it for a miserable excuse. It’s not. You think my comment about not having considered the content vs. functionality issue was an excuse? No! I was trying to let @EA know that he’d presented me with information that’s both new and valuable to me.

            Finally, let me stress that I’m here to learn. This project is the best I’ve come up with in my whole darn life. I want to improve it even more, gaining experience and learning from the experience of others. If it matters so much to you whether I consider certain trends in web design important for this particular project, maybe indeed you shouldn’t have commented at all. You seem a knowledgeable and reasonable person though. I guess more that both of us had hoped for got lost in translation. I see my intent was misunderstood. Do you mind if I retire from the conversation at this point, to avoid any further misunderstandings, as well as going off topic? Thank you.

          • http://www.giulianoliker.com Giuliano

            $(comments).not(‘dj’).read();

      • David

        Look at skeleton, you can be flexible while using a grid.

        • http://www.umbraprojekt.pl mingos

          Awesome, than you so much for suggesting this!

  • dev

    The size of pagination and font size of pagination should be smaller, and the color of pagination make me feel like it pick up from logo color, and layout color.

    The use of same font of logo, caption, list of programming language and the nav make it less attractive, you should go through font site like font squirrel to pick other font for each part.

    The heavy use of black, grey, white make it less appeal.

  • EA

    I think the graphic styling and effects look pretty nice. The heirarchy and typography could use consideration of earlier comments, though.

    If I landed on this page, I can’t navigate to different pages of articles. If I scroll down to view the pagination nav, I lose higher nav visibility. Consider that If functionality is not visible, it doesnt exist to the user. If content is visible, it’s functionality should be present (exceptions being pagination for very tall scrolling areas for web stores as in amazon.com for example). I think reconsidering the article pagination placement and interface, as well as just shrinking down those article preview images, will do a lot for this site.

    • http://www.umbraprojekt.pl mingos

      Yes, I also have the feeling the pagination is too large.

      What solution would you recommend to improve the UX? Another paginator above the content? Another navigation menu in the page’s footer? Or maybe a sticky nav that always stays at the top of the viewport when scrolled down?

      As for the article list, I think it will have to undergo a redesign from scratch. A smaller picture on the left and a teaser on the right, perhaps?

    • http://www.umbraprojekt.pl mingos

      Hm, I replied, but my first comment is gone… Probably because I’d made a typo in the email address. Anyway, thanks for your remarks!

      I’m really bad at UX and usually adjust things when the client says they’re not comfortable enough (that usually applies to the admin panel of my CMS, but still…).

      I’d never considered the content vs. functionality issue. What would you recommend to make it more user friendly? Place another paginator above the content? Another main navigation menu in the page’s footer? Or maybe use a sticky main menu, staying on top of the viewport when the page is scrolled down?

      Or maybe the articles list just needs a complete redesign? Like, an image thumbnail on the left and a teaser on the right?

      Oh man, it’s so obvious I’m a programmer, not a designer :D.

  • Pingback: Web Design Workshop #2: Umbrarum Regnum | Shadowtek | Hosting and Design Solutions

  • http://alihussain.me/ Ali

    I would say there is too much clutter, need a lot of whitespace

    • http://www.umbraprojekt.pl mingos

      Hm, yes, that is a good point. I’ve read a lot about whitespace and not being afraid to use it, hell, even recommended spacing things out to a client or two, yet in my own design, I fell into the “wasted space” trap. Thanks, I’ll keep this in mind when improving the design.

  • http://vimeo.com/sasadalponte Sasha dal Ponte

    I would change background to something like this:

    http://www.net-tv.hr/

    It’s a bit “lighter” and easier on eyes. Also, font is really hard to read sometimes, especially on “tag cloud” and similar. Also “comments” and “posted by…”

    • http://www.umbraprojekt.pl mingos

      Yes, a few people have made the remark regarding the unreadable font, and I’m starting to agree more each time I look at the design.

      Also, thanks for the background suggestion!

  • http://www.dana-svedova.cz/ Dana

    I like the colour scheme, it works very well. I just have a few nitpicks – one of them is the narrow font that is used all throughout the website. I think it works well in the logo, not so much in the navigation, the blog looks weird with it. Try combining fonts more. I think the pagination is a bit too large and the text seems a bit small to me, but maybe that’s just my eyes. :)

    I think the page ‘umbracms’ looks a bit cluttered, maybe implement more whitespace? I’m also not sure about the videos, maybe they’d work better each on separate line with maybe some description on one side? To me it looks kind of ‘boxed’, more whitespace could work better for that.

    • http://www.umbraprojekt.pl mingos

      Yes, I can now see the narrow font is a big problem, it keeps reappearing comment after comment. My font choice must’ve been a really poor one. Will improve, thank you!

      @EA commented on the artcle list in a similar tone as you refer to the videos, or at least this is the impression I get. In my reply, I was considering the “one article, one line” approach, though EA hasn’t replied to my doubts yet. If it can work for the videos, I guess it will work for the articles as well, I believe :). Thank you very much for the suggestion!

  • http://digitalartisan.tumblr.com Tanner

    I really like the solid color pallet.
    I would have to agree with the other commenters on
    the font choice a solid readable font would be a nice change.

    The few things I noticed were the contrast with the top nav links was kinda low,
    and could maybe use a little more breathing room in-between elements.

    Also (and this could just be me) the page navigation on
    the bottom seemed to be taking a lot of visual weight
    I am not sure if that was the plan or not, simply an observation.

    I am also learning myself, but I always appreciate an extra opinion so I thought I would lend mine.

    Other than that initial once over it looks like a clean site.

    • http://www.umbraprojekt.pl mingos

      I also appreciate any opinions that can help me improve my work. All of your points are valid and I will have to put some effort into each and every aspect of the design you mention. Cheers!

  • egiova

    First impression: design looks “blury”. Maybe the lack of “hue distinction” between body background and header boxes, and orange tone. Definitly, this orange needs to be more orange to be able to provock some contrast in the design. Too much unity.

    Second thought: I agree with the too often use of the same font. The condensed font gives a feeling of “narrowness” to the set. And content will need the same attention about font: an awesome font for header and a standard font for content! We have a problem of hierarchy here.
    My personnal opinion about body background is that these stripes are tiring and blury in the end, too much of them. But I like discret backgrounds, so, it’s entirely personnal. I like sharp design actually, and this design is not sharp at all.

    My solutions? Reduce the intensity of the grey background. Leaving the effect on the main header, keeping it flat. These will be my first moves.

    Have a good day.

    • http://www.umbraprojekt.pl mingos

      @Sasha dal Ponte already suggested a more subtle background, and I agree that the current one is pretty heavy on the eyes. I will replace it.

      What do you mean by “more orange”? A more saturated colour, or one that’s shifted more towards yellow? Or both?

  • http://www.empiricblog.com CRUX

    Since everyone has already mentioned the font issue, ill be brief. Instead of changing the font which looks good, just not when bunched up, could you try and adjust the kerning between the letters and the leading space. I think this would give it a nice contrast and some room for you eyes to rest. Overall really good clean design. Keep up the good work!

  • http://JonathanCutrell.com Jonathan

    Aside from the repeated comments above,

    1. The shine on the pictures doesn’t serve the design really well in my opinion. Kind of a faded fad – consider removing it altogether, and allow the pictures to shine on their own.

    2. Pagination is far too large. (Seconded opinion.)

    3. Footer is too present; that information isn’t as important as the background color is announcing it to be. Consider using the lighter grey in the bottom.

    4. The vertical text in the header is inaccessible. There isn’t any navigation to “C/C++”. Consider either making those clickable, or making a “topics” dropdown. If you are going to say “I do this”, you should also say “look at me doing this”.

    5. A few notes on the sidebar:
    Having placeholder and header text that say the same thing is unnecessary. Remove one or the other (“Search the blog”).
    The words “tag cloud” scream “boring template” to me. Especially because you don’t have a tag cloud – you have a “tag board” if anything; I’d recommend calling that section simply “tags” or “tag board”, or maybe “topics”.
    What is the purpose of having a date-sortable blog archive? Why do I care if something was written in June vs July? I much rather would be able to access articles based on semantics rather than chronology.

    6. I like the repo log. Consider making those expandable boxes rather than shown by default.

    7. What is the purpose of the word “blog” in the very top left?

    8. Calm the gradients down; they’re nice, if used well. The one on the logo is a little strong in my opinion. Flatten the design out a little bit to accentuate the pieces that aren’t as flat.

    Overall, a nice idea, and a lot of nice color choices and logic choices. Cool features in general! Good job.

    • http://www.umbraprojekt.pl mingos

      Thank you, thank you, thank you! Lots of valuable input, mate, cheers!

      5. Chronology – you don’t care about chronology, but a few people might. I know I do, in case of certain blogs. Especially if I happen to have forgotten the post title, but know an approximate date when it was written. It’s something I consider moderately important.

      7. The word “Blog” in the top left is going to change on each subpage. It’s the page title, unique for each one, and the title of the root node of the HTML5 outline. Not *the* most useful thing for the user (it’s for the search engines), so I tried to make it discreet. And kind of forgot to change it on each page of my design ;).