#mobileandwebapplicationdesign

By far one of the most frustrating projects ever, this project started out relatively well with all of the help that we’ve gotten through the two hackathons. Managed to get some stuff going with Bootstrap and a JS Script called onepage to achieve my desired effect in one of the earlier paper prototypes pictured below.

Either way, some unfortunate things happened, I wasn’t able to open Atom on my laptop at the last minute before attempting to deploy on Heroku so I made my way down to the school lab to use one of the computers available (thankfully, the non-Mac computer lab was open). 

However, installing everything needed was a huge pain and I also wasn’t able to replicate the initial Heroku deployment success that happened in class. I couldn’t debug successfully so I tried redoing my bootstrap stuff, which ultimately turned into the Javascript for single page scroll faulty. Looking back, I should also have found better ways to backup my files (after the initial scare I copied the entire project folder frequently but the files were so big it took 20 minutes every time) that didn’t take up so much time. 

(Took a break from writing to continue trying heroku deployment with several methods (using only the node modules from the portfolio-node zip from studynet recommended by Harry - no success, using portfolio node tutorial with and without using npm install - both no success) and failed. pictured below are some of the errors found. 

on 21318791283th try it says build succeeded, but proceeds to show the same error message below

Tamya also suggested forgoing the terminal to go straight to uploading on github then using the heroku website, but alas my github account that I just created (twice, with both emails that I have) gets suspended upon entering my github preferences, as pictured below. 

I don’t know what to say except that I’m disappointed that I have to give up, it’s been a long debugging marathon with zero success and I can’t do this anymore. 

I will be uploading the project folder I compressed into a .rar file before this particular heroku nightmare (I already went through it once earlier before deciding to redo my bootstrap stuff).

The website should still be able to be viewed locally with the files, and if not, gulp is installed and cmd should be able to open with the ‘gulp dev’ command. 

For the first week, we’re tasked with the ideation of a portfolio website that may eventually be used to present our skills (technical expertise) and identity of being an artist/web developer/UI/UX designer/employee/freelance/collaboration candidate. 

As such, it’s important for us to put in sufficient thought and deliberation into the design of our portfolio website, whether be it the content hierarchy, the style, the content, or user experience so that our website succinctly puts forward who we are, what we can do, and what we would like to be doing.  

The content hierarchy is essentially part of user experience as well, but it can also be a tool to determine how we are perceived. This can differ from person to person, but ultimately reflects our priorities and so must be deliberated as such. Personally, I’ve decided on the following content hierarchy:

       1. Landing Page        2. About        3. Portfolio        4. Contact        5. Blog

Firstly, the landing page will always come first. Ideally, I would like the landing page to be unconventional so that it doesn’t seem like any old standard business website. Here are two references of websites coded by some of my schoolmates back home in Singapore (will add more as I go along) that I deem as unconventional:

http://www.issac.sg/ http://admfo.com/#

Another reference for something that I remembered while thinking about the landing page: 

A working link where you can still try it out: https://scratch.mit.edu/projects/40247872/

Secondly, the about page comes in after the landing page. Logically speaking, this is an order in the hierarchy that makes sense to me, since the user should be able to know who the website belongs to (if they don’t know already from following a link you sent or they followed), so that they can make a connection of artist-art work when they view the portfolio next.

The portfolio is yet another essential component for a portfolio website. It can’t be named a portfolio website if there isn’t a portfolio in it. The portfolio would ideally contain projects in a reverse chronological order, so that the user can first see your latest projects. However, considering how I don’t have that many projects that I feel comfortable publishing, I would prefer to select the projects that I am comfortable with publishing, then rank them based on how proud I am of those projects. Considering our need for visual stimuli, each project must be accompanied by an image that encompasses the essence of the project. Or just the best looking one, depending. The portfolio can be presented in various ways, but more on that for the weeks to come. 

Contact comes in fourth in my content hierarchy. Users should be able to easily contact you should they like what they see in your portfolio. 

In fifth place is my blog. While it’s important on some level, it is the least of my priorities to put someone through my ramblings about each project. This section may be left out altogether. I do however, think it’s important to share the processes of each project for the betterment of the community, but I would rather be on a separate dedicated website. 

That concludes the thought process documentation behind the content hierarchy. 

Next up is the deliberation behind the style of the website. I expect this to change over the weeks to come, considering how I have yet to consolidate the visual style that would best suit me. For this weekly assignment though, I have put together something quick just to get things started.

Colour & Key Visual Images:

Note: I’ve always been entranced by animated pixel art, but using any on my website would kind of be deception considering how I’m not specialized in pixel art, neither am I good enough to create something worth looking at (yet). 

I’m also intrigued in general by the use of full sized gifs made from images that are stitched together. And turntables. 

Regarding the portfolio content, I’ve narrowed down a few of the projects that I would perhaps like on my portfolio website, but it’ll take a while longer to dig through my archives to find representations of each. So for now, here are the titles of the projects as a teaser and also a reference for myself when I finally get around to looking for the documentation for these.

     1. It’s An Ant’s Life      2. Starhub Invision Mockup      3. Pollution      4. Ghosts of the Past      5. The Dream Room      6. Spraytrainer