Now that I had a solid prototype plan for my website, it was time to start coding. I already had a basic structure for a website from last semester, so I took this and revamped it to reflect my brand.
I haven’t done coding since last semester and I only know the basics so I knew this could be challenging. However, this was a great chance to refresh my knowledge and improve my skills.
I began by working on the navigation. Before, the navigation was just words saying, “recent work”, “about me” and “contact me”. However, I wanted this website to be as close to the prototype as possible, so I exported the buttons I made in Figma and added them to my code. At first, they were displaying vertically when they should have been horizontal. The monogram was also too close to the buttons. After some research and changes to my code, I managed to fix both issues.
Each of the buttons work and are connected to their section of the website. This makes it easier and quicker for users to find what they are looking for.
Before:
After:
I then added my animated logo as a GIF. I think it fit perfectly into the site and it directs the user down to the work.
After the illustration gallery, it moves onto my recent work. The images are all working properly, and they are clear and easy to see. My prototype has plus icons which I wanted users to be able to click on to read more about a project. I couldn’t get these to work in my code, but I decided to keep them in to show what my site will look like once I learn to code that in.
I made sure that all app prototypes were displayed in phone mock-ups as this was one of the rules from my brand guidelines. I think this makes it much more professional.
I made sure that the “About Me” section was short and concise. I made the line-width short and in the centre to make it easier to read. In this section I also included a “back to top” button. I thought this would benefit users since it is a one-page site, and it has quite a lot of content.
Lastly, is the “contact me” section. This is the area I struggled most with in the coding as anything I tried didn’t seem to work. The links to my social media, linked in etc. are displayed vertically and they are quite close together. This is something I will work on changing as I develop my coding skills. Even though this section isn’t identical to my prototype, each link still works, and users will be able to click on them and find what they are looking for. One thing I changed from the prototype is that the website has the icons with the bolder lines as it reflects my brand better.
Update:
I managed to get the icons to the center.
Final website on GitHub:
https://laurengilmoreixd.github.io/ixd_portfolio/index.html
Overall, I am happy with how my final website turned out. Coding is something I struggled with, but I am proud of what I managed to achieve. I like that it is minimalistic, and image led, and I hope that it engages users and showcases my work well. I will continue developing this and using it as a working portfolio site going forward.