About

The process

Create content

I started of by reading about goal 13 and climate changes, and trying to figure out a target group. I decided to go with target group #2, 14-16 years, and then created my content. This was made in word with the text sectioned into the pages and groups within each page. This simplified a lot since I knew how much content I had, and could start visualizing a design.

Sketching

I then created a sketch for the design in Figma where I set it up as close as a final result as possible, but also kept it simple to save time. This sketch was extremely useful, however I ended up making a few changed where it didn’t fit together or it was unreadable. Still, I could easier make those changes when I had this sketch in behind. I decided to go for an Ice Age theme since the movies is about consequences of climate changes, and is something most youths know about.

Coding

The coding went smoothly, a few obstacles but they were wolved quickly. I used a lot of time to match up colors and shapes, and fit sizes of the elements compared to each other. Since I went for an advanced design, I also had a lot of styles to keep organized, and that was time consuming. However, I ended up with a good structure and a good result.

I realized that some parts of the layouts didn't work out as I wanted at the very smallest phone screens and the smallest ipad/desktop screens so I did some small adjustments there to improve design and readability. This was easier then sketching everything again to tinier screens.

Testing

When I felt happy about my design, I sent it out to a few people I knew to test my website and give some feedback. Here I had to do some changes to match up with a good user interface. I then did validation checks and also an accessibility check (two different ones), where I did a few changes and then I had no errors to the accessibility, and my page was good to the WCAG.

Structure

I decided to use the same folder structure as before, and when this was made, I did create the HTML layout for one page at a time and then styling this page as I created the content in the HTML. I created the phone layout first, and then went on with larger screens. Those parts that were coherent on all pages, typography, header, footer etc. were created first and styled and then placed into all pages. Then it was just the main section at each page in focus.

I found out that my layout needed a better transition from phone layout to larger screens, so I had something in between phone and desktop layout at the media query for minimum 600px wide, while the complete desktop layout came on 950 px wide. This improved readability.

Hierarchy and typefaces

I used my headings as hierarchy for the pages, I chose font-sizes that were very different, and I marked al the h2 headlines with a background color. My content didn’t have a lot of hierarchy, but where it was needed, I made sure to make it visible. My typefaces were easy to pick, I knew I wanted the Ice Age font as a h1 since I had the Ice Age theme, and then I wanted something close to the NTNU logo font to the headings. The best match was Garamond, and a great font pairing to that font was Gill Sans. I had a focus on sustainability, and these typefaces are more standard types.

Sustainability

Throughout the process I was very cautious about my use of images. I knew I wanted to use images as an inspiration and attention seeker for my target group, but I still thought of sustainability. I changed all formats to webp files, and even compressed the largest images further. A lot of the images I made myself and they didn’t get to big, and I tried to not have too large image sizes at the page.