Redesigning the Portfolio

comments 6
Web Design

JainaMistry.comLast year I made a make shift one page design for my portfolio. It was very simple, a little rough around the edges, but it had all the details I wanted on the portfolio.

Translation – all the content was there but the design work behind it wasn’t all that well thought through.

I was happy with it for maybe a week after it went live but from then, I wasn’t. I knew it was just going to be a stop gap design until I did a ‘proper’ design. Months later and that ‘proper’ design never happened.

Until last weekend. A weekend with practically nothing planned in, it being bloody cold outside, what better time to sit down and give the old portfolio a rethink?

This time I sat down with a better picture in my mind about what I wanted. I knew I wanted to keep one thing from the stop-gap design: I wanted to still have a one page portfolio.

Why?

I like the idea of a one page portfolio. One page where you put everything the user needs to know concisely and in a well organised manner which is pleasing to the eye. And yet, not overcooking the page with so much content it struggles to load in a time while the user’s still interested as to what’s on the page.

First thing I had to figure out? What content do I want on the page?

What with this being a portfolio some element of my designs have to be on the page. I chose a couple of sites, landing pages and emailer that are some of my better pieces and put those aside.

Next? Contact information. I need to have a way for someone to contact me for enquiries or general comments. Also other ways to get hold of me in this new fangled social media world. I have chosen to have my Twitter, flickr, Facebook and Linked In identities all available to find from my portfolio. A nice good range of ways that people can find me. Also a contact form, with my email address visible, giving people the opportunity to choose which way they’d rather get hold of me.

Finally I realised I needed to sell myself a little bit more on this portfolio. Sell myself and inject my personality into that. So i chose a few keywords and wrote the copy as if I myself was speaking the content. I hope it comes across that way!

That’s that for the content, next, the design. Having a one page portfolio really makes you concentrate on the important items of content and how best to organise them, while maintaining a layout that’s pleasing to the eye.

In the beginning I was trying to think of something really quirky and throwing out the old habit of having a header, footer and main content area. But then there’s a reason that works, right? So I stuck with it. My favourite colour combination is red and black, mixed in with grey. Keeping in tune with me wanting to splash my personality across the page I stuck with this combination. I find darker layouts a little harder to design, as they usually end up looking a dark mess with nowhere for the eye to get naturally drawn. I think I got the balance right in the layout I chose.

Simple header, main feature outlining who I am and what I do accompanied with a little bit of dynamicity with the rotating images at the top. Next up, me trying to sell myself with my skills and a bit of marketing. Trying. I’m not much good with the words!

Then comes my recent work, all nicely lined up. I’ve only chose 6 pieces to highlight and hopefully will update those when I do new work I feel more proud of. I’m not going to let this layout stagnate.

With the footer, I tried to put as much work into it as I could, but still keeping it simple. I like footers which are more than just a copyright statement and email address. With that in mind I set out to make mine a bit chunkier but with all necassary information.

Adding in a texture from stock.xchang to the header and footer to make them both look a bit more interesting than flat colour or a gradient. Also, as I have been taking 1 photo a day for the year so far I wanted to try and get my own photography onto the site, I did! Managed to use this photo as a texture too.

In terms of scripting used on the page, I used jQuery as the JavaScript framework. Fancybox was the lightbox type script of choice for my images to pop up in and also Ariel Flesler’s localScroll for the smooth scrolling effect from bottom to top.

Every time I go back and look at the site I keep thinking of minor things to update and change. Well, I guess, every design is a work in progress, even when it’s finished.

6 Comments

  1. I think it’s good your portfolio has lots of fancy coding and good design as while you have all the examples of you work the protfolio itself is probably the biggest indicator of your design ethos. Or something

    • Thank you 🙂 I hope I’ve got it right. Will only be able to tell when people see it and what their reaction is!

    • Well, i was umming and ahhing about getting a different Twitter account. But eh, can’t be bothered. I had a look around and most people put their personal Twitters on there, however mad it gets!

  2. I told you this already but I really do like the spiffy new layout on your portfolio! I especially love the changing image on top. You are inspiring me to do some “out of the box” thinking when it comes to my own portfolio, it doesn’t always have to be so formal, it’s suppose to reflect who I am.
    Very nice work!

    • I think that’s what I realised with this redesign. I forgot that it needed to show a bit more of me, not just a list of my skills. Have fun with your portfolio!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.