27.10.09

DS: solar organization

i was asked to develop a name and visual identity for my solar panel organization.

mission-provide alternate ways to power electronic devices

brand essence-going yellow

brand attributes-smart, efficient, modern, universal, optimistic, friendly

naming development was based on names of the sun, unit measurements for sunlight energy (for solar panels), what solar panels are made of (silicon) etc...
helio
volta
mighty rays
travel light
solar flair
handy-ray
SI4
solar circuit

beam



first image making set. the type was thought of as a scientific approach, or a visual representation of temperature and degrees.


contrasting geometric shapes with hand drawn blemishes that act as sun spots
intricate detail, but when reduced in size, loose a lot of the ornate marks


second image set

third image set-idea was to play with pattern. allows for unlimited application because the lines are infinitely interchangeable.


final elements for the beam brand-

act as pattern

image and color use

applications:


26.10.09

VA: project pages on DIC

project title- werk it

project description- Object of werk it is to create music mixes to motivate to exercise in any means possible. People are able to enjoy a 30 — 60 minute dance mix alone in their home or out in public with partners. A weekly live set will be streamed over the internet for people to hear on their phone, computer or radio.

representative image-

21.10.09

VA: dancing is..... exercise?

heart related issues are leading causes of death in america.

i sent out a questionairre to my school asking people their exercise routines, or lack of. the main thing i realized when doing this is, everyone is different. some people like to exercise in groups, others in private on their own. people should be doing things they are already interested in, not going to the gym if it sounds unsatisfying. some common answers for exercise: riding bikes, walking, playing a sport, running etc.

for my project i started creating music mixes hoping the user continue listening until the mix is over. i choose to hand out music mixes for people to listen to, whatever they consider exercising to be. i chose to create a light (30 minutes of upbeat music) and heavy mix (60 minutes of sick baselines and beats) for different situations that might require intense work as opposed to a light activity.

the way to pass out these mixes are cds. i didn't want to go buy a ton of cd cases to pass out with the mixes, so i looked around my apartment for other things to use. there it was. a steaming pile of junk mail collecting dust by the door. i found and manipulated paper folding techniques to hold two cds. because the found paper material already has material printed on it, I decided to screen print over existing designs with my own. to try and make the paper cd case double use, i printed boxes that resemble a calendar on the inside. my hopes- people not throw away the printed material, but use it to their advantage. this part of the cd case was less successful because i didn't have any white ink, so i printed with black.

so far the mixes are a hit and miss. you can't please every one all the time. there are parts in the mixes where i mess up, but i leave them in to let people know these are live mixes, and also to announce that i myself make mistakes too. the genre so far is different kinds of dance music(fidget, electro, bangers, funk, house etc). i'm thinking of creating a way to stream a dj set for people to hear live, as apposed to getting the cds.

want a mix? just email me and I'll get you a copy so you can start shaking your booty while you clean the house, bike, dance or walk around the block.


look at all this wasted print sent to my mailbox.


folding techniques.
time to print
inside
instructions for listening: 1. move your ass 'till the music stops & 2. rinse and repeat.


able to fold it in a way to reveal the cd through a nice geometric shape.

5.10.09

MX_design directions

process post so you people know i ain't slackin' foo! the goal is to come up with three variations of navigation, wire framing, and informational architecture that is unique but effective. i'd say we hit the nail on the head.

this wireframe depicts the way the recording device would work on the seed website. simple controls are used to start, stop, add tags, and publish your recording to your profile as well as the advice section of the site. what i was thinking could happen is the other users on the site could download the advice to their computer, or stream it straight to their smart phone (iphone for example) so they can hear the advice as they work in the garden. this saves you many trips to your computer and back outside. it is also a way for the content to be accessed to more than one platform (computer to phone).


wireframe for an 'amount calculator' for a smart phone. it allows you to predict how much of a material you will need for the space you have in your garden.


wireframe showing uploading images straight from your phone to your profile or uploading images through your camera to the website. it also shows up in the 'recent picture' section of the site automatically. you are encouraged to tag your images so others can narrow their search to more specific results.


this next device is a static camera you attach to your house and it takes a picture in the same spot at the same time every day. the image then is uploaded straight to the picture section in your web page that can be played out in a stop motion. you're able to see your progress day after day in a quick movie. the more you work, the more people are able to see your achievements.



many iphone applications for the 'on the go' gardener. the wireframes show how the transitions from one screen to the next. the arrows indicate what your finger is 'touching' on.




after drawing these wireframes and giving the information architecture of the site some serious thought, i started planning how the content and information should be displayed for the users' benefit. i thought about using the keyboard keys to retrieve navigation elements for the website. we use our keyboards so much, so why not integrate them into websites so we don't have to use the mouse click. you could move seamlessly from typing a comment on someone's page then straight to a different page on the website with a simple key command. it's something i use every day when using photoshop, illustrator, indesign, and after effects. it saves so much time and you will become used to it with muscle memory. i also drew the beginning stages of having content inform the design as well as a customizable page that allows the user to change column width and content on their profile page.


as i was just saying, the user should be able to have (almost) complete control of the content as well as how they interact with the website. it's going to be the wave of the future. i designed this infrastructure based on the idea that any column width and content box can be added, moved, sized and placed anywhere on the gardening website they want. some things should be kept constant, so the user knows they are still on the gardening site. some things to keep constant might be typefaces, icon system, and our seed logotype.

this sketch shows some different variations of different sections on the website.


here is what i designed based on those concepts. each white area is able to be scaled down or up, moved to areas of the page that are most important to the user. they would be able to create one, two or three column sections to hold the information.

what happens if a user wants to see advice about growing vegetables only? what's great about this is the idea that different elements from different parts of the site (like this tips/advice section) could be added straight to your portion of your profile. now, instead of navigating to the tips section, they can add the vegetable tab straight to their profile. it's constantly updating, so new information may seamlessly be streamed onto her profile, without having to go to the tip page. you are also able to move any section of the site up to the main nav bar, if you feel it most important.


a view of a 'market' page where users are able to search for supplies/plants/flowers and buy them from the site.

iphone app for layout (1)

wireframe for the iphone app. you drag the icon to the light colored area to activate it (as opposed to clicking it). this might be more natural for the user on the iphone, considering it's a touch screen device.

the white bar indicates the hit state




another website layout is wire framed here.


the main point to this structure is to have the content of the site be the design. the main page consists of large ribbons tabs. each ribbon is a section of the site. what you see on each ribbon is the newest information (constantly updated by other users) for that portion of the site. for example, on the tips 'ribbon', you're able to see the newest tips users like yourself are writing. they update in real time, which means when someone writes it, it appears on the main page. this allows the user to have an overview of what's happening in each section of the site, without clicking through each page. what happens if you want to read more from the tips page? when the user wants more information, they can click on the big ribbon (or the links in the ribbon) which slides you to the tips page. the other main navigation remains as condensed ribbon/tabs on the left side of the page. this allows the user to navigate section to section without having to go back to the main page. after determining these rules, i asked my partner laura to design it. this is what it looks like after she added the 'skin'.


effect of 'sliding' over from main page to the users profilepage.

the view of her profile page, with the navigation tabs on the left side of the screen (there will be titles on these tabs for updated versions).

and finally the tips and advice page.

it looks so great!

iphone app i designed for this structure.

white bar indicates hit state

last iphone design for concept three. laura designed everything about this version. can be seen in 1, 2 and 3.


view my partner laura's process on her blog!