Tim Blackmore's website redesign

Bellow you will see my design approach in creating Tim’s new website, having Danny Roach as the developer of this project.

BACKGROUND AND ABOUT

For this design project me and Danny were required to produce a new website for Tim Blackmore with  a more modern vibe as it is severely outdated. The website is about the gentleman mentioned above, it talks about his career and interviews he undertook.

We were given complete freedom over the design and were told that the client has no preference, besides the request to make the website look more up to date in any design ideas we have.

Our roles were divided easily as I took charge of the design and prototype side (while constantly asking for feedback from Danny Roach) and Danny took charge of the client communication and development of the website.

The website did not require a set of quidelines but as asked by our course,we created them bellow.

1. RESEARCH

In terms of research I tried to find blogs, other people’s websites that talk about them as inspiration. But sadly the last part was a bit more difficult to find and therefore I managed to get inspired by blog designs I found on Google and in general web design online. Finding designs for a lot of text was extremely difficult and I did not manage to find anything useful, which is why I had to think about a design solution for the heavy text website on my own. But luckily I managed to find a solution as you will see in this Portfolio.

2. SKETCHES

Based on my research and inspiration I presented before these are the design Ideas I created in the form of sketches before developing some of them that I considered a good design choice in Adobe XD.

First I tried to find different versions of diagonal sections in order to keep the brand consistent and having a good visually appeal.

Here I sketched more options and I came up with the dark and light dividing idea between sections. I also added images based on my lecturers feedback.

For the interviews page I had multiple ideas for the layout which is why I choose to first sketch them and then chose the idea I want to develop digitally.

For the Tim’s career page I had one idea in terms of sketches which I really liked as it creates a clean, simple and chronological layout, which is what I was looking for.

This was my favourite design as it looks so modern and at the same time modern and clean,while also following the brand I created. As shown above it has all the elements I need showing images representing the video, information about it and an audio button for the interviews.

3. DESIGN DEVELOPMENT

TIM'S OLD WEBSITE

I had to use Tim’s old website to extract all the information from and try to find other ways to design the pages full with text so it doesn’t look so text heavy anymore,which was a bit of a challenge, while also providing  a more modern design approach.

FIRST DESIGNS DEVELOPED IN ADOBE XD

HOME PAGE

PREVIOUS DESIGN

In my previous designs I tried different styles, such as a more retro one and a similar option to the one I have at the moment. At first I tried to use a normal menu but because of the big number of pages I had to find a solution which was the Hamburger menu. It did represent a risk in the client finding it a bit too modern but in the end the risk taken was worth it as the client liked it and the website looked way more modern and clean. I also used golden graphic elements which I gave up in the end as it did not help the look of the website.

CURRENT DESIGN

My current design is more simple and modern, using forms and colours to divide my sections. Elements that became the brand of the website in the end. The home page is divided in sections such as “About”, “Menu cottons” and “Contact me”.

I chose to add more images in my design as it looks more visually pleasing as well as making it more easy to read, considering this is a website heavy in text.

CAREER PAGE

FIRST DESIGNS DEVELOPMENT IN ADOBE XD

As the original website had a page full with text and boring to look at I started thinking what design solution could I find that would make this page more easy to read. For this web page I didn’t make any specific research as I found my answear straight away by using a counting method for all events from Tim’s career. This method not only makes everything have more sense but it also looks very clean and makes total sense. As all events are presented chronologically.

In terms of design it was hard to decide on the hardness of the lines and the font used. Therefore I tried to put more choices next to each other and choose the one I considered more suitable for the page.

CURRENT DESIGN

Therefore here is the final design for the page . I choose to add grey squares behind the dates as it helps making more clear of the structure I created, separating all career events from each other.

As I added a picture as a background in one section, I had to change the colour of my text and elements in order for them to be easily seen,which is why that section was transformed in white.

I love how my numbers make an unconscious reminder that those events are in a chronological order and it also helps the viewer from getting  a bit lost while he searches for a specific date.

THE BIG DIFFERENCE BETWEEN THE OLD WEBSITE DESIGN AND THE CURRENT DESIGN I CREATED

BLOG PAGE

My first design represent my first design ideas developed which I was not satisfied with it. As even if I was going for a more retro feeling as I thought the client might like it and I was also inspired by the black and white photographs, I felt like it lacked a more modern vibe, which is what the client requested even if he didn’t have a style or preference in mind.

Therefore my last design in my perspective is a representative of a modern design yet simple and really far way from the heavy text situation I encountered on almost every page.

My first design represent my first design ideas developed which I was not satisfied with it. As even if I was going for a more retro feeling as I thought the client might like it and I was also inspired by the black and white photographs, I felt like it lacked a more modern vibe, which is what the client requested even if he didn’t have a style or preference in mind.

Therefore my last design in my perspective is a representative of a modern design yet simple and really far way from the heavy text situation I encountered on almost every page.

All my previous designs were aiming to separate each blog but I just didn’t manage to create the look  was going for until i did a bit more research into other blog websites.

My final design takes elements like the ones I circled above (read more button, dates as titles, separating blogs through squares or like in my final design separating lines as it looks more clean and elegant) and makes them more modern and clean,with a more aesthetic feel. The white background is always a favourite of mine as it makes everything lighter and cleaner which is what I like in my designs.

My final design can be seen on the right and my main inspiration below:

GALLERY

For this page my final design is not very different than my first idea but it does look visually more pleasing and goes with the brand I created for the website. Which is why I believe it reached it purpose.

Now the gallery actually works as a gallery and doesn’t look like an old album. Furthermore the transformation from a normal menu, to a hamburger one it makes a huge difference in the design as it looks more aesthetically visually pleasing because of the number of pages the client wants in the menu,which is why i believe a hamburger menu was the best choice to implement.

CAREER HIGHLIGHTS PAGE

For Career Hughlights page I tried multiple layout examples that would include all the text the page has and the brand as well. Which is why I was trying to see how it looks like with diagonal and normal sections.

In the end I chose the last sketch as it alternates different background colour sections which makes the design look better, but after my lecturer’s advice, I added images as well which makes it look even more visually pleasing.

DEVELOPING IN ADOBE XD

Below you can see how based on my sketch I developed my web design from first digital approach to my last final design solution.

In order to keep the brand consisted I tried to come up with  diagonal layout just like in my home page but I didn’t look visually good at all. Secondly i tried to add colour sections(white, light grey,dark grey) which even if it made the design better it was still not good enough.

My middle approach is what I thought suited the page better. It looked clean,modern and quite good. But I did not feel like it was good enough. Based on the feedback from my lecturer I added pictures under my sections, as soon as I received good  quality ones from the client. Moreover, as last touches, in order to go better with the branding I added a thin diagonal light grey line in all my dark sections,which goes perfectly with my brand created and by my surprise it gives the web design a more modern feel which is what I wanted from the start.

INTERVIEWS PAGE

This being my last design and one of my favourites didn’t require any other design approaches as by the time I got to this part I had enough research to create many sketches and be able to choose my favourite from them all and a good idea that I developed and enjoyed.

The only element that I added that wasn’t in the sketch was a fine diagonal line in the black sections which helps keeping the brand consistent but also adds a touch of modern feeling to the design.

I managed to include everything that was needed, a title, images for each interview, small description to each, a visually pleasing separation from each of them and a good design solution for the audio part which in the old website the user had no idea that if you click on the image an audio would show up as there was no text or icon to suggest that. Therefore here I added a button for each interview with both a text and icon for what the icon represents.

SKETCHES I DID NOT DEVELOP

I tried to create a layout that presents the interview in a clean and organised manner. I had multiple options in mind as you can see but I chose not to go with these two as even if they have a good structure I believe that my final option had a more modern touch to it while also going with the style of the website better.

This option is a bit more simple, yet quite effective as it presents nicely all the information and elements I wanted to show, but as mentioned above a bit too simple and not modern enough.

FINAL DESIGN OPTIONS

Bellow you can see the transformation from sketch to developed design and what changed. For example the title is positioned between two horizontal lines  as it goes with the brand I have developed over the other web pages and it also brings more structure and balance to the composition.

Moreover, I added a grey diagonal line in my black half sections again with the purpose of keeping the brand consisted. It was also a design solution from the other design ideas with diagonal background sections which didn’t look visually pleasing. Taking a look back at it I believe it gives the design a minimalist approach and it makes it even more modern and elegant,elements that I was going for which I really like.

FINAL DESIGN SOLUTION

ALAN FREEMAN PAGE

This page I created automatically  on Adobe XD as while developing the Interviews page and thinking about the following page that I needed to  design I came up with this idea right there and therefore this is what I developed.

I gave under the circled image a square as it would keep the brand created more consistent.I did try different options such as full square or  a square with just an outline but this option seemed the best.

The reason why I added images at the end is as the page looked a bit too simple and bring and adding those pictures in the page makes the stories more alive in the eyes of the viewer as it shows exactly what happened. I quite like the retro vibe the pictures give the page by being in black and white and it also goes very well with my grey colour design.

OVERALL THESE ARE THE DESIGNS I HAD TO SAY NO TO, AS THE CURRENT DESIGN FITS BETTER TO THE BRIEF FROM THE REASONS MENTIONED ABOVE

MIND MAP

Here you can see my mind map over the project. I tried to write about everything I had to do including my worries and solutions that I had to find, and my preferences in terms of design which I knew from the start as the brief requested a more modern look.

TIME MANAGEMENT

I have worked on this project for the period of 8 weeks and the only milestone encountered was the heavy text design solutions I had to solve and the bad quality pictures,which was solved in the end as the client sent as good pictures to use in week 12.

The client really like my design and therefore we did not have to do any changes.

CONCLUSION AND FINAL DESIGN

Here you can see my final design solution, having a completely redesigned website, with a modern feeling and yet not too much as the client is not a fan of very futuristic or very modern design, but just enough so it can be up to date to other websites.

I chose a dark grey ,regular light grey and white theme as they are very elegant together and can go well with black and white pictures as well as colour pictures.

Even though the heavy text from the original website was quite difficult to design into new web design idea I am quite happy with the result. And so is the client.

In the future I would like to receive all images in good quality as some of them were having a really bad quality and maybe receive the images quicker from the client so I can know what I can work with,which means better communication.

Close Menu