Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

New Wordpress site mockup "Tigris", feedback appreciated

rogersmj

rogersmj

macrumors 68020
Original poster
Sep 10, 2006
2,169
36
Indianapolis, IN
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):

blog_thumb.jpg

Home page (blog)

blog-post_thumb.jpg

Sample blog post with comments

article_thumb.jpg

Article

tech_thumb.jpg

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!
 
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
 
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.
 
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
 
mrogers said:
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.
Click to expand...

maybe put the breadcrumb thing where that navigation bar is at the bottom (where the copyright is)
 
tominated said:
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
Click to expand...

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.

tominated said:
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
Click to expand...

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.

tominated said:
maybe put the breadcrumb thing where that navigation bar is at the bottom (where the copyright is)
Click to expand...

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!
 
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.
 
weldon said:
Will it work with sidebar widgets?
Click to expand...

I have never used sidebar widgets, but I will certainly look into incorporating that functionality into Tigris.

mkrishnan said:
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.
Click to expand...

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).
 
Jasonbot said:
Maybe yake it a little thinner, it seems a little fat right now. I love how the comments are on the side though!
Click to expand...

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.

ChrisG said:
I love it! I want to use it RIGHT NOW!!!
Click to expand...

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.
 
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!
 
mrogers said:
I have never used sidebar widgets, but I will certainly look into incorporating that functionality into Tigris.
Click to expand...

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.
 
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.
 
mrogers said:
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.
Click to expand...
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.
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back