The Blog

After a few drafts and quite a few sketches I've finally created a final design for the homepage of my thesis project. The goal is to create a site to use as a hub for all Kendall related videos that links to other sources to get more information.

I'm doing the design, branding, and development of this site. I figure this would be a great portfolio piece to show current & future employers that I can be given a complex task and reach a solution. While most likely I'll be working with teams it at least shows I can adapt and fill in whatever gaps I need to between myself and peers.

Colors

First, I wanted to really work with that teal color. I think it's a great color for the project in that it's visually rich, easy to work with and not too common to be over-used. It is a part of my school's branding so it does relate to the school.

Layout

The layout may not be anything mind-blowing new or innovative but that isn't a limit of my ability but the result of a decision to put the needs of our users above the value of my craft. I went through a few bad mockups and many bad sketches trying to think of a fun, creative way to express the content. But eventually my better senses kicked in: People are not going to use the site like vimeo. They will not be watching video after video, there are really two use cases:

• Someone just looking at what is new with the school and recent events. These people may just view 3-5 videos before going elsewhere.

• Someone looking for something very specific. These people may just want one specific video dealing with a presentation, a student's work, a class video, etc... so their pattern will be checking to see if it's on the top of the page within immediate reach or if they need to search for it.

So in that regard I felt making it look consistent with a 2012 website would be a good way to make sure the site is familiar to the broadest range of users possible.

Video Layout

The hardest part of the project so far has been putting my ego aside to try and come up with a presentation that really facilitates how it really gets used and not trying to make anything to show off my knowledge of the craft. So for the videos I came up with the idea of just letting them exist in rows. Each row can scroll left and right kind of like the Netflix site but by actually moving that area and not just the content in it. Also it will be moved by just moving the mouse or swiping with a mobile device. Second, upon scrolling to the bottom or all the way to the right more content sections will load. This way the whole site can be quickly browsed from the homepage if the user wants to do that.

Technology

The site will be written in PHP be creating a custom CMS module for my PHP MVC Framework I developed on the Comics Bulletin site. It's been built with the things that I like from Ruby on Rails and Django which has been a great learning experience on how those systems are built themselves.

I found a way to be useful to my design classes for once since, well, I'm not a very good designer playing designer at a design school. I'm working on it but still there is a huge gap between me and most the other students. Anyway, in my Type III class we're working on a collaborative installation at a local coffee shop called Rowsters.

We each had to come up with an idea and pitch it to the rest of the class the one I came up with offered little value and would have taken a long time. So we're going with another student's that is much stronger in message and easier to produce. We're going to setup 3 flags on pulleys and there will be a word at the top, bottom, and on the flag. When a flag is raised or lowered it creates a new sentence by the 3 flags or the 6 words not covered by flags.

Anyway I thought it would be cool to make a interactive version of this to help us visualize it and along with helping the rest of the class brainstorm good words to really push the concept as far as we can take it.

To build this I'm venturing into relatively new territory working with node.js, MongoDB, and the Express framework.

Anyway I just finished planning the development resources needed to complete the project. Glad to find it's not that complicated :D

MVC Structure

I've posted my MVC Module Table which is what I've used to determine what is needed to build the system.

Models

The models handle the data, for instance a WordSet model would represent a single row in the database that contains the 9 words, the user's IP address, the time of creation of that set of words, and the status.

Views

Luckily there's only one view which is the image attached, the homepage and main interface. Express.js uses Jade for templates which is more or less node's HAML which I've gained experience with using SASS. It's clean, well organized, and easy to read.

Controllers

Controllers control the application behavior in response to events. For instance when the user hits the save set button it will send a post request to the WordSet controller that will sanitize them and add them into the database then send a response to the browser for it to interpret like the set to add to the user's list of available sets and the words they can use.

I expect this project to be challenging but not impossible. Luckily I do have some contacts familiar with some of those technologies so if it looks like it's not getting done by Tuesday I can inquire their help. The digital design that I made is strong enough where I think it could mean something having someone's name in the credits.

Here's the finished mockup for exploration divers. It's a diving website for my boss at Aetkinz I'm also working on in a class of mine. The goal is to really make a fun diving experience that really makes the site and content fun, of course the key is making really good content so that's been a big part of it so far.

So I'm going to start a small personal project. It's a time management web app to help me keep better track of time spent working. The big pull-in will be how I'm choosing to manage it.

Typically you have to create the categories, the projects, and the minor details later down the road. To me this just gets in the way. I spend time like I spend money. It's used regardless of what project it's for it's just time I spent. Therefore it needs to be implemented so that it's as simple as pressing punch-in and punch-out but then sometime afterwards describe what it was spent on. I've seen this content model work for mint.com which is a free money management web app I've been using to keep track of personal expenses.

The way mint.com works is that you spend your money as you normally do and with things like credit cards or debit cards you can set the category or budget afterwards. This helps make the process as painless as possible. It will keep track of all your spending regardless then you can categorize it if you feel the need to later.

So I will just record when a session starts, and when it ends. Then later that week I can go in and categorize it by either tags or projects or the likes of.

Not sure on the name of it yet but it will be just a personal project for now then maybe released for people to sign-up and use later if I feel it fills a void in the market and will provide true value for other people to use.

It will be written in django and JS and probably deployed on Heroku for now.