MILESTONE 1
When I learned this project was to be social justice or issue relate, I immediately knew I had to do something around climate change. The climate crisis is the most crucial issue at the moment for personally. I want to make something that would be interactive but also useful.
I am currently working for the school on a project called Drawdown Adapted. It's based on Project Drawdown, a comprehensive list of the top 100 climate solutions around the world. We are adapting all of those solutions to a 5th-grade level, so that young people can be well educated on climate science without the barrier of having to read difficult scientific texts. I work on graphic design for the project. We're currently making a PDF version for classroom use, but we've thrown around the idea of a website, which could make the solutions easily readable and accessible to anyone. Having these solutions online would take our audience from just being school children to being anyone on the web who wants to read an accessible version of climate solutions.
I thought that this project would be a perfect opportunity for me to try and build a potential website for our drawdown adaptation (I don't have enough paid hours to make this, so doing it for this project could really make a difference). I already have all of the text that my team has spent hours writing, as well as images that I've curated for this project that are all creative commons licensed. There's also lots of room for interactivity in these solutions, something I've even struggled with when designing them as a PDF because the format is very limiting.
The design of the website is based on my design for our PDF version, but I adapted it to fit better on a webpage and a mobile screen. I spent a lot of time on the original design and colors, and because it's one project I want it to stay uniform. I also designed my original design with Drawdown's themes in mind to keep them visually consistent.
For my javascript library, I'll be using Alpine.js . It's very similar to Vue.js, which I've used a little bit before, but it is much lighter than Vue. I'm going to be using this to change elements such as images, text and inner HTML between solutions. I'll also be using Tailwind for my css and gulp postcss for my build.
The home page will be pretty simple, I'll just give an overview of what Drawdown is and what this adaptation is for. Then I'll link to the solution set, which is where the real interactivity will be.
The nav at the top will be fixed with a white background.
This is an example of what a solution page will look like. The design is similar to what I'm using for our PDF version, but adapted better for web. The picture at the top will actually be a parallax background element so the solution will scroll over it.
These will all technically be one html page, but the arrows at the top over the picture will use Alpine.js to flip between solutions, changing the images, numbers and text. For now, I think I will just add around 10-20 of my favorite solutions, but make it in such a format that 100 solutions could be added.
MILESTONE 2
To prototype my interactions, I originally tried to use Invision but got so frustrated with not being able to accurately show the parallax effects I wanted, which was my whole reason for prototyping. Eventually, I just decided it was easier to make it with HTML and Tailwind CSS, I'm pretty used to Tailwind so I can get designs up really quickly.
Before I started, I revised my solution design from before.
Two solution mockups, now with added area for key word definitions.
After some testing with Alpine.js, I was glad that I ended up trying it out with this prototyped parallax layout. Alpine's bind property doesn't seem to work for inline styles, which I need to change to make the parallax background images interactive with the solutions. It's on Alpine's list for support in the next update.
I have decided to use Vue.js instead. I've used Vue before, but it's been a while since I really did a project with it, so I could use a refresher. I know it has extensive and excellent documentation, so I shouldn't run into any issues. It also has its own developer extension for chrome, which is really nice. Alpine is designed off Vue so it should be easy to transition.
For my proof concept, I just have Vue change the parallax background image when the left and right arrows are clicked. Eventually, it will change all of the information, but for now I just did the images because they were the most difficult part.
My minimum viable product (MVP) is a site that meets the basics of the given design (with possible minor alterations to placement, not content) with at least 10 solutions added. Each solution will have the following content that will change when the arrows are toggled:
- Solution name heading and number ranking out of 100
- at least 3 paragraphs and 2 subheadings
- one header photo that will parallax scroll
- one inline photo with a caption
- the estimated amount of CO2 that the solution could sequester
- If the solution has key words in it, the definitions will be included, and if not, the key word box will be hidden.
- at least 3 paragraphs and 2 subheadings
- one header photo that will parallax scroll
- one inline photo with a caption
- the estimated amount of CO2 that the solution could sequester
- If the solution has key words in it, the definitions will be included, and if not, the key word box will be hidden.
BUILDING THE SITE
The majority of the site is the solutions html page. I used an external javascript file with a Vue instance to organize the data for each of the changing elements.
For the elements that change on the page with each solution, the data for that element is stored in an array is the Vue instance. For most text elements, I simply use the v-html property to fill the html with proper html for the solution. This way, if there is a bulleted or numbers list in the text, or any other styling, I can include in the text as html. The pictures below show some of my data organized in Vue, as well as the corresponding HTML with inline calls to vue.
For the cover image, I used v-bind to the style property to modify the background image property for each solution. The background image is fixed with tailwind which is what turns it into a parallax element. For the inline image, I used v-bind to the src property to change the image with each solutions.
For the key words section, I filled in the key words using the same v-html directive as the other text content. I used v-if directive to conditionally render the entire key words element only if there is key words given.
MILESTONE 4
For this project, I was glad that I used a topic I was already familiar with and had started creatively. I have a huge workload for this semester, and doing this allowed me to still create a meaningful, fully-fledged project without overloading my personal workload.
I think this project was a good level of challenge for me personally and I still felt like I had enough time to create a good final product. I also really think these milestones help me keep the project on track. In the future, I probably won't waste time trying to create a prototype with Invision because that just made me frustrated, and I find it easier to just start building with Tailwind once I have my initial design decided in Illustrator. Plus, then I have a head start on my final site.
I am glad I used Vue because it just reminded me how much I really like Vue. it was an easy way to sort the data and help me create an interactive, single-page website with lots of information. It was a good refresher too, because I haven't worked on a Vue project in a long time and I haven't ever built a project this big with Vue myself.
In the future, I think I would try to organize the data better first before adding it to the files, it probably would ahve saved me time. Also, I think I would want to allow myself more time to explore the library after creating the MVP. Vue has lots of cool features and I had more ideas, but not enough time to implement them.