Progress: Slider

Working on the slider was difficult. Looking at many examples I ended up with a cropping div and a ul. jQuery causes it to scrollLeft, when people press prev and next. I wanted to get it to go to the next li, but no luck so far. It does have a functioning overflow-x scrollbar. It’s looking functional now. Slowly filling in content.

Source: Woork: Horizontal Scroll | Lighest Slider (380 bytes) | .scrollLeft | Next li

Progress: Lightbox

I got the fullscreen buttons to work, jQuery displays them in linked divs only on the desktop version. When clicked Lightbox 2 comes up, a gorgeous simple Lightbox. It works well and I like how it’s slowly starting to look. It should be done soon, but I want my descriptors to have a slider for all the images associated with that project.

Source: Lightbox 2

Progress: Gallery

 Working on the gallery was very difficult. I had decided that cropping the gallery would work great on the desktop because the gallery looked uniformed. Using CSS Globe – faux cropping, which consisted of divs to crop the images, which makes it look good. I added a fullscreen button as pressing on the image will show the text that goes with the image instead of enlarging the image.

The mobile version has a good functioning gallery that does not require all the jQuery to run. It shows the full image without cropping. I also added a navigation that appears at the top of every section to allow for control instead of a back button.

Sources: CSS Globe: Faux Cropping

Progress: Responsive Design

I had to recode the css because UX Booth suggested to program for mobile and then have the media query load for desktop. This is to benefit mobile as it will not have to load all the extra media query css. It seemed to function better, but there was a lot of changes that had to be fixed.

I also found Matt Kersley’s tester for responsive design. Instead of dragging the window to different sizes, since jQuery doesn’t reload, it loads multiple version of the site on one page.

I’m working on the gallery, but there seems to be problems when it switches from mobile to desktop, so I’ll have to work on it.

Source: Matt Kersley: Responsive Design Testing | Smashing Magazine: Responsive | UX Booth: Mobile Responsive Design

Progress: Media Queries

Developing my website from a sketch has been easier with a tutorial I found that suggests we wire with HTML5/CSS3 instead of Photoshop. The basic code would be there and would allow easy structural visualization.

I built my desktop version and then read up on Media Queries, using css to easily change the layout according to responsive design. It was very easy to get the hang of as the css carried over from the basic and changes were allowed. I was having a problem with the desktop version loading on a phone with high resolution as media queries is set by pixel width. I’ll have to figure it out.

It’s looking good and I got the smooth sliding to work to go to the anchors. All of it goes it one page.

Sources: Wiring | Media Queries: Responsive Design

Portfolio: Proposal (Web)

As a web, graphics, and new media designer there is a large emphasis placed on to the designer’s portfolio. It plays an important role in finding jobs, presenting to clients, and entering gallery shows. The appearance of my portfolio will continue my colourful theme, while aiming for a professional, creative, and more minimalist design. The elements from my new business cards will be used: different shades of gray, graphing texture background, and some handwritten objects. As devices move away from Flash, so will the new portfolio, which will be with HTML5, CSS3, and jquery. To be compatible with different screen sizes, including mobile and desktop, I would like to create a single page portfolio that is fluid and responsive.

Business Card:

Old Portfolio (v. 2008 – 2010):

Schedule:

Week Task Details
9 Prototype  Structure of site finalized, mock-up of appearance and basic frame of prototype
10 Prototype  Prototype complete and mostly functioning
11 Finalization  Debugging, close to final
12 Presentation  Finished and ready for upload

Three-Sixty Five: Appearance

I decided to start designing the icon, so that I can figure out how I want the app to look. I’ve created 2 logos that incorporate 365 into a camera, my only fear is that it’ll be hard to see when it is small.

Image   Image

Three-Sixty Five: Proposal (Android)

Memory is a fuzzy thing and a year goes by so fast that we easily forget events that happened, so being able to easily document a photo a day allows us to reflect back on the year and see what is important in our lives. Since mobile phones have become an extension of the body, the 365 android app will allow a person to easily track and share their photos with a simple user-interface that reminds them to take a photo for the day and upload it to their 365 album. The gallery-like interface has a slot for each calendar day allowing the user to set their photo for the day and upload it online. The time of the reminder can be set and only sends out a reminder (in the notification bar) if the day slot hasn’t been filled. A dialog pops-up that allows the user to take a photo (launching the user’s external camera app) or allows them to select a photo from that day. Functionality is key to making the 365 experience easier and more enjoyable.

Schedule:

Week Task Details
8 Proposal  Idea for project and decision on functionality
9 Research / Prototype  Structure of app finalized, wire frame mock-up of appearance and basic frame of prototype
10 Prototype  Prototype complete and mostly functioning
11 Finalization  Debugging, close to final
12 Presentation  Finished and ready for upload
%d bloggers like this: