For this project I will create a UI design for my own portfolio website.
To find inspiration for my own portfolio website I used the following websites:
- http://kyleledbetter.com
- https://www.ybrikman.com/
- https://caferati.me
- https://jtom.me
- http://findmatthew.com/
- http://ejosue.com/
- http://www.kaiwa-projects.com/
From these websites I noted that they all have a number of things in common. They all give a clear idea of who the person behind the website is, showcase what he/she has done/achieved in their career and make it possible for the reader to get in contact with the person. Some also keep a blog about things they’re interested in or include something else to do on their website, like a game. For my own portfolio website I wanted to do the same thing. In line of using the design principles we were taught in class, I kept the UI simple and non-decorative so that the attention of the reader of the website stays on the content rather than the visual aspects. I wanted the focus of the website to be on who I am as a person, showcasing my projects/achievements and making it possible for people to get in touch with me.
I have used the following tools to the best of my ability to create the different components for this assignment.
Adobe Illustrator
With Abode Illustrator I created the different elements that are present in the mock-up pages. I used the knowledge obtained from class to work out the different elements.
Adobe InDesign
I used Adobe InDesign to create the mock-up. This was a bit tricky as I hadn’t worked with it before but it gave me the option the export the mock-up to html pages so that when I have a server setup, I can easily host these for people to play around with rather than showing people an image of the design.
GitHub Pages
To host my project in time that I don’t have a server setup, I use GitHub Pages to make my project accessible to the outside world.
Wireframe.cc
Wireframe.cc is a website for building wireframes. It has a high ease of use and it’s quite natural and therefor easy to get into and make wireframes. It offers quite a number of options for building a wireframe and allowed me to create wireframes quickly and clearly.