This week I began to create my portfolio site.
Why Webflow?
A choice was given to either create a HTML & CSS website from scratch or to use a website builder such as Webflow. Even though I want to further develop my coding skills using HTML & CSS I decided to use Webflow for my Portfolio site.
I found Webflow to be an amazing tool that allowed endless possibilities and would show me a different way of creating a website. This is something that I want to try and see what I can create with it. HTML & CSS will always be there but now was a chance to try something different and see how I feel about it.
Creating Site
Learning how to use web flow can be difficult at first but the more I use it the easier it gets, for example the concept of the sections and the containers within the sections and different elements within each container confused me at first but by just testing different things and seeing what worked, watching videos such as and not giving up. I now feel like I have a good basic concept of their sections, containers and elements.
At this point I only have the option to create two pages for free without paying (which is what I am going to do). I will however apply for the student discount that is offered and if granted I can then create the rest of my site.
Since I only have two pages right now I am just going to create a home page and my first case study.
Home Page
I started with the home page
Since I wanted to keep my homepage looking simple and organised I kept with the high resolution mock-up that I had designed that showcased white backgrounds and black text.
I decided that I would put my name at the front and centre of the home page once it opens, this would be a way of having viewers immediately know who’s portfolio site they are on and see the different pathways that can be taken with the navigation
I added some text in the bottom right that reads “Scroll down for a sneak peek” this would be a way of interacting with the viewer and almost prompting them to view more of my portfolio.
once the user scrolls down there will be a portfolio section with a grid of projects that I have done. The user will then be able to select a project that they would like to view in more detail and that would lead them to my case studies.
Case Study – Infographic
When a image in a grid is selected it transfers the user to the case study for that project.
For my case study pages I decided to take the feedback given to me previously about having a header that signified the project and decided to do that in a different way. Instead of having an image of the project I instead took an element from it (the colourful hands) and placed them along the top. I thought that this would be a great way of showcasing a sneak peek of the project and would add something special to my case study pages.
In terms of the writing for my case study. I wrote about –
- The Problem
- Who I collaborated with
- Tools used
- Discovery phase
- The process used to overcome the problem
- Challenges came and overcame
- The final outcome
I wrote these out as paragraph and followed the format of, paragraph, picture, paragraph, picture until the end when I showed the image of my final outcome.
With that I had the first part of my portfolio website done. It felt great to have it started and start to see it come to life and take shape over time.