Personalising my Website's Layout
During today’s class, we were in the process of creating our own website showcasing my progression route. Before customising it to my own liking, I decided to look at 3 different layouts and comment on them to figure out which layout suits me the best.
The first layout was made to promote
a personal life coach. The part of the layout that stood out to me the most was
the bright background contrasting with the bold, black word ‘success’. The
change in font and size of ‘success’ suggest that this is what he is trying to
make you achieve. It is the key word for his profession. He added a background
with calm, happy colours to further suggest that he is trying to help you
achieve happiness. Additionally, he uses the font ‘lulo clean’ which seems to
be the same font he uses for his name at the top left corner. I really like how
he keeps the same font as it shows consistency in the brand he is promoting.
The layout is well-structured and really easy to navigate through as the tabs
are displayed on the top of the page.
The
second layout was my favourite one. It promotes a company called ‘BRW bar inc.’.
I really like that the logo of the company is placed on the top left corner. The
layout of the page is really impressive and well structured. An image and a
phrase are included in the home page which can make the audience understand the
purpose of the website better. Additionally, they include transitions when
switching from one section to another which is a cool way to navigate through
the website. The tabs are clearly displayed on the top and there is a consistency
in the theme throughout the different sections. I really like how the text
overlaps with the image of the girl as it makes it more modern and abstract. The
font used, ‘DIN Neuzeit Grotesk’ is very suitable with the minimalistic theme and
the capital letters grab your attention. Lastly, their monochromatic, pastel
mint website maintains the simplistic theme and is very effective. The pastel
colour makes the tone calmer which is suitable in this case as the theme they
are promoting is beauty.
This was the last layout I looked at. They included an image
of a car in the home screen which clearly displays what they are promoting. I do
like the fact that they included their logo on the middle of the home page,
however, the background interferes with it and doesn’t make it stand out. The ‘vintage
car specialist’ written below the logo is barely visible as the font is really
delicate and the size of the letters are small. This layout differs a lot from
the other two as it has a more complex and dark background. I don’t like that
there is no consistency with the selection of the font. The font on the tabs, logo
and the phrase below the logo are completely different which doesn’t promote
the brands identity. This is probably my least favourite layout out of all three.
After looking at all three options, it was evident to me that I wanted to proceed with the second one as my option. It is minimalistic yet very effective which what I am trying to achieve. I could change the colours of the page to customise it and play around with the different outcomes I could create.
One of the factors that I really liked about the website included the pastel colours. It made it easy to follow and calming to the eye. I decided to keep the same pastel theme with my own website, however, I decided to choose a lavender colour. Lavender symbolises a sense of purity, serenity and calmness. I also decided to make it half lavender and half white so I could create more layers of colour to make it look modern.
My next step was to start making it more personal. I replaced the ´BRW bar inc.' with my name and made it also lavender. This made the overall page look more coherent as the lavender matched well with the white and made my name stand out. I used the same font that 'BRW bar' used which was 'DIN Neuzeit Grotesk'. Throughout the home page, many rectangles are formed, therefore, I wanted to keep my name inside the rectangle too as a means of consistency and identity.
I tried experimenting with different layouts and moving the images and texts around to see if I could create something original, however, I didn't like the outcome. The original layout looked way better and more organized.
This is the layout that I prefer.
The next step was to edit the menu tab names to create my own. I replace the existing menu tab names with 'home', 'about me', 'portfolio' and 'contact me' as those were necessary the tabs that I had to include.
After I set up my website, it was time to change the picture and the text. I decided to change the text to 'Digital Portfolio' to keep it simple and to the point. I might change it later in the future but as of right now I am satisfied with how it looks. My name was not included in that text as it is placed on the top left of the picture and I don't like repeating information in my website. For the picture, I decided to include one of my art works I did a year ago. Even though this is not my favourite drawing, it matches really well with the lavender and creates a more personal space. In the home page, I wanted to display my work, instead of my face as that will be included in the 'about me' section. When someone clicks on my website, I want to showcase my work first and then introduce myself. The photograph and layout will change in the future but I am satisfied with the progress so far. When I change it, the process will be documented on this blog.
A challenge I encountered was that when I clicked on the 'phone' display instead of the 'computer', it distorted my layout. I wasn't aware of this and I am glad I noticed it so I can have it in mind. When working on my website I will ensure to check both views to make sure that everything looks good.
I realized that my website didn't really reflect my progression route. Once you saw the main page of my website you might think that it's a fine art portfolio. Therefore, I decided to make some changes to make it look more like a product design website.
I edited the text from 'digital portfolio' to 'product design portfolio' so it can be more clear to the viewers. Additionally, until I take my own picture and upload it, I used a picture from unsplash to replace my drawing.
I uploaded the picture and then used the filters in the 'photo studio' to make it black and white. Once I edited it, it looked so much better than the previous one. The black and white picture created a really nice contrast with the lavender. I am really happy with this for now, until I take my own picture. I want to replace it with my own picture to make it more personal. I could also sketch and upload small icons that can be used in each page. I am excited to think of ideas to personalise my website.
Overall, I am happy with how my website is coming along. I still have many more changes to do and the layout might completely change after a period of time. I will continue working on the phone view to fix it and make it look professional. I will try to include more sub-headings to the tabs and customise the rest of the slides as well.
References:
Comments
Post a Comment