Skip to content
This repository was archived by the owner on Oct 15, 2025. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified .yarn/install-state.gz
Binary file not shown.
106 changes: 60 additions & 46 deletions src/content/blog/dmo/index.md
Original file line number Diff line number Diff line change
@@ -1,119 +1,133 @@
---
title: "Digitech assessment - Develop a Digiatal Media Outcome"
summary: "I go over my redesing of the Schools start page"
title: "Digitech Assessment - Develop a Digital Media Outcome"
summary: "I go over my redesign of the school's start page"
date: "Oct 10 2023"
draft: false
tags:
- Rolleston College
---



# THE CURRENT SITE

![](https://serv.husky.nz/ddmo/c41f7c063bc46a046d168037a58cd2936f6fbdcb.png)
This is the current site, and the buttons are small. That is internal only. Some feedback I have heard about this site is things like "Why is it broken," also the site is not used by the school now. So, I have decided to give it a new coat of paint and then work with Hamish (School IT Manager) to implement it throughout the school.

# V1 -- Getting basic layout
This is the current site, and the buttons are small. It is internal-only.
Some feedback I have heard about this site includes comments like *"Why is it broken?"* and that it is not used by the school anymore.
So, I decided to give it a new coat of paint and then work with Hamish (School IT Manager) to implement it throughout the school.

# V1 – Getting a Basic Layout

![](https://serv.husky.nz/ddmo/media/image3.png)

I put together an initial design to get a base layout and gain an understanding of what is required for a clean start page.

It was important for me to get feedback at this point as it would help me shape the way I build the site, so I gained some feedback. From Liam and Finn about this design was that it was too clunky and did not look "right."
It was important for me to get feedback at this stage, as it would help shape the way I build the site.
Feedback from Liam and Finn was that the design looked too clunky and did not feel “right.”

# V2 part 1 -- Moving to Webflow and testing it
# V2 Part 1 Moving to Webflow and Testing

![](https://serv.husky.nz/ddmo/6fb5fbd4e7782af8700cb6b303fa29b946ad41a9.png)
![](https://serv.husky.nz/ddmo/media/image5.png)This is me experimenting with the size of the boxes. I have decided to test webflow to see if it is usable for my designs. Using the feedback, I gained about my last design I moved to webflow as it would let me focus on the design over the code and it turned out well what you see me experimenting with the size and shape of the boxes here with the example of sheep.
![](https://serv.husky.nz/ddmo/6fb5fbd4e7782af8700cb6b303fa29b946ad41a9.png)
![](https://serv.husky.nz/ddmo/media/image5.png)

I asked for some feedback from Liam, Hamish, and Finn and they all said that box 3 looked like a good size and compared to the other sizes it seems ok. Below is an image that shows my experimentation with the third sized box, it did not look as good and Hamish pointed out something pretty imported for the site to be used, People do not like to scroll. Mr Thew also agreed with that sentiment.
Here, I was experimenting with the size of the boxes. I decided to test Webflow to see if it was suitable for my designs.
Using the feedback I received on my previous design, I moved to Webflow, as it would let me focus on the design rather than the code.

# V2 part 2 -- Building a Template
Hamish pointed out something important for the site to be used successfully — people do not like scrolling. Mr Thew agreed with this.
While box size 3 seemed okay, some sizes didn’t look as good.

Now that I have an idea of how to use Webflow. I have built this first version of the design. I found Webflow quite cumbersome to work with but decided to push through anyway. I kept the rough square theme but decided rather than keeping everything on one page to have scrolling to access them.
# V2 Part 2 – Building a Template

Now that I understood how to use Webflow, I built this first version of the design.
Webflow was a bit cumbersome to work with, but I pushed through. I kept the rough square theme but added scrolling for access.

![](https://serv.husky.nz/ddmo/297b72cceddda0f7ebe5d06adfbd3af30e26a804.png)

As seen in the photo below I made the big grid smaller as feedback from Liam, Hamish, and Finn was that the box was too big I after some fiddling around I figured out that I could make it smaller so I did some feedback gained was that the boxes where still too big and should be made smaller and I will address that later.
I made the big grid smaller based on feedback from Liam, Hamish, and Finn. However, even after making adjustments, they still felt the boxes were too big.

![](https://serv.husky.nz/ddmo/184baf042f8c074d0661b245ea5e03a92f3e5dbb.png)

You can see the nav bar in this one as well I decided that it did not look good, so I replaced it in the next design
You can also see the nav bar here, which I later replaced as it did not look good.

# V2 part 3 -- Getting a Grid
# V2 Part 3 Getting a Grid

![](https://serv.husky.nz/ddmo/b157b6a044e0b013a8f8cc43c8ae8ba40ed86ddc.png)
This is the first design that I did where I added a banner, I also added some links linking to the different sites it would eventually be the final design. Some feedback I gained from this was that the buttons were too big but overall it looked good. As well as the login and logout are working. As seen in the photo above, I am logged out and, in the photo, below I am logged in. This is a wonderful way to handle the staff links as students should not have access to these links. In the photo above you can see that I am logged out you can tell this by the "login button" Aswell you can see an example of me being logged in in the photo below. I got some feedback from Liam and he said it works well.

![](https://serv.husky.nz/ddmo/e08c1677fde9239dc91f997e1f2d2fc0ffdfd8d6.png)
This was my first design with a banner and links to various sites. Feedback suggested the buttons were too big, but overall it looked good.

The login/logout system worked well — this allowed staff links to be hidden from students.
When logged out, the “Login” button is visible; when logged in, staff-only links appear.

![](https://serv.husky.nz/ddmo/e08c1677fde9239dc91f997e1f2d2fc0ffdfd8d6.png)

# V2 part 4 -- Adding a signup button
# V2 Part 4 Adding a Signup Button

![](https://serv.husky.nz/ddmo/16ae5c241ac29e81e80bbbb7462a99fdd1a0081e.png)

I added a sign-up button, and I thought it was an innovative idea to have however it looked janky according to Finn and did not look "right" as Liam would say as in the photo above.
I added a sign-up button, but Finn felt it looked messy (“janky”). Liam also agreed it didn’t look right.

![](https://serv.husky.nz/ddmo/2d83c25c079628a55391d81c81cd919bb7a68bd3.png)
So I removed it and moved to a sign-up link on the login page

# V2 part 5 -- THE TAB EXPERMENT
I removed it and moved the sign-up link to the login page.

# V2 Part 5 – The Tab Experiment

![](https://serv.husky.nz/ddmo/0e0afe2cb641c0f2fec72d816d4e2654dd641d9d.png)

People do not like scrolling on sites, one idea I had was tabs to solve the issue, but this proved to cause more issues than it solved and end up not working Aswell as I would have liked mostly because it did not look right. Meaning that it was not fit for purpose and was not useable, so I decided not to peruse this design in favour I went back the grid that I had before. How ever it will work while the rewrite is being done
Since people don’t like scrolling, I experimented with using tabs.
However, this caused more issues than it solved and didn’t look right, so I abandoned it in favour of the grid design.

# V2 part 6 -- Fixing the boxes
# V2 Part 6 Fixing the Boxes

![](https://serv.husky.nz/ddmo/1178f0d8d19833927fdfb9b0c2463f5f8a0a2983.png)

Using the feedback, I gained I made the boxes smaller, I also made some of the text better by changing the font.

Some feedback I gained from Liam and Finn was that the student IT wiki did not need to be there and the google logo looked weird.
Based on feedback, I made the boxes smaller and improved the text by changing the font.
Liam and Finn also suggested removing the Student IT Wiki and fixing the Google logo.

![](https://serv.husky.nz/ddmo/eb7fdf3c1e6f92ce2b745375c463d898ca7485e0.png)

Using the feedback I gained I removed the staff links, and I fixed the google logo meaning that This is my "Final" Design. It is a clean gui, and the buttons are not too big, unlike early designs. It has got working login and logout the links also work. As I have sought feedback over the project this design is the best by far and Liam, Hamish, and Finn like this design. because the buttons are smaller and the google logo is fixed. There are somethings like the Staff page that need to be completed but that can be done slowly as it is not the main focuses of the assessment.
I removed the staff links, fixed the Google logo, and ended up with my “Final” V2 design.
The buttons are smaller, the layout is cleaner, and feedback from Liam, Hamish, and Finn was positive.

# V2 part 7 -- Working on fixing the login look
# V2 Part 7 – Improving the Login Look

![](https://serv.husky.nz/ddmo/53d5d690d34ef89b8607466b7f12d6e8875f63d1.png)

Finn's feedback also led me to the login page where the image needed to be changed, I did that and got feedback from Finn was that the site should be in dark mode however that is out of the scope of this project.
Finn suggested changing the login page image and mentioned the site should be in dark mode (outside the project scope).

![](https://serv.husky.nz/ddmo/4d45ae39deea22181fa80cbe427ea1efadd64f2e.png)

I had a look at the sign-up page and the image needed to be changed because of Finn's feedback was the same as before.
I also changed the sign-up page image following similar feedback.

![](https://serv.husky.nz/ddmo/fc50867be0f4b4a3712ac08299e9ec2d2eea8391.png)

Using feedback from Finn I changed the icons because he said they did not look good being the same. So, he gave me a suggestion on where I could get icons and I went to it and it looks good.
I updated the icons based on Finn’s suggestions, and Zak suggested reducing the padding for better spacing.

![](https://serv.husky.nz/ddmo/06740b56439d84888b48415d1e498cc21d220156.png)
I got some feedback from Zak that he did not like the spacing so I lowered the padding, and it has fixed that he also gave other feedback like it should be in dark mode however that is out of scope for this design. Though it did give me the idea to remake the site in Astro as shown in the v3 that I am working on below

# V2 part 8 -- The end of v2
Zak also suggested dark mode, which again is out of scope but inspired ideas for V3.

![](https://serv.husky.nz/ddmo/eb3217f3088fe136eb62a3b81697ba0579dc7ee3.png)

This is the end of the line for v2, it was ok but not great and still needs a lot of work that will not be done as I am going to invest time into a v3 to take care of some of the issues I had and make the site even better.
# V2 Part 8 – The End of V2

# The relevant implications.
![](https://serv.husky.nz/ddmo/eb3217f3088fe136eb62a3b81697ba0579dc7ee3.png)

Functionality -- A site is good when the Aesthetics look good but without proper testing to validate functionality of the site things can fall apart quickly and it is important to test this is mostly done by getting feedback on the designs that I make then improving on that feedback.
This concludes V2. It was okay but not great — it still needed a lot of work.
I decided to invest my time into a V3 to address issues and make the site even better.

Aesthetics -- While functionality is important, if the site does not look good the site will feel like it is not suited for the job. As I design the website, I am going to make sure that it not only works but it looks good so people will want to adopt it as their main start page. I am going to make sure that throughout the project I get plenty of feedback to ensure that it is not just my opinion.
# Relevant Implications

# Feedback --
**Functionality** – A site is good when it looks nice, but without proper testing, things can fall apart quickly. Most testing was done by getting feedback and improving on it.

Most of the feedback I gained was from Hamish as he is the person that kind of manages the current one, most of the feedback was me making a change then him saying if he liked it or not.
**Aesthetics** – Even if the site works, if it doesn’t look appealing, people won’t want to use it. I made sure to gather plenty of feedback to ensure it was not just based on my own opinion.

~~You may view the working site at <https://rcsp.testing.hnz.li/>.~~
# Feedback

# Tools -
Most feedback came from Hamish, who manages the current version of the site.
The process was: I made a change, and he gave his opinion on whether he liked it or not.

Based on most of the feedback I gained by Liam, Hamish, And Finn I would say that my attempt to use nuxt.js was not needed and it is better that I chose webflow as I am able to make it look better. Out of the Hundreds of tools. Why webflow, mostly because I have a student discount meaning that its free for me to use but also its a lot easier to use that other solution.
# Tools

I made the site twice using 2 different tools as the first tool was not fit for my purpose because I did a draft type one in NuxtJS and CSS (Cascading Style Sheets) but at the time I started I was not good at frameworks, and I could not figure it out so for my final one I used webflow. As it was easier to use and was the better choice as it would be able to let me make it easier for me and anyone else. (Hamish) to edit the site when needed. This however lead me down the path of finding issues with webflow and what I would call limitations with webflow mostly to do with the design tools there incredibly difficult to get things to look right.
Based on feedback from Liam, Hamish, and Finn, my attempt to use Nuxt.js was unnecessary.
Webflow was the better choice — partly because of my student discount (free), but mainly because it was easier to work with.

I built the site twice, using two different tools. The first was in NuxtJS and CSS, but at the time, I was not skilled with frameworks. For my final version, I used Webflow as it was easier for both me and Hamish to edit when needed.
However, Webflow did have limitations, particularly in its design tools, which made it hard to get everything looking right.
2 changes: 1 addition & 1 deletion src/content/blog/homelab/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: "My Homelab"
summary: "An overview of my LAB"
date: "May 25 2025"
draft: false
draft: true
tags:
- HomeLab
---
Expand Down
2 changes: 1 addition & 1 deletion src/content/blog/legacy/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: "NEW SITE - legacy.husky.nz"
summary: "Let's discuss legacy.husky.nz"
date: "Oct 11 2024"
draft: false
draft: true
tags:
- ShowCase
---
Expand Down