Building a portfolio website

Week 6: Building a portfolio website using Cargo

In the past, I have experimented with several website builders as well as coding a website with HTML coding on a previous college course. In today’s workshop, we started with the platform Cargo and followed our tutor’s instructions to start to get to grips with how the builder works. This would allow me to later customise this template and build a website that is bespoke to me.

Portfolio websites

Websites that showcase creative work can all be presented differently. It’s good to have a look at these examples to see what is possible to create. I can look at designers I admire, industries and agencies.

When thinking about this website, I see the website as a frame. The focus should be on the work itself and ought to be interesting to look at overall. It needs to be functional and user-friendly. It doesn’t need to be complicated.

HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages.

https://www.w3.org/standards/webdesign/htmlcss

Websites are responding to codes, HTML being the structure of the sire and CSS is the way it looks, such as image, colour etc.

HTML contains all the content: files, writings etc. In the past, this was very tiring for web designers to stylise as they had to write the code again and again. A combination of the 2 are now used: HTML & CSS.

We can view this coding on any webpage by right clicking on the page and clicking ‘Inspect’. We can then alter elements of the page to see how it would look. Below, we can see the webpage once we have selected ‘inspect’. The HTML code is shown at the top and the style sheet is under this.

Lydia Ellen Design

The structure can be simple and easy to navigate, such as Pentagram’s portfolio. Their grid shows the thumbnail images of the work.

https://www.pentagram.com/work

The website needs to say something about myself. The website’s call to action is to help people to make contact for work, Instagram, Behance, Linkdin.

Bad Studio
Cargo
Selecting the untitled, blank template.
This template works as a blank canvas for us to work on.
The design tab contains the options to set different styles for headings, body copy and smaller type.
By selecting the footer, I can choose what goes inside it. I can select a number of columns to place the text in. I can change the colour of the footer background and the text itself. I can choose for this footer to appear on every page of the website.
I can choose to fill the window with the backdrop wallpaper.
I can create separate projects and choose a thumbnail image for these separate projects. This thumbnail image will appear on the picture gallery.
I added internal links and external links within the site by selecting the text then selecting what I want the work to link to.

Photography Workshop

The purpose of today’s workshop was to explore using a DSLR camera to capture the physcial (printed) work we have made during this course. The focus was on how to be creative when taking the photos. I approached the images differently depending on the work in front of me. Working in pairs made the work easier as there was another mind to help problem solve, both with technical problems and creative ones.

  • We used an ISO of 100, as this is suitable for shooting indoors.
  • We shot in aperture priority (AV) mode, so that we could focus on the compositions rather than the technicality of a camera. This was useful to me since I have not used a DSLR camera in perhaps a year and needed to re-familiarise myself with it.
  • The aperture relates to the lens openeing being wider or smaller. A wider gap/lower aperture lets in more light, this is useful for portrait photography. It puts the focus on the foreground and gives a softer background.
  • We used a Canon 600D camera.
  • The shutter button can be used to demi-press and take full shots. The demi-press allows us to check our focus.
  • Using the screen on the camera means we can take angle shots without needing to use the view finder.
  • We need to format the card before using the camera. This ensures connection between the SD card and camera. It also empties the card before you use it.
  • The ‘Q’ button allows us to navigate the screen to change the ISO settings for example.
Working at the first set-up, I used objects to prop up my process book. This shows the spread at an interesting angle. Placing lights on one side gave the book an interesting shadow. This shows the book with a sculptural appearance.
https://support.usa.canon.com/kb/index?page=content&id=ART101719
  • We selected ‘large quality image’ (not raw). The symbol for this (shown above) looks like a ‘DL’.
  • 0 exposure compensation
  • Spinning the wheel changes the aperture
  • Shooting in raw is required when working with really big, high quality images. They are however, a slow doc to work with. The colouring is more precise than a jpeg.
  • A photo taken on a DSLR camera will always be a higher quality image than one taken on a smartphone.
  • AWB = automatic white balance. White balance helps to colour correct any temperatures you’re working with. We can change the settings to tell the camera you are working with sunlight for example. To correct yellow light tungsten for example.
  • We can create creative filters using just white balance.
  • AF = automatic focus
  • MF = manual focus
  • Live screen view mode allows you to see how your settings are applying.

Photos from the workshop:

Continuing photography at home…

I experimented with different coloured grounds
Lighting and back-drop set-up