A bit of a redesign

lsw-x

It’s been 2 years since I’ve touched the design on this site. I keep meaning to, and all that – but you know how it goes, right?  Something about the Cobbler’s kids having no shoes….or something along those lines.

I’ve been re-designing this site since March 2010 — it’s gone through several different iterations .. all of them wanting to meet my goal of simple.  Just. Simple.  This is my personal site, and I want it to reflect me, personally – – but at the same time, I do a lot of blogging here about my books and my work – – so I couldn’t have shirtless photos of Johnny Depp in the header, if ya know what I mean?

I digress…….

So, this time around – I tried something a bit different from my norm.  For the last 10 years, my focus in design has been in custom design and development – – which means I do everything, mostly, from scratch.  When I set out to design a WordPress theme, the first tool I open is Notepad, because all the templates I do are written from scratch.  I have never used frameworks in the sites I designed.  Nothing against my fine friends who successfully market and sell theme frameworks – – but I have always found them to be somewhat limiting, to me.  I understand that to a mass population of users, to whom theme frameworks are marketed, it works well.  For a custom theme developer who likes to (and most often has to) muck around in the code bits and put her own little touches here and there – – sometimes, frameworks can be somewhat cumbersome.

I’m open-minded that my experience with this re-design may open my mind more to the concept and use of theme frameworks for WordPress and open to the idea of using them in certain cases in my own work with my clients, depending on the specs of the project.  Sure would be nice to have some of the work done for me, no doubt!  Having the WordPress features and functions already laid out in a nice, clean framework that would allow the designer to focus on what she likes doing is super cool…let me concentrate on graphics and CSS and I’m golden.

It just takes some getting used to, and I am not immune to change.

That being said, over that past several months, I’ve spent a bit of time with my friends over at iThemes who have a nifty framework for WordPress called Builder.  After talking with them, I told them I’d try it out on my personal site for a number of reasons – – the biggest one being that I obviously do not have a lot of time to pay attention to the design on this site, because I’m busy writing books and designing other people’s web sites.  I figured a theme framework may be just what I need to keep the maintenance here down to a low roar.

To a point, using a framework does keep the maintenance down a bit – since all the functions are already there for me, no need to re-invent the wheel.  However, despite that; I still copied over almost all the core template files (index.php, single.php, archive.php, page.php, comments.php, etc, etc) to my child theme directory, so I could change them to my liking.  And now, the framework is there to build on, if I choose to keep using it to design  versions of this site in the future.

So, this site is now sporting the Builder framework with my new summer time design (before summer actually runs out on me!) – thanks to my friends at iThemes.

It’s not completely complete, yet – – there are some elements that I’d like to add both to the function of the site, and to the design elements (I need a bird in here somewhere…I love birds).  But, for the most part – the site is finished, at least enough for me to happily display it here and let you look at it.

Also, since it’s been so long since I paid any attention to the code on this site – – there are several different features that are new here (but old to you WordPress users, since you’ve seen/been using them for some time).  Things like threaded comments, featured images, etc — as such, I still have some tweaking I need to do on the backend to account for some of the missing items – – such as, I use a related posts feature at the end of every post that pulls in the featured image thumbnail… and yet, I don’t have featured images assigned to each post, yet….getting there though! (Click over to the front page of this site to see the featured image thumbnails in action.)

So, yea – – small bits like that need to be cleaned up, which I will do as I go along…so just pretend that you see the featured image thumbnails in areas where there aren’t any – – consider it an exercise in stretching your imagination!

It’s lighter, in design and color, than my previous design – – which is what I wanted.  I have worked in my favorite color pink (no design on this site can be without pink!), and the color scheme is light and airy to wear like a sundress on a warm summer day.

Enough with the metaphors…..hope you like it!

Posted in , ,

45 thoughts on “A bit of a redesign”

  1. This is a really beautiful site, Lisa; it’s all about simple, with lightness and elegance abound. It looks as if you’ve spent a great deal of time on it, and it shows.

    If I may make a couple of suggestions:

    1. The comment field was hard for me to find at first; it doesn’t match the colors of the above three fields. I was trying to scout for it, as the white blended into the “Submit Comment” area, and the comment box wasn’t that obvious to me at first.

    2. On the subject of the “Submit Comment” button, part of it is cutting off the first text on the second and (to some degree) the third line in the box.

    I am viewing the site in Safari 5 in OS X, so I’m unsure if other browsers will render similar behavior.

    And as for my own site, it’s a new iteration that has little bits here and there to fix, more so than yours. But it’s coming along. Again, great job on the site!
    V.

    1. Velanche – thanks for the feedback! Making some adjustments to the comment form to see if it can’t be a bit more obvious than it currently is….it’s JUST like me to get carried away with the grays 🙂

  2. @LisaSabinWilson Looks like you finally went live, eh? Beautiful design you did, on top of @ithemesbuilder – those guys will be proud!

    1. @andrea_r @LisaSabinWilson I’ve got 2 sites of my own to redesign in the coming weeks. Will prob change 5 times before I hit on final look.

  3. Wow this theme looks incredible. Ive never seen anything like it before. The text area filed looks a bit out of place on Google chrome though.

    1. Thanks for your note…Wow. 🙂
      Fixed up the text area in Chrome – thanks for the heads up! Cheers!

  4. Right on, Lisa;the comment field stands out much much better. Everything catches my eye, and the borders really help.

    I was very inspired by the CSS opacity you’ve used in the wrapper area; so much so, that I’ve added it to my new site. But how was it that you’ve managed to keep the images from becoming opaque? My theme is based on Twenty Ten, and I tried adding the appropriate opacity tags (at 1.0 and 100) for those selectors in the images section, but that didn’t work for me.

    Again, great job. Hope you have a good week!

    1. Hmm… I’m not using any opacity in the wrapper area at all. The only place I’m using CSS opacity is in the comments section – just a touch of it for the replied comments that have the silver background .. just to give it that ‘overlay’ feel.

      You will run into the CSS opacity turning everything within the container opaque — no getting around that.

      Your site looks really nice, Velanche – good work 🙂

  5. Hi Lisa,

    the new look is brilliant, more than a coat of paint its a complete renovation!

    I love builder and have been over the moon since I found it for clients sites after trying a number of Premium themes out there this one really stuck with me.

    Great job

    kind regards
    Tony

    1. Hey Tony – thank you! Good to hear you’re having a good experience with Builder – I’ve had a lot of fun with it 🙂

      Cheers!

  6. That’s really clever, Lisa; when i scrolled up and down, at first I thought there was a faint wrapper I saw. Turns out that it’s not the case. The way the background images blend into the page really makes an impression. And it fooled me, a little!

    Coming from you, that compliment felt great; thank you for that! Still planning to add the font plugin you’ve mentioned about last week via Twitter, among other things. But it’s coming together, true. I even had to refer to your book (2nd ed.) a few times for help along the way.

    Thanks again Lisa; happy Monday!

    1. Ha – thanks. Usually, when I try for ‘clever’ – I end up wishing that I hadn’t.

      Wasn’t my intention to fool you with the opacity, but it does seem to have that effect, which is kind of cool. It’s all graphics, though – which I had fun with just painting the screen, much in the same way a mad artist splashes paint around on the canvas and calls it art 🙂

      Happy to hear my book helped a bit – thanks for reading, and happy Monday to you, too!

  7. Testing 1…2….3. Testing 1…2…3. Great new design. Even in the hinterlands of Bethel the connection is still very strong. Sanity break upon safe return.

    1. Good to know we’re still connecting … even as far as Bethel.

      Steer clear of the moose..call me if you clear radio silence 😉

    1. Perfection is so overrated.

      Thank you – – hopefully it won’t take me 2 years to get Suspension of Disbelief done….oh….wait….. 😉

  8. The site looks great Lisa. I love how you built up the header with widgets… Very creative.

    *sniff sniff*

    I’m like a proud papa. 🙂

    FYI: I noticed that you are using the Get Recent Comments widget. The images are 20×20 while the space is 30×30. If you change “gravatar_size” on line 653 to 30 and $version on line 629 to 11.1, the gravatars will render at 30×30.

    1. Aww, thank you, Chris – that means a lot coming from the guy who built the framework 🙂

      I actually had already changed the ‘gravatar_size’ in the plugin file; and yet it still renders at 20. I hadn’t changed the $version – but just did now – and still, no diff.

  9. Oooo, I’m just noticing more of the dashed lines. Looks like stitching. also! handwriting up top. 🙂 Two of my fave things. 😀

    Hrm…. i may be getting inspired and have to mull things over…

  10. Well you know the old saying, Lisa; no guts, no glory. But to be fair, I know what it’s like sometimes when ‘clever’ ends up getting the best of you. 🙂

    I had thoughts in the back of my mind about making use of some CSS3 properties, and I guess eventually they would end up on a site like mine. I do agree that opacity can give subtle, but distinct, touches that can make a difference.

    It was suggested on the WordPress forum that I’d try using another property in place of opacity for the wrapper, rgba. I was informed that it might help me achieve my objective, and indeed it surely has! I can control the opacity of the immediate object without affecting its descendants.

    Now you’ll know the next time someone asks. Hope your Monday was a good one!

  11. Well, I will need to retract that last comment. 🙂

    I guess that rgba worked too well…or not at all. Despite the values I’ve entered, everything was completely transparent. It became apparently when I’ve noticed that much of the footer text, as well as the text occupying the three lower columns, vanished.

    I ended up adding in the opacity I’ve had before; which, in the end, is not so bad.

    I’m not quite counting it as an impossibility, but sometimes it’s best just to let things go for awhile, and move on. 🙂

  12. I just love the website Lisa.

    Your work is awesome, you are a true master. I have so much to learn and thank goodness I have your book and our growing friendship to help me along the way!

    Thanks for sharing all that you do.

    1. Thanks so much, Kerry! It was really a pleasure to meet you in Boulder. Glad we were able to spend a bit of time.

      Doing web design, by the way, is like being in a living college — forever learning and having to constantly stretch, what I thought, were the limits of my own abilities.

      Fortunately, life is a never ending source of inspiration. 🙂

    2. Yes, I totally agree! And for that I am quite thankful. How boring life would be if I had nothing left to learn.

  13. Site looks great. I did do a double take on your Linked-In icon. For some reason I thought the icon was always a “ln” on people’s site so went and had a look at the official site an lo and behold its a “in”, just like yours!

    I stand better informed!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top