New Wordpress site mockup "Tigris", feedback appreciated

Discussion in 'Web Design and Development' started by rogersmj, Dec 10, 2006.

  1. rogersmj macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #1
    Today I mocked up some ideas for my next personal site design (and eventually my third Wordpress theme), which I'm tentatively calling Tigris (following my penchant for naming these things after really old stuff). This is nothing like what it started out as, but I'm fairly pleased with the result. It's not quite as original looking as I hoped, but my early more crazy ideas gave way to the need to actually display content and not get in the way of that content.

    I'd like to give an overview of my thoughts on the design and ask for feedback and constructive criticism.

    First, take a look at the mockups (JPG, about 350-400k each, 1100x700; the actual site will be 900 pixels wide):

    [​IMG]
    Home page (blog)

    [​IMG]
    Sample blog post with comments

    [​IMG]
    Article

    [​IMG]
    Tech page

    What I was aiming for was several things:
    • Separate metadata from the posts into a third column on the right, creating a pseudo-three-column look
    • Create an easy flow of navigation
    • A polished, modern look
    • A mix of dark (like my first ground-up theme, Atlantis) and light (my site's current theme, Athens) elements to create a bold look with black and dramatic colors, but still leave the main content easily readable (dark text on light background)

    Here's a few little things I personally really like about this design so far; tell me if I'm off-base:
    • The sunken "arrows" that overlap into the preceding column, indicating what belongs with what. Kind of a visual hierarchy. Notice in the "Tech" (green) screenshot is an example of the live search being used; note the sunken triangular arrow in the right column now pointing up to the search box, because that's what that content belongs with. If the user clears the search field, that arrow will disappear and the right column will return to displaying metadata about the "Clearing the Jewel" page. I love little things like that.
    • Shininess, but not too much. At least I think so.
    • Bold colors. I always try to make use of strong colors, presenting a different color "theme" for each major section of my site.
    • Separation of metadata. This isn't as much a feature of this design as it is going to be a function when I write the theme. If you note the "Related Links" sections in the metadata column on a couple of the mockups...I plan on writing a function that will, via a regular expression, extract all the links from the post that are incorporated into the post itself and, using their "title" attribute, make a list of them in the metadata section. I plan on doing this because I have observed people using blogs and my blog in particular, and some of them, for some reason, have trouble finding links when you just randomly incorporate them into a paragraph, even if they're a bright color. So I figured having a list of links referred to by the post would be helpful.

    Here's what I'm not so sure of/not so proud of:
    • As it evolved, I suddenly realized it looks a lot like an Apple interface, or at least parts of it do. It sort of ticks me off. I wasn't looking at anything as a reference when I designed it, but I guess the rounded corners on some elements and a couple other details really make it look Apple.
    • I don't know if I'm sold on the navigation scheme. I want people to be able to easily go back up a level no matter where they are in the site. Take a look at the "Article" and "Tech" mockups to see the navigation system in action. Does it make sense? I'm thinking of doing a soft sliding effect when you click on the major sections as well.
    • I like hierarchical breadcrumbs, but I can't find anywhere to put them. For example, on the "Article" sample, the breadcrumb would be "Home / Articles / ". I use that on my site now and you can click on any part of the breadcrumb to go back to that level. The problem with this design is that no matter where I put them they look out of place. If I put them above the main title, it ruins the balance and clean lines of the top black area. If I put them in the main content area (at the top of the white area), it looks cluttered up there. I think I may just have to forgo them.

    Sorry for the long post. I really like to talk things out. This is going to be absolutely hellacious to turn into XHTML/CSS and then a Wordpress theme, but I think I'm going to do it. Let me know what you think, thanks!
     
  2. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #2
    HOLY #@%* THAT IS AWESOME!!!! i think i might go back to using wordpress for that theme only! (unless you can make it a rapidweaveer template). if you have working html versions can you pm them to me? i won't use it on the net, just to have a look
     
  3. Elrond39 macrumors 6502

    Joined:
    Aug 16, 2005
    Location:
    Utrecht, The Netherlands
    #3
    To the OP:
    Damn, that's gorgeous. I'm not at all into coding/programming/web-design (except iWeb, hahaha), so from a layperson's perspective: good on ya! Clean, easy to navigate (looks like), easy on the eyes.
     
  4. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #4
    i have realised, if you want live search, you are going to have to do a bit of ajax. lucky it is a few existing languages (xml, javascript, etc.) and nothing new
     
  5. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #5
    maybe put the breadcrumb thing where that navigation bar is at the bottom (where the copyright is)
     
  6. cookie1105 macrumors 6502

    Joined:
    Mar 27, 2006
    Location:
    London, UK
    #6
    very nice mockup. I think you should go for it.
     
  7. rogersmj thread starter macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #7
    Thank you! Yes, actually I plan on releasing the plain XHTML/CSS for these mockups once I am ready to release it, in addition to the Wordpress theme. I don't have any code for it yet, this was all conceptual. I plan on working on it during my free time over the holiday.

    Oh I know that. I'm a software engineer with a computer science degree, this layout and design work is just a hobby. I've written lots of AJAX stuff before.

    That's a good idea, I'll try that and see how it looks.

    Thank you for the kind words, everyone, please keep the comments coming!
     
  8. weldon macrumors 6502a

    weldon

    Joined:
    May 22, 2004
    Location:
    Denver, CO
  9. mkrishnan Moderator emeritus

    mkrishnan

    Joined:
    Jan 9, 2004
    Location:
    Grand Rapids, MI, USA
    #9
    I think it's generally gorgeous. :) What fonts are you using? It does seem like there are quite a number of different font families represented there, and this aspect does seem to take away cohesion. Other than that, I like it quite a lot.
     
  10. rogersmj thread starter macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #10
    I have never used sidebar widgets, but I will certainly look into incorporating that functionality into Tigris.

    You're right, I do have several going on. I use Trebuchet MS for the title, nav menus, and left sidebar, Verdana for the right sidebar, and Arial for the main content. I'm still playing around with that part. I want to reduce it to two fonts (not counting the logo).
     
  11. Jasonbot macrumors 68020

    Jasonbot

    Joined:
    Aug 15, 2006
    Location:
    The Rainbow Nation RSA
    #11
    Maybe yake it a little thinner, it seems a little fat right now. I love how the comments are on the side though!
     
  12. Shadow macrumors 68000

    Shadow

    Joined:
    Feb 17, 2006
    Location:
    Keele, United Kingdom
  13. rogersmj thread starter macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #13
    You mean the whole thing is too fat? The content area is only 900 pixels wide. Those images I posted have some extra stuff on the sides just to show what the background might look like, but the actual size is only 900 wide. I don't think I can go any narrower than that. 800px designs seem way too cramped.

    Thanks! I'm going to work as hard as I can but there's a lot of little details in this design that are going to be very time consuming to get working in the first place, and then to get working in all browsers (if only IE didn't exist...). On top of all that, I'm moving in three weeks. I'll work quickly, but I also am going to be very careful to do every part of this exactly right.

    I put up a little "coming soon" marketing page for it (hey, I can't help it :D ) here: http://rogersmj.com/tigris. As I say on that page, I hope to have a version good enough for beta testing by early January.
     
  14. weldon macrumors 6502a

    weldon

    Joined:
    May 22, 2004
    Location:
    Denver, CO
    #14
    I really like the numbered arrows for the comments page too. Those look cool.
     
  15. njmac macrumors 68000

    njmac

    Joined:
    Jan 6, 2004
    #15
    That is a great theme! I would love to use that for my site. I'm trying to modify the cutline theme right now but I like yours even better. Great Job!
     
  16. maxrobertson macrumors 6502a

    Joined:
    Jun 15, 2006
    Location:
    Jakarta
  17. ThunderLounge macrumors 6502

    ThunderLounge

    Joined:
    Sep 20, 2006
    #17
    You would be surprised, but they really aren't difficult to plug into a well designed site.

    You're essentially looking at an if/else check.

    If the widgets plugin is installed and there are widgets set by the user, then it displays the widgets. If not, then it displays the default layout of the sidebar as you would like.

    Think of widgets calling the same functions you would in the sidebar, but allowing the user to decide where they want it in the sidebar, or if at all.


    The "most universal" sidebars are unordered lists. Something like:

    ul
    [the if/else]
    li
    h2 your title h2
    {the function}
    /li
    etc, etc,

    [endif]
    /ul

    There are other implementations, and you can specify when you "register" the sidebar(s) in functions.php what you would like before/after the title, and before/after the widget.

    The "biggest" problem with widgets is the way the links widget (comes default with the plugin) blends in. The links function is automatically wrapped in an li tag, which can cause issues with some forms of sidebars.

    If you need to work around this problem (design first, then worry about it), the easiest way to work around it is to unregister the links widget, and register your own in functions.php. Same goes for the default search widget as well. But more because that one can be "ugly" in some cases.
     
  18. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #18
    how would wone make a live search like this? i am trying to make one for my site
     
  19. rogersmj thread starter macrumors 68020

    rogersmj

    Joined:
    Sep 10, 2006
    Location:
    Indianapolis, IN
    #19
    ThunderLounge -- thanks for the primer on the widgets, I'll get into that more once I'm coding the theme. I always do my sidebars with ul/li anyway so I think I'll get it to work without too much trouble.

    tominated -- There are a lot of different ways to handle the live search, and a lot of different layers of the implementation to consider. If you want to learn about it, I recommend searching Google for tutorials on implementing AJAX instant search. Those will inform you a lot better than anything I could write here.
     
  20. K20 macrumors member

    Joined:
    Nov 19, 2006
    Location:
    Torrance, CA
    #20
    Looks nice, I can't wait until my finals are over so I can mess with my wordpress blog more.

    Go for it
     
  21. apfhex macrumors 68030

    apfhex

    Joined:
    Aug 8, 2006
    Location:
    Northern California
    #21
    No. Leave it like it is. I think Jasonbot's "fat" comment is stemming from the fact that there isn't much vertical content present in your mockups. I think in real usage there would be plenty. Unless what you've shown has a fixed height :eek: — I assume not, though.

    Anyway I think it's 100% fantastic. The arrows that link everything together are GREAT. As a designer myself I understand and really appreciate how well they work.

    It does look Apple inspired, but it's almost hard to NOT create something that looks "Apple inspired" these days. :D It also has a bit of Windows Vista and Nintedo Wii in there I think. Either way, it does not look like a cheap ripoff of Apple or anyone else. It puts familiar elements together in a new and elegant way.
     
  22. tominated macrumors 68000

    tominated

    Joined:
    Jul 7, 2006
    Location:
    Queensland, Australia
    #22
    I don't mean to dig an old post up, but is there any new on the progress?
     
  23. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #23
    2nd that, the theme looks crazily good in the mock ups...

    you any closer to realising this dream?
     
  24. Nicolasdec macrumors 65816

    Nicolasdec

    Joined:
    Dec 7, 2006
    Location:
    São Paulo
  25. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #25
    I like it, but I like the one you currently have on your site better.

    I like the intermediary grey you have on the current site. Although I like the feel of parts of your mockup, I think you need some balance. I love black text on white backgrounds, but it's such a stark contrast to the black mass surrounding it. Maybe sneak some more grey in there?

    Just thought I'd offer some different comments.
     

Share This Page