Since I plan on contacting studios abroad for possible international internships after graduation, I thought it was absolutely vital to spend some time making my website more up to scratch, as well as changing my branding. There will be another blog post on my self branding, but this post will concentrate on the website.
I use cargo collective to host my projects. This is much easier than coding from scratch, as projects can quickly be uploaded, as well as being responsive.
Before - Issues:
- Bodycopy too small.
- Bodycopy columns too wide.
- Imagery not lining up, even though images are same pixel width when imported.
- Confusing navigational arrows.
These two pages feel bare, and could even be combined as a single page.
After looking at a few websites I liked, something fairly unique I came across was this:
Both the above websites used the home page to express what the studio is about.
This works well if people have already come across your work and want to find out more information about you. You have already attracted them to your website by your projects, so they want to understand more about you. A website with imagery on the home page is for attracting attention if it is not already there. Furthermore, a lot of studios, when you work for them, want you to remove your online work. This would be much easier if the home page is just information.
I began playing around with a statement below:
Using Adobe Typekit, I learnt how to install custom fonts to my website to give it something more unique than Arial, Times, etc.
Adding links to projects and contact details:
The 'press' page has been changed to 'experience' to include career details:
The project pages were split into a three column grid, the point size made larger. This allows the body copy to read better. However, I still need to work out how to create a padding between each column.
I managed to work out the coding to create columns with padding:
Furthermore, this way of coding the column grid system also allowed responsiveness. I figured out how to make a text box convert back to a single column at a certain width.
Before:
After:
Creating a 4 column system for the footer with contact details:
I wanted to try and work out how to use images in 2 columns. This is actually more difficult than it sounds. Images are uploaded using a system on cargo where image size cannot be adapting, and is made responsive to the page.
I first tested out how to make images half a width of the page, taking into account the padding between margins of the column. This was worked out using a 2 column text box.
This did not work, the images simply didn't display. I realised later on that a few options could be untucked some settings on cargo, I did not actually need to work it out with code.
The images in use:
I contemplated creating cover images for each page using brand colours:
However I found the imagery itself was much more attractive than text:
I also added a 'brand marks' set, showcasing my logos and logotypes for the passed two years.
The finished footer in use:
Arrows were added at the side of each project, allowing you to flick through all the selected work.
The 'type design' text is also clickable, to just show posts that are tagged with the 'type design' label.
I began editing old images to look better, but I feel this is something I shouldn't waste my time on for now, and could be something to come back to.
