Jim's
Tutorials

Fall 2018
course
site

spec week 8

This week I started seriously considering my final project. I know I want to make a react website that acts as a portfolio/marketing tool for something (whether it be for my work, myself, my house or some other venture). In other words, needs to be something that directly helps with my career. I would also prefer a project that required some amount of collaboration, because two or three heads are better than one.

Initial exploration of examples

I was bouncing ideas around in my head and decided to look up some of the top react websites for inspiration. I wrote the following notes about what I saw and included the resources. Looking at these websites led me to some thoughts I'll talk about at the end. But first:

This is the first website I looked at, a company called Moonfarmer. This company makes artistic websites for people and the dreamy images floating in and out on the screen/ gif background inspired me. I liked how the website narrates an idea, I think that will be essential in my project. I'm not sure I have the artistic skill to narrate a portfolio as if it is a children's book and make it equally engaging, but I'll worry about that later.

I looked up different personal portfolio ideas and found this very simple portfolio that gave me good ideas for how to display my projects in straightforward ways (that is, devoid of narrative, or less artistic at least). This is a good simple clean presentation, and it offered a good contrasting example from the Moonfarmer example. Whatever I make will need to toe the line between artistic narrative (that maybe doesn't clearly have a point?) and straightforward delivery of information (that perhaps lacks in inspiration and beauty?).

this portfolio example was also particularly inspiringbecause it used some unique image placement and shuffling effects to tell a story. Most importantly, it laid out written info about each project in a great, comprehensive way. That is, this portfolio gives users info about the CLIENT, the PURPOSE of their actions and the ROLE that this company had in the project. It tells a story about their work in good detail. I'd also want to have a great written narrative like this in whatever I decide to create.

Decision about what to make, given these examples.

After having reviewed these examples I decided to do a cross between a personal and company portfolio. That is, I want a website that sells my services, and that also sells myself/those I work with. What company/services, you ask? why... Wilson and Weeks- The Wordpress Company. I realized that we already have one great website we are developing and so, why not make it an official business.

I also realized that I wanted to work with my girlfriend on this project as she is an architect and artist at MIT and tells a great artistic narrative. I want to use some of her drawings in a kind of artistic narrative that shows off, both nate and I's work with wordpress, and (later) a branch of the website could be altered a bit to become a portfolio for her, that displays her art. I mean, I'm OK with images and art/layouts that inspire but she is mind-blowingly good at it. To be able to make her ideas come alive could be pretty beautiful.

Graphic art will be important

So pretty soon in my exploration, you can imagine that I wanted to start making a wireframe for my idea. Or rather, I realized that I'd need to make a wireframe for the idea with my girlfriend, and start talking about layout and narrative and user story and purpose, etc. The most important part of this would be the images and how to use them, as there will be a strong artistic/narrative element to it (to make the website more moving, more engaging, as most top websites are.).

Wireframing/reaching out to a graphic artist

I looked up some of the best wireframing tools and read this article about how to make a wireframe in sketch. I realized I'd need to talk to a graphic design expert so asked around and it turns out, there are none at Marlboro.

so, my plan is to apply to town meeting funds to be able to receive 10 hours of direct training from a professional graphic designer so I can make my girlfriends art into vector images and use them on my website effectively. I already have an idea of how I will phrase the proposal.

Final steps

After I secure access to a graphic artist, I will be able to talk to my girlfriend about her art and her artistic vision and how her narrative could be translated both into a react website narrative that would allow me to advertise nate and I's work, as well as something that could branch off into being simply a portfolio of her work. So I need to talk to her about her vision next, and think about how I'd implement it, and especially reference a graphic artist to see how I can make this art come to life. Then, comes wireframing. Finally, comes actually being able to build out the website and componentizing the decisions made in the wireframe.