July 13

Tags

Portfolio Design – What’s Changed?

This Portfolio has taught me one important thing; don’t ever let myself get a tattoo!

A lot’s changed since I first made this website, and my first post about my portfolio design was done back on my original website! When I had a fancy .wordpress.com URL and it looked… well, I wasn’t very happy with it. It looked very soft and dull! Now, what you’re seeing is nothing close to what it once looked like and I thought it’d be interesting to show the change.

When I was deleting old pictures from my website, I realized it might be fun to post up some of the first ones I made and compare them with the newest ones.

| Header Image

PlainHeader15

This was the original header for my Portfolio, with text written over the top of it. This was before I had created my logo and just made a very quick and simple striped pattern. At this stage, I wasn’t so sure about what I wanted it to look like, but already had the colour scheme in mind. Hence the offensively orange orange!

This slideshow requires JavaScript.

And these were some attempts at making a title as you see it now, which I’ve added to a slideshow since white on white would make the text look invisible! But I was trying to find a good identity for the website while also being simple, matching the theme, and actually being visible!

This slideshow requires JavaScript.

And these were the final attempts at making a unified style! I incorporated the stripes into the typeface, added in a shadow effect, and the deed was done. For the final design, well, just need to scroll up!

linecut

| Featured Images 

One part of WordPress I like is that every post and page can have a “Featured Image”. Being a Designer, I liked the idea of creating a unified theme of how I can do these featured images. To create a template and colour scheme I can adhere to and make every post and image have a unique image to it!

This is the first one I made, which was for the original Portfolio design post!

LayoutHeader1

It had the beginnings of the uniform design, with the orange border at the bottom and the logo in the corner, but I still wanted a bit more than that!

AGPortfolioDesign

And so this was what was created next!

I used a screenshot of my original website itself and created a small cut-off area on the left where I created a logo which should be very familiar as I still use it even today. I made a quick paintbrush as a vector, filled orange, and added some text over the top. And I was reasonably happy with this!

I used this exact template to make other icons but the other categories I wanted my website split into.

But it was shortly after finishing this I began working on a new website, and required different sizes for the images. Rather than re-sizing, and realizing I still wasn’t quite happy with them, I changed the icons and made a new style.

AGPortfolioDesign

And this is what I came up with! I took a screenshot of the new portfolio once again, after having updated the icons and logos, and placed it on the canvas just like how I’d done it before. I found the text was a lot bolder and it looked much more clean with the white text and orange outline, rather than the other way around.

But, the problem with this was, it’s quite hard to read. It’s not as bold. And so I went through quite a lot of changes in an attempt to make the icon easier to see at a glance. Glance value being very important in games and graphics!

And these were two attempts at making it happen.

The first one I just thought looked not in-keeping with the theme. I had no gradients and was using nothing but block colours, so the faded orange just didn’t fit. It didn’t work in the second either, but I incorporated the striped pattern into the design and that gave me the inspiration for the final one.

AGPortfolioDesign

Which was this!

For this one, I decided to focus on re-creating a “tab” which was easily readable, but most importantly matched the design of my portfolio. And I think it worked well. I used stripes to outline the vector image for some added flair, added my logo at the bottom along with the orange stripe I used as a footer, and I think it matched with the portfolio quite well!

This final design had everything needed. It looked good, it matched the theme of the website, and most importantly it was usable and clear by users! And that was that.

Here’s a few image galleries showing the same evolution for some other headers.

linecut

linecut

It’s been a fun and creative experience creating a website! And I’m very happy with how the design looks now. (That doesn’t mean a month from now I might change my mind, but we’re out of the woods for now!)