Website Creation
The Brief
The aim of this project was to create a portfolio website designed and coded by myself using the appropriate HTML and CCS.
Creating the website, I had to consider how I was going to make my website user friendly and my work accessible and clear. I also had to consider how to present myself as a professional and employable.
Navigation
When designing my website, I began by focusing on the navigation plan of my website to help me when designing. I created an initial plan on paper with the 7 main pages and created a list on post-it notes with what I wanted on each project page. I then planned my website design on Miro to create a clearer visualisation of how I want my website to work.
Developing a Visual Identity
When creating a visual identity, I created two different colour pallets that I thought represented me well. The first one being red and pink and the second one is a mint and blue, I thought these represented my personality well. I played around creating some initial logo design and some different fonts.
Final Visual Designs
Layout
Before coding my website, using InDesign I created a basic layout to follow for my about me, contact and index page. This helped me see how my font, logo and colour scheme worked on a website before I started coding. This then helped me when designing my different project pages as I had set of visual guidelines to follow.
CSS Grid Layouts
On each page, I used a 12-column grid. This worked best for my website and gave me flexibility when designing. Creating different grid areas was very confusing for me first of all however after a few tutorials and my own research I understood how to create my own and ended up enjoyed designing them. I tried to keep to 6 columns for my text to make my website coherent however in some places I had to use 4 columns to allow enough space for my images.
User Testing
Our final crit was the first time my website was used on a search engine. I wrote down the critics I got as seen in the image on the right. This feedback was very useful to me as I was given advice about legibility which is very important to make my website user friendly.
CSS/HTML Workshops
Before creating this website, I had no previous experience using HTML and CSS. So, I felt it was essential for me to learn how to use this software as I knew it would be a valuable skill to have. I attended all the workshops ran by Mark and found these very helpful and beneficial when creating my own website. I felt confident while coding my own website and was able to overcome any major issues.
Research
When creating this website, I found it very useful to look at other design companies websites to see how they presented their work. The Bond and Coyne website was a website I found very help feel when creating my own. They had a clear way of presenting their work and their website is very coherent and well made. I studied their navigation, and this was very helpful to do before creating my own website design.
Critical Evaluation
Although I though I really wouldn’t enjoy the process of this project, I’ve surprised myself and thoroughly enjoyed using HTML and CSS!
To begin with coding my own website seemed like a massive task with an unreachable goal at the end. I started by designing the layout of my website with no idea how to translate what I had created on InDesign onto a workable website, however with the help of Marks tutorials, online resources and my buddy, I was able to code my website exactly how I wanted it to be. Creating different variations of my CCS grid was something I enjoyed doing during this project. I was fun creating different layouts to display my work in the best possible way and being about to make all my work coherent and aligned.
Creating the visuals for this website was something I also really liked during this project. Being able to create something that is one hundred percent personal to me was of course very enjoyable. I think the website I have made portrays me as a designer and also my personality very well. If I were to go back and redo this project, I would develop my index page and think about creating a landing page for my website.
Now I have further developed my coding skill set, updating and building on this website will be something continue to do, I am keen to add more of my work onto this website and let the website grow with me as I grow as a designer! Overall, I’m very proud of the work I have created for during this project and the skills I have gained, these skills will be something I am very proud of as I have worked very hard while creating this website.
See more Projects:
A Celebration of Natural Hair
