Thursday, March 28, 2013

spatial: dieter rams, week 4

Since our last update we have updated our branding, fleshed out our wall screens and added new interactions, have a new iphone layout, and table screens that include AR markers. Overall we have simplified the branding and style across the board in Rams' style. 

updated branding

wall screens
Inactive State
Single View
Single View
Side by Side Comparison
Detail View



table screens

Wednesday, March 27, 2013

degree project: week 9

so my goal to have all screens designed over spring break may have been a bit ambitious, especially with how much i had going on over break. however, i've only got one screen left to design before i go back through to make some final tweaks. i'm planning on still getting that finished up this week that way next week can be devoted to beginning animating the screens and planning out my final pitch piece. 

here's all the design screens thus far:

scenario 1: joining and connecting

scenario 2: collaborating and sharing

[music editing screen goes here]

my thoughts for the final pitch video so far are to do something along the lines of opening up with an inspirational intro that briefly explains the needs of the app, and then playing through each scenario. i may, however, just limit myself to showing the second scenario in the video since it has a lot going on in itself and gets straight into the action and main function of the app. hopefully by next week i'll have a better plan for this. 

Wednesday, March 13, 2013

degree project: week 7

i would deem this week pretty successful in terms of designing. i've got my branding figured out for the most part, a fresh color palette, a new icon system, and i'm nearly finished designing the first scenario in photoshop. this is bound to be a pretty packed blog post since i've made so much progress between last week and now, but i've got a lot of neat things to show! finally!

for my branding, i came up with 3 different different directions playing with the word "attune". i wanted to play off this word because of its meaning "to be in harmony" and the connotations it could have not only relating to music, but also with the users being in harmony with one another (so it gets at both social and music aspect).

for the first idea, i was trying to play with the word attune and turn it into an action. i used a universal, easily recognizable symbol of music for the brandmark. one that musicians would more easily be able to connect to rather than somebody that just listens to music. for the second idea, i focused on the inner wheel of a cassette tape, and played with the idea of it being a rotating brandmark, because when these wheels are rotating on a tape it means that music is either being played or recorded - similar to the functionality of the app. i also tried using this same brand concept for my third option, except this time with an older 8-track player that was used to play and record music as well.

but after feedback from class, i've decided to stick simply with "attune" and go with the first brandmark, as it's the most recognizable, especially to younger musicians. i've decided to add another level so it can also represent the 5 strings on a guitar. i may continue refining this throughout the project, but here's what i've got for now.

color palette:

last week i was pretty stuck on that pinkish and blueish color palette that's super trendy right now, as you saw on my color explorations. i was pretty convinced that i'd probably take that direction, but i was  surprised to find that i was really intrigued by the blue and purple color palette as well. this actually ended up generating a better response during feedback too, because it's not as commonly seen and seems to work well with a music-app.


so i've spent a lot of time the past few days moving into photoshop and fleshing these out. here's a few sample screens of what i have so far. i previewed some of these on an ipad yesterday, and ahh! it's so exciting seeing these mocked up as the real thing. i'm really hooked on how the typeface Armata is playing out on screen and with these colors.

as i'm designing, i'm also working to keep all my layers in order and organized because they can get messy so fast. plus it's always really refreshing to see nicely organized layer groups. :)

midterm presentation:

next week:
i'm hoping to somehow find time in the midst of my busy spring break to finish designing all of my screens, at least to a point where all that's left is revisions. i really want to make a strong promotional piece, so i'd love to have some good time to put into that without trying to juggling both that and the design still.

Sunday, March 10, 2013

spatial: dieter rams, week 2

This week we decided to expand our system a little further than just wall screens. While these will still exist in the exhibit, we've decided to add interactive table screens as well. Here's the functionality of each:

  • Side by Side comparison.
  • Single view.
  • Detail view.
  • Flip view.
  • giant interactive wall screens
  • before approached, zoomed in detail shots - zooms out as you approach?
  • All items featured in the exhibition. - lock/unlock - take photo to unlock 
  • Map of where everything is. 
  • Story/Narrative behind the show.
  • Bio of Rams.
  • Augmented Reality (See bellow)
Table Digital: (Design: clean white with nothing on it minus the Rams styled AR marker)
  • (iPhone Main Function #1) You sat the phone down and whatever object is on the phone springs to life on the table. Supporting information pops up next to it.
  • (iPhone Main Function #2) - You can hold up the phone to the table over the AR markers and the objects themselves pop up on the table (through your screen). You can move the phone around to see them in full 360. 
  • Shows inspired projects
  • Shows 1/10 principals. Each product has 1 of 10 principals. Encourage people to view all 10. Includes a link to all 10 if they choose too view them all.
  • Related Rams products

We've also decided to reduce the exhibition space to the first floor alone. Here's our location plan for the screens and tables.

The 10 items featured in the exhibition:

Our concept still focuses on Rams' products inspring modern-day products, but we've decided not to limit ourselves to only one product. Here's some examples. We've also narrowed the exhibit to Dieter Rams electronic products with a focus on the surface and interface.

We thought it might be interesting to have the wall screens (before approached) show zoomed in, detailed shots of the products and their interfaces, so to further emphasis the exhibits focus. Here's some examples of zoomed in, detailed shots:

We've begun exploring the interactivity of the table screen. Here's a rough mock-up of how it may look. The + symbols are clues to where viewers can use the augmented reality feature on their phone. The first image shows the design in detail, and the second shows the entire table view.

We've also begun exploring some design options for the iPhone component with the flat style we're going for:

Friday, March 8, 2013

spatial: assessment

for me, spatial has been a whole new design challenge that i never really thought too much about prior to this class. sure, i was aware of wayfinding and how it was another important design task, but i didn't realize how complex and in-depth the process really is. i'm finding that it definitely takes a different way of thinking than i'm used to with design projects, and i'll admit it's a bit of a challenge thus far. trying to consider scale and navigation while still maintaining a strong design and concept feels almost like i leveled up on a game and i'm now approaching it with added on rules or challenges. i think it's definitely a good challenge to face before going off into the "real world" because a lot of our projects to this point have been mock ups and just had to make enough sense to present it. for example, in branding last semester we were too make building mock up of how our brand headquarters would exist. *slaps logo on front of convincing looking building* looks great! when creating signage, or even something as simple as promotional posters, it's good for us to get into the habit of considering the viewing distance and readability. it plays a huge role in the final outcome of the experience, and i think it's something more easily forgotten than we'd like to think.

approaching this new way of thinking while adding an interactive spin on it is yet another level up (and a little more my cup of tea, i might add). thinking about how technology can enhance our wayfinding experience is something that's definitely worth considering at this time in our lives, so i'm glad we're getting a chance to practice this in class as well.

Wednesday, March 6, 2013

degree project: week 6

look, wireframes! last weekend i sat down and put some good time into these and thinking about how the app would function overall. i think it was a really huge step of progress towards getting this thing going. i'm so excited that i'm getting to the design phase! once i get the branding figured out, i'm going to dive right in. 

i cut down the second scenario a bit, realizing that i had a couple unnecessary steps/screens. i got a lot of good feedback on monday too from several different people. here's some things i'll be working out/thinking about later in the week:
  • scenario 1
    • how music from social networks will be selected/cut down - recent/most popular
  • scenario 2
    • when editing song lyrics, show user that edited, track users, view past editions
    • don't only have lyrics, also add ability to drop in guitar riffs, etc. - space for everything - maybe minimize space for practice archive?
    • song image - move to band page
    • record vs. record practice
    • ability to have sound filters when practicing recording - explore garage band
    • maybe they should just record together? collin says that even in recording studios, that's becoming more popular. plus they've already gotten used to practicing together.
    • work out recording page better
    • have user thumbnails on their parts
    • editing song- look at garage band - more precise edits
    • personal edits vs team edits/syncing?
    • pop out chat during process? screen share? - some ability to have everyone approve.

i've also started exploring some color + type ideas. i'm really digging the idea of a dark background with bright colors, but the light grey background looks a lot cleaner and handles that flat look i'm going for really nicely. so i'm playing with both. maybe a black nav bar, but a light background for the rest of the screen? i also really love subtle gradients in interface lately, so i'm exploring that as well. 

this is just a quick mock-up of what i've been thinking about logo-wise. i'm trying out some fun geometrical shapes that reflect sources/users linking and connecting, but also have some fun rhythm to them. it might end up being a shape that represents the first letter of the app name (once i come up with it) or something. i'm still playing around and exploring ideas, but here's one i'm kind of leaning towards. 

goals for next week, you ask? 
  • apply feedback from monday - revise wires
  • continue exploring branding - establish name and logo hopefully?
  • have a couple different design directions to show in presentation - get feedback
  • prepare midterm presentation

Sunday, March 3, 2013

spatial: dieter rams, week 1

"The possibilities for innovation are not, by any means, exhausted. Technical development is always offering new opportunities for innovative design. But innovative design always develops in tandem with innovative technology, and can never be an end in itself."

Dieter Rams was often talking about the future of design and how new structures for our behaviors will continuously be necessary as products and technology advances. Today we are recognizing through brands like Apple that his 10 principles are still influencing many design choices today. We decided to continue researching exactly how much modern day products really are being influenced by Rams, and we've decided to frame our concept around this. Here's a breakdown of how we (Eli and I) imagine our concept working:

past / present

Side by side comparison of his work juxtaposed with a modern counterpart. When not active (by sensor) Rams quotes are displayed that foreshadow the overall concept of the exhibition. (how the best work is timeless, the future of design, etc.)

Interactive walls

Every wall holds a screen.

You can tap to cycle through the three views: original design, modern counterpart, and a side by side comparison. You can swipe and hold to FLIP the image.

Exhibition layout:
1st and 2nd floor are hold the same type of content.
The pathway of the exhibition is oldest to newest (a timeline of his works overtime).

iPhone/iPad App:
Allows you to interact and explore the functionality of the famous Dieter Rams designs and their modern counterparts on the screen.

iPhone/iPad Distro:
You can download the app on your own iPad/iPhone, or borrow an iPad from the exhibition.

Branding exploration: 

As an industrial designer, Raleigh St. Clair feels that products today are becoming too complicated and too dressed up with extra features. Raleigh has always been a Dieter Rams enthusiast and has preached about Rams' desire to tidy up the world and make it a better place. Raliegh decides to attend the Past / Present exhibition of Rams' work in order to get a closer look at how Rams has influenced certain products today and give Raleigh some peace of mind.

Raleigh enters the exhibition to an introductory screen that introduces the exhibit and advises him to download the exhibit app on his iPhone (or use on of the space's iPads).

As he enters the first room of the exhibit, he soon recognizes that the exhibit is set up in a linear format of earlier works to later works. As he approaches the first screen, a quote slowly fades to a front view of one of Rams' earliest products. Raleigh taps the screen to see this product in comparison to a product today that has been influenced/inspired by the past product. Raleigh takes out his iPhone to interact with the product and get a better feel of how Rams approached the functionality of his products. After he reads more about both products on the wall screen, he continues to the next product in the exhibit.