Website Design and Development

Personal Portfolio

the brief

For my end of semester submission at University, I am required to present my past 12 weeks of projects on a website. The website could be designed however I saw fit and show my development work from the past semester. The main purpose of the website is for my end of semester hand-in, therefore my workflow needed to be clear, but also for potential employers and clients, therefore I needed to present my work professionally.

research

My initial stage was to research what style I wanted to convey on my portfolio. I wanted to ensure the branding I chose for my website would also be appropriate for printed content, for example business cards, and digitally. I took inspiration from magazines, Pinterest, paint colours and other designer’s websites.

I collected my findings in my sketch book along with notes to remind myself of my thought process. A element of design I especially liked was the use of a black background because it made the content stand out. I also liked the use of bright accent colours because they stood out immediately.

personal inspiration

I also took inspiration from my family holiday photos. I loved the contrast of the dark navy with the mauve and light blues.

I considered that I could use my personal photos as a way to give a human element to the website so the user could see the personality behind the work.

pinterest inspiration

Finally, I used Pinterest to search for different colour palettes and fonts. Again, I liked the use of a dark backgrounds compared to white because it made the content stand out. I liked the professionalism of the black with a fun pop of colour or use of a gradient.

Although I love calligraphy fonts, I was cautious they could be too difficult to read. Therefore I focused on san serif fonts and I found ‘Lato’. I have seen Lato used on other websites before and I have always remarked how easy the font is to read, therefore I felt it would be an appropriate font to use on my own website.

final branding

I finally decided to use 'Lato' as my main font, using all capitals for heading so they would stand out and sentence case for the main body so it is easy to read.

I also decided to use black as my main background colour, with white text to contrast, with a bright accent of blue and pink.

initial sketches

Once I decided my branding, I started sketching quick wireframes to help me to start designing my final structure for the website. I again took inspiration from other designers and pinterest. I gave myself a few minutes to throw down many different designs, all slightly different to give myself choice when narrowing down my final design.

Taking inspiration from other designers, I decided I want to keep my pages to a minimal because I wanted the user to focus their attention on the projects the most, rather than navigation to other pages. Equally I wanted to ensure the other information, for example how to contact me, was easily accessible, therefore I decided to use one main homepages with access to my projects, about me, my process and contact me.

further iterations

Using my initial sketches and knowing I wanted to keep my pages to a minimal, I started to sketch an first iteration of my final design for my homepage. I did not consider the exact text that would be included, only the main content, for example where the about section would be in relation to the contact me section.

I was happy with my first iteration; however, I wanted to use more empty space so as to not overload the user with too much content at once. This was when I also considered the use of animations to bring the text in only when the user scrolls to the content.

header and footer designs

The two main challenges of the website design was deciding the layout of the header and footer. I felt my designs were too crowded and not clear enough for the user. I tried isolating the header and footer and brainstormed wireframes for both.

I finally came to my final designs which I then implemented in my final design.

Final Designs

For my final design, I created a neat wireframe using the designs from my chosen header and footer. I brought together my inspiration from my research and earlier wireframes to create a wireframe I was very proud of.

After reviewing my wireframes, I believe it would have been beneficial to have also created a digital version of my website. Because the website was for me, I knew what information I intended to put where and I was willing to experiment and change my design when it came to developing my website; however, If I was creating this website for a client, having digital versions would have given them a clearer idea of the final outcome. This is something I will consider next time I design a website for my personal use.

Mobile Designs

I also created designs for the website on mobile. This helped me when I was developing my website to consider how I was laying out my content to ensure it would be responsive when it was used on a screen smaller than a 13 inch laptop.

development

For the development I was practicing the use of BEM CSS. I had gained previous experience of using BEM CSS from developing VeDi, an online venue diagnostic. I practised organising my code using Blocks, Elements and Modifiers. By organising my code my efficiently I was able to code my website faster because I did not have to keep repeating my code.

I did not use Bootstrap for the styling of my website. Instead I coded my HTML and CSS from scratching, taking inspiration from other developers work. Although, I understand using Bootstrap, I can save a lot of time because I wouldn’t have to spend time writing code. Instead I would be able to use the Bootstrap templates and classes. During my project I wanted to use a grid layout to help ensure my website is responsive, therefore using Bootstrap would have been beneficial because I would have been able to simply add classes to different elements and hide content if necessary when using a smaller screen.

Instead I tried to create my own style sheets that would allow me to add margins and padding to my desired height and width. I created a style sheet with top, bottom, left and right margins and top, bottom, left and right padding or varying sizes from 0px to 120px going up in 10px. This allowed me to easily add margins and paddings to individual elements when I needed it.

final outcome

These are designs of my final outcome; however the website you are currently using shows the outcome in full. I am pleased with the final design, and after testing the navigation with users, I am happy the use of one main page encourages the user to explore the project pages and they were able to find all the information easily.

evaluation

Overall I am incredibly pleased with my final website design, especially the large hero images on each page and the fade in text which meant the user was not overloaded with content at once.

I will continue using the style guide from the website throughout the rest of my branding, including social media, and printed content.