Project 2 – More Process
Didn’t exactly love those first two moodboards I did, so I tried to come up with something better. Decided to play around with the Music Department’s logo to possibly spark some inspiration. I started off looking for fonts that were kind of quirky that I could play with:
I then started riffing off these fonts and just quickly created a few playful logos:
I had fun creating these, and liked some of what I came up with, but quickly realized I was getting a little bit unprofessional for the look of a university department’s website. My initial idea was that the page’s logo would change through these above logos each time the page was refreshed, so I decided to play on that and alter the colours of one logo so that each time the page refreshes, that logo would change colour:
Project 2 – Moodboards
Also did some moodboards for project 2:
Project 2 – First Wireframes
To start the new project, I pulled out my sketchbook and did some rough wireframing until I hit on a few ideas I liked. To make sure I included all the necessary components in my site, I also made a list of every item on the Music Department’s page so I could be sure to incorporate them into my wireframes.
Then, I went onto the computer and did a few mockups to bring to class:
Project 2 – In Class Exercise in Responsive Design
Here is my version of the exercise we did in class on responsive design. Obviously it isn’t the most attractive website in the world, but it does scale to four different sizes, which I found pretty exciting!
Finished Project 1
The site is done! I finished tweaking all the details and managed to implement everything I wanted to except, unfortunately, Isotope’s sorting function. I think I took on a lot with this project and I am not sorry because I definitely learned a LOT, but I’m a little disappointed that I didn’t end up having time to figure out the sorting function. Maybe that’s something I’ll be able to work out later.
Here’s my checklist from the beginning of the week, all crossed off except sorting. Very satisfying.
Here’s the link to my finished site:
Menu Buttons – Red onClick
For a while now, I’ve been trying to get my menu buttons to turn red when they’re clicked, but have been having a lot of trouble with it – I’ve only ever done something like that before when using different pages.
Started off adapting this code that Wayne sent me: http://codepen.io/anon/pen/tiFjf
I came up with this: http://digital-locker.design.yorku.ca/3006Af12/marissakorda/project1/34.%20Apocalypse%20FINAL%204.0%20-%20red%20rollover/index.html#
But when I started trying to do it using my rollovers, it stopped working! I just assumed it wouldn’t work using a rollover (only a single image) and started looking for other ways to do this. Here’s what I had when I tried to implement the rollover:
Had a very hard time looking for a solution because I didn’t even really know what to look for… didn’t know what terminology to be entering into Google or anything! I came across this demo and did get it working with my images, but it only works as a swap which isn’t exactly what I was looking for.
Emailed Andrew for help and got it sort of working based off the code he sent me and some things I had pieced together from Google. Success! My links finally turn red onClick. Problem!! Couldn’t only ONE at a time to turn red:
Finally got the whole thing properly working! Andrew sent me some more code to take a look at, and I had been looking at Google as well, and from the combination of the two, I figured out that I could add multiple classes to the removeClass selector, like this: $(‘a’).removeClass(‘current-fire current-sustinance current-tools current-weaponry’);
Here’s my site with the working menu: http://digital-locker.design.yorku.ca/3006Af12/marissakorda/project1/37.%20Apocalypse%20FINAL%204.0%20-%20rollovers%205%20working/mainpage.html
Popup
Spent some time tweaking the popup, trying to make it look good. Tried adding a blood splatter in the corner but it just didn’t look good so I scrapped it:
I also tweaked some of the typography. I liked the added “Info Centre” image that ties into my page header, but still didn’t really like the way the body type looked. Decided to take a break from playing around with it and come back to it later, but this is what I left off with:
Footer
Took me a surprisingly long time to get my footer to work! I looked up tutorials for sticky footers to make sure it would always stay at the bottom, even when my Isotope resized, but for some reason it didn’t attach to the bottom of the page! I discovered, after much experimentation, that the problem was that my #content div had a positioning of top: 200. For some reason, this made the footer sit about 200px above the bottom of the page. But when I switched it to padding-top: 200px;, it started sitting exactly at the bottom. Here’s it looking good:
Fixing the Menu
I have been trying to get the menu rollovers to work properly, meaning I’d like them to turn red when they’re clicked on.
Got this demo working, but it didn’t work anymore when I tried using images rather than a background:
Tried something else and got it to switch between two images, but I don’t know how that would work when it comes to having the red toggle off when a different image is clicked. The demo didn’t extend that far and I don’t have enough knowledge of jQuery to try to figure that out on my own:
The Isotope website had something like what I want to implement, so I tried to extract their source code, but it was quite complicated and I couldn’t get it to work at all. Here’s as far as I got:
Tweaking
I was playing with the typography on the first page and tried increasing the type size but didn’t like it. Saved a copy with the large type as process: http://digital-locker.design.yorku.ca/3006Af12/marissakorda/project1/25.%20Apocalypse%20FINAL%204.0%20-%20larger%20first%20page%20font/index.html
Also spent a while tweaking the entire site. I sped up the hand animation, fixed the type sizes on the splash and main pages, got rid of the horizontal scroll bars, finished putting in all the blood splatters, and fixed the type on my mosaic boxes and my popup box. Also fixed a few little errors in the code – I noticed the background was loading strangely so I fixed that as well. Here’s my site after all the little tweaks: http://digital-locker.design.yorku.ca/3006Af12/marissakorda/project1/26.%20Apocalypse%20FINAL%204.0%20-%20tweaking/index.html
Interactivity 3 Process Work 