Priorities for my website

Primary:

• Online profile promotes work
• Allows clients to contact more easily
• Displays my work well

Secondary

• To build a reputation for my brand
• Gain more exposure
• Present my process (research or writing – case studies)
• To showcase finished and ongoing work

Tertiary

• Unique & memorable (has to do its primarily function well before it can be unique and memorable)
• Generate a level of professionalism
• Demonstrate my personality through a clear tone of voice

To build a good hierarchy/lists of priorities you have to find what needs to be done for other things to eventually be developed.

The work should be the MOST important thing – the brand is almost secondary to the work.

Websites that helped me code my portfolio

• Researching how to scale my website. Link to the article I read here. This article helped me learn how to ovoid visitors of my website being able to zoom. I wanted my website to have a set border, I am not the best with coding and so researching code and trying to learn new techniques was key for me.
• HTML5 cheat sheet.
• Preload attributes – w3schools was a HUGE help when it came to learning how to properly code and troubleshoot my website.
• Researching how to style the body of my website. Link to helpful website here. This was helpful when I ran into trouble setting a margin box for my website.
• I used the courses offered by GitHub quite a lot to help me expand my knowledge of code. Link here.
• How to create a website using GitHub here. I was struggling with how to upload my website to GitHub (this was actually my biggest issue last semester). How to host your website on GitHub. This link also helped me learn how to host my website.
• Webpage design. This was a great article that helped me consider the layout and design of my website.
• HTML examples.
• How to make my navigation bar fixed/sticky. This was my biggest challenge by far! I’m still not completely clear on ow to do this so I would like to continue expanding my knowledge in coding over the summer.
• Kuldar
• Smashing magazine
• Help to keep my email link secret from bots —> HERE.

Helpful videos I found on YouTube

• How to Create a Personal / Portfolio Website

• Sticky NavBar With JQuery | HTML, CSS & JavaScript

I’m a visual learner and finding resources like the ones above was a huge help to me as it helped me understand what I needed to code and where I needed to code it.

Website inspiration

• Amber Mcgregor
• Hannah Sharp
• Gemma Ferguson
• Alex McCormick
• Rani
• Pinterest moodboard

This was one of my favourite websites, she has a very cool animated type intro when you first go into her website. Ideally if I had the skills to do that I would have liked to incorporate something like that into my website.

• Lucian Slatineanu
• Vladimir
• Sean Halpin
• Rachel Schmitz
• Taylor Ward
• Steven Mengin
• Edward Lim
• Kathleen Warner
• Template 1
• Template 2
• Template 3

Even though the three links above where just templates I learned a lot with them by going into their source code and inspecting it. I did this with every website I went into that inspired me and this was a  great learning tool.

Colour

• Color codes. This was a useful tool when trying to find out the codes for the colours I was considering.
• Color codes

I wanted to make a change to my colour scheme for my website once I had started as I felt that the colour scheme I had previously chosen no longer accurately described me and therefore my personal brand. I had previously leaned toward more neutral colours and avoided ‘girly’ colours if you will. I finally decided to integrate these colours as they not only represent my personality quite accurately but also my style – something that people always comment on – so I decided to lean into it.

I  really liked the above colour, it is a nice, solid and simple shade of pink that is kind to the eyes – not too bright and not too dark.

I really liked the coral colour theme above but I worried about its visibility and distinguishability from each other for people with color blindness for example.

• Color Adobe

I had the idea to create a colour pallet and gradient using my profile image, I really like this colour palette and I checked it against colour blindness and it works. I am very pleased with the new colour palette I created and feel like it suits my brand much more than my previous choice.

This was my initial draft of my colour gradient (I wanted to use it as the background colour for my website) I then moved the colours around to give it a smoother transition into the dark colours and this was my final result.

I will be using this gradient as the background colour for my website. I like the flexibility it represents by going from a very light colour to seamlessly transitioning to a very dark colour. Not only that but I feel as though it will add depth to my website and make it more interesting.

---

Website wireframe

Click here to see the figma file above.

This is what my ideal website would look like if I had the coding skills required to code it. I made this using figma. I want to add a section that would incorporate some of my side projects such as client work, illustration work, etc…

Now that I look at the home page I think I would change the profile picture and change it with an illustration as it will be a fun way to introduce myself and showcase my illustration skills.

This is my initial draft for my profile illustration

I really liked the hair detail hanging outside of the circular confine.

I was not able to figure out how to add it in a size appropriate manor to my website so I was not able to include it. I will continue to work on this in my spare time.

I attempted to make a harder website but I could not figure out how to fix the code – It was a mess

I really liked the title area of the website, I would have liked to keep this but I could not do this in the time allowed.

My biggest hurdles were time and my lack of coding skills because of this I had to change tactics and try to simplify my website, this is how that went.

My initial sketches

I decided to keep brainstorming my website, here are some of my preliminary sketches .

I wanted to give my website a soft and delicate look so I tried out all the colours to figure out which I liked the best.

 

I would prefer if my website had multiple pages linked to it, like for example when you click on one of my projects it takes you to a separate page to explain in detail the process and show my sketches.

Click here to see my website.