Featured Image

HarvestingView full piece

 

A Creative Life

Mafe Maria Realigns

Nov 2, 2006

I’m not one of those insatiable designers who redesign and reboot compulsively only for the pleasure of creative change. As the pure ISTJ that I am, behind everything I do, I must always begin with a reason why and some concrete goals to direct my work. Without such direction I just get lost and don’t accomplish anything. So, after 86 hours of work (some wasted, some not), I’m finally proud to present the recent changes to Mafe Maria. They all aim to solve the design problems I identified two months ago after doing some serious self design review.

What’s New

The biggest changes involve the layout of the home page, and the presentation of playground entries. Yes. It’s true that on the home page I’ve pushed blog content even further down than it was in the first place, and this is risky. However, instead of a large image that doesn’t change for months, the top of the home page is now used to feature the latest playground entry at full size, which is not decoration, but actually one of the main pieces of content of this web site… A piece of content that I was afraid was not being noticed before.

A side effect of this, is that it pushes me to create playground entries more often. Since I’m now “punishing” you with more scrolling on the home page, at least I want to make it worth your while by giving you something fresh to look at as often as possible. And then, when I create entries that I don’t like, I won’t be able to sleep at night for as long as the poopoo artwork is up there introducing my site in such a powerful way.

It is still a risk that newcomers will see the playground entry and not scroll down or click on navigational links to find more content. But I’m hoping that the visual impact of the art may entice most users to explore more. It only takes a few seconds to see the art (or even click on it), as opposed to reading a full post, and then wanting to explore more. Of course, these are just assumptions, and there will probably be users who won’t figure out the new Mafe Maria. But, if you come and don’t go beyond the playground entry, my guess is that you probably wouldn’t have been interested at all on what I write about.

If you do scroll down below the artwork, I am now happy to offer you three different areas really quickly:

  1. The latest blog post, now including a much larger excerpt than before. The previous design forced me to make short excerpts attempting not to push playground entries too far down. Now, newcomers can read a little more before diving in, which is a good thing because I don’t always get to the point on the first paragraph of my posts.
  2. Recent entries, which remained similar to their previous version, but are now found higher on the page. Dates on that list are gone, and I’m not sure if people will miss them.
  3. List of topics (i.e. blog categories). No big changes here.

Below that, if you’ve ventured that far down, I also offer you a new area I had long wanted to include: Short links to blog posts, web sites, and other external content which I am currently enjoying and want to share without having to write full posts for them. For the home page, I much prefer this over a blogroll. It’s more dynamic, and after a while you’ll be able to notice which are the sites I read anyway since I probably will have posted more than one link to them.

Diving into the site, I believe space is now used a little more wisely; see the playground, for instance. Page width is not fluid any more, but I hope to have given you a comfortable width for posts. Anything wider than that is really hard to read. The shorter side bar also feels cleaner to me. You’ll find the same secondary content that used to be there, but recent entries are now presented first than categories, and categories are compacted into a select box. I hope to hear from you if you find this annoying and prefer the longer list.

There are several other small changes I won’t bore you with. The main point, though, is that I feel good about this version. I reused a lot of what was already there which worked and didn’t need to be changed — “Good designers redesign, great designers realign” — but I feel that the small changes have solved the problems I had with the site, and I hope they have also helped my readers navigate and discover Mafe Maria’s content better. One example is, my friend Marla commented that she really likes the “new” journal page (i.e. archives), but guess what: That page is not new. It has been there at the bottom of the side bar for a long time. So the fact that Marla was now able to find it so quickly and that she finds this helps her better go through the site, makes me very happy.

The Road Blocks

One implicit goal I set out to achieve was to improve the visual design of this web site so that it would better reflect my skills as a web designer; so it would make a stronger connection with my professional work and somehow help promote it.

I struggled a lot with this: Trying to exude abundant creativity and originality in every corner of the design; attempting to fit a piece of my portfolio on the home page; agonizing to make the design of the site work as an extension of me, personally. And then I realized that I needed to stop.

I decided that this site doesn’t have to push traffic to MQStudio. If it does, great… but notice I’ve removed the silly link to my portfolio from the navigation bar. It’s still on the footer, and in relevant blog posts, but it has no place here as anything bigger than that. I don’t write a lot about my work. I do some, but when I do it’s a personal reflection, and not a doctoral dissertation attempting to teach anything to anybody.

Regarding the display of creativity… It wasn’t working. It was too much pressure and I wasn’t talking easily to my muse. It was more like I was grabbing her by the hair and dragging her to the computer. She wasn’t happy. Suddenly it hit me that as wonderful a template as I could create, the effort would end up being a one-day flower. Sure, I would probably get some praise and I would be very proud of it for a while. But then, it would inevitably become old. I had something much better to show: The creative playground entries. No, they’re not web design. They do not show what I can do for you as a professional designer. But they’re fun, and if they change often enough, they’ll make the site more dynamic. Every day I post a new one, Mafe Maria’s visual design will change. How much fun is that? A lot for me, if you ask me.

Concluding

There are sill a few tiny bugs I’m trying to solve, and there will probably be some continuous tweaking of little details… nothing I think you should be able to notice. The next big step (and personal project on my list) is adding the photo gallery. I suspect I’ll still keep a lot of photos on Flickr, but the photo gallery will display those that are much more important and personal.

Feel free to send me feedback privately or as comments to this post if you want to share good or bad impressions about the changes. Some will disagree, but I take professional criticism pretty well, and this site is also for you — regular readers — anyway.

Share this post: Share on Facebook Share on Pinterest Share on LinkedIn Share on Google+ Share on Twitter

11 comments:

  1. On Nov 2, 2006, Danny wrote:

    I think the new look/layout is fantastic and I like the idea of featuring your playground entries in the header. A few thoughts  / ideas / suggestions:

    1. The individual blog post pages don’t currently feature the captions for the playground items .. perhaps they should? One could reason that if you found your way to an individual blog post, you probably did so by clicking through from the homepage. However, I usually get to them via your RSS feed and while your playground items show up there as well (aside: maybe a separate feed for entries on your blog and playground?), I still like to see the information about them in context.

    2. Yay your site gracefully degrades for no JavaScript! Good move :) I’m stingy about what sites I allow JavaScript for, and I saw the list of links that replace the automatic drop-down with your post categories. At first I was thinking, “well, why even include the drop-down then?” but then I realized the point is to tease and encourage the use of JavaScript here for such things. Good idea.

    3. Shouldn’t it really be “Entradas en español”? :)

    4. Minor nit, but the search box and search button on the individual blog post pages are different heights in IE7 (it’s fine in Firefox 2.0).

    Overall I think it looks fantastic and I may have to get you to help me with some layout thoughts for some potential sites I’m working on writing, as my design skills are quite limited (I can lay stuff out fairly well using HTML and CSS, but designing layouts is a different story). I’ll have to compile some notes and maybe we can sit down and chat about it next time you’re in town. I’m really very impressed with what you’ve done with WordPress … lord knows I’m not brave enough to delve into their skinning system any more than I absolutely have to.

  2. On Nov 2, 2006, Maria wrote:

    Thank you Danny for such thorough feedback!

    1. I thought about it. Many people get to my post pages directly from Google search results. So you’re absolutely right: They won’t know that the image on the header is a fragment of content. To them, the playground entry would be “decoration”. So yes: I may end up adding the little caption to all pages.

    I do have a separate feed for the playground entries (which is now better displayed on the home page). However, my FeedBurner plugin is redirecting it to the main feed for post entries. It’s on my list to fix. I have noticed though that one of my readers is being able to get to that feed without redirection to the main FB feed. Wonder what feed reader he’s using.

    2. You may well be the one and only who ever notices that. Thank you!… I actually tried to remove display of the select box altogether when JS is off (instead of saying it doesn’t work), but it’s not easy the way I coded it.

    3. YES!… smart-ass… :)
    However, “entradas” is not the right word. It means something else. I’ve been thinking a lot, trying to find the right one. You know: I don’t know any web jargon in my mother language. Need to find some Spanish blogs to figure it out.

    4. I know! I know! Alignment of buttons is my nemesis at work. I’ve tried all kinds of things and can’t get it to align perfectly in all browsers. This was the least worse of all options I explored. I’m thinking of replacing the button by an image, but then it won’t resize if people want it larger.

    Thank you again, Danny. Please keep the comments coming if you find anything else that should be improved. I’ll be happy to help next time I’m in town. We’re thinking of going early next year for baby DiPaolo.

  3. On Nov 2, 2006, Kim Rodriguez wrote:

    I like the new design! And it’s great to get the instant treat of your artwork…and that it changes….

  4. On Nov 2, 2006, Petie wrote:

    Well, I already commented directly via e-mail that I love the new site. I do especially like the new section about what you’re “into” now. Obviously, I also do love the artwork. I particularly like the current one, as you know, graphically, but also the size. On my particular laptop, that size works the best.

    One small thing – and I may be wrong on this, but I can’t comment on the artwork from the main page. You have to click on the artwork to be able to access the comments. (playground and artwork are being used interchangeably here for me.)

    I smiled at the comment of baby DiPaolo above. :) We were discussing when we would next go up to SLC this week, too. Chris has a free SW ticket we’re saving just for that. We might have to wait to see if there will be a baby Stultz…

  5. On Nov 2, 2006, Maria wrote:

    Thank you Kim.

    Petie,
    I’m glad you mentioned that… It’s actually something I wanted to validate. In my plan and design, the comments text within the playground caption should be a link. However, the way how I have set up “hidden” comments for playground entries didn’t allow me to link directly from the home page without recoding that piece. It is doable, and I should definitely enable that link… I’ll work on it the coming days.

    “baby Stultz”… sounds cute… ;-)

  6. On Nov 3, 2006, mandarine wrote:

    It is just gorgeous.

  7. On Nov 8, 2006, Marla wrote:

    I like that this design showcases your art much more dramatically. It’s more personal, this design. More revealing of who you are.

  8. On Nov 16, 2006, polaris wrote:

    I love the realignment. It’s awesome that you can present the playground, photos, and journal in such a functional yet attractive way. Perhaps it is just because I am less conditioned to viewing two sidebars placed together but, I wonder if it would be better for the “Topics” sidebar and the “Recent Entries” sidebar to be on opposite sides of the main body text.

  9. On Nov 16, 2006, Maria wrote:

    Thank you Polaris.
    I see what you’re saying. That is something I struggled with in the previous design: the double sidebar. It didn’t work on that one, and after trying it on this one, it didn’t convince me visually either. Feels very busy.

    However, I’m interested in your suggestion. Does it come from your desire to see the full list of topics expanded in post pages, as opposed to presented as a select menu?… Or wait, are you talking about the placement of sidebars on the home page only?

  10. On Nov 16, 2006, polaris wrote:

    Maria, I was indeed referring to the placement of sidebars on the home page only. When I’m “inside” the site and browsing the topics, its all nice and clean. Cognitively speaking, I usually assume a mapping from the topic headings in the leftmost sidebar to the material in the main body of text. The “Recent Entries” sidebar, which is placed in between the topics sidebar and the main text seems to interfere with this mental mapping.

    There is another reason why I feel that the two sidebars should be separate. The topics sidebar is like looking at the contents in the beginning of a book (or like the original Yahoo! search). On the other hand, the “Recent Entries” side bar is somewhat like looking directly at the index at the back of the book (or like Google search). This isn’t a strictly consistent analogy, but my mind organizes it that way. So I would convert this logical separation into a physical separation on the webpage, by putting the Recent Entries sidebar way over at the right.

    Now that I reread my comment, this is all sounding vaguely new-age-nerdy. I hope the reasoning makes sense though. (Now I am off to examining the order of the fields in *my* sidebar ;) )

  11. On Nov 17, 2006, Maria wrote:

    Thank you Polaris… I really appreciate your detailed explanation. “Vaguely new-age-nerdy” (this made me laugh), but I understand what you’re saying.

    It’s interesting. What you’re describing hadn’t occurred to me, obviously. My intention was to collect all secondary information and place it in the same area for organization, and also so that users don’t have to move their mouse from one end of the screen to the other. To me, topics/categories and recent entries are similar in function (i.e. prompt users to browse more)… But you see how everybody is different… Your observation is definitely something I’d be interested to validate with more people. You may not be alone there, and if that’s the case, I’d love to know…