Switching It Up

ios7_switches

People who have spoken to me can tell you have mixed feelings about the new iOS. On one hand, the interface is sleek and minimal and flat and all sorts of lovely things like that. On the other hand, it’s rather sloppy (and don’t get me started on the home screen icons). But I’m not going to sit here and write a whole big post about the “goods” and “bads” of iOS7. Plenty of other websites will do that for me. I’m just here for a bit of show-and-tell. And maybe some other time I can rant more about that stuff.

I love the new switches in iOS7. They’re simple and they look nice and they’re fun as hell to play with. So I decided to, during one of the duller moments of my workday, re-create them using HTML and CSS. The switches are simple checkboxes with no extra HTML markup (hooray for pseudo-elements!) which means they can be very easily integrated into existing webpages. I also created two versions of the switch: a to-scale, pixel-perfect recreation of the one found in iOS7; and a half-scale version that is more appropriate for web use (CSS scales to retina sizes without quality loss). You can check out a live demo or grab the code here. Feel free to use these in any projects; I’d love to see what you guys create so send me a link if you like!

Switching It Up

Symbolic Meanings or: How I Learned to Stop Worrying and Love the Save Icon

There is a debate among UI and icon designers that has been raging for decades. The question is simple: Do we need a new ‘save’ icon? For those who think we do, there is a second question: What do we replace it with? The answer isn’t as simple as some people think.

save
Save designed by Cris Dobbins from The Noun Project

The main argument for proponents of designing a new ‘save’ icon is simply that the current one is outdated. It’s based on a technology old enough that some readers may not know what is depicted in the image above. Floppy discs, they say, had their time as the predominant storage medium but have since been antiquated to obsolescence. And with more focus being put on modernism and good design every day, it’s not surprising that there would be many who are opposed to having such a relic as one of the most commonly used symbols in computing.

On the other hand, there are those who argue that the origins of the icon no longer matter. Like many symbols before it, the icon has left its origins behind and become an abstract-yet-recognizable glyph that can be learned and used without historical context. Those who argue for keeping the symbol as-is might compare changing it to be as damaging to our culture as changing a letter in the alphabet, especially given the increasingly technology-dependent nature of our culture. Could we learn to live with a new symbol? Surely, they argue, just as well as we could eventually overcome the changing of a letter, But why bother? Would it be worth it to try and change such a universally-recognized symbol simply because we think it looks too old?

Continue reading “Symbolic Meanings or: How I Learned to Stop Worrying and Love the Save Icon”

Symbolic Meanings or: How I Learned to Stop Worrying and Love the Save Icon

Revisiting the Past, Again

randomizer

Last night while working on an assignment I came across a problem. I needed to make a shelf full of books that were all different colors but I didn’t want to sit there and make a bunch of different colored materials. Not only would it be a waste of time, but it would also clutter my hypershade window. Now, as many of my readers know I made a script awhile back that pretty much addresses this problem for me. It creates random colored materials within a given range and applies them to the selected objects. It even was so kind as to put the materials into a single bin for you. But when I went to go use my trusty MEL script I realized it could be made better.

So I sat down (ok, I admit, I was already sitting) and started work on a new script, Randomizer V2. The first, and largest change to the script I made was not reusing anything at all from the old one. In fact, I didn’t even use the same scripting language. No, for this version I decided to bust out my Python skills. I didn’t just do this for fun, however. Python is a more robust language and is easier to work with (in my opinion). It’s also more widely used, especially considering it’s not proprietary to one program like MEL is. This means there is more reference available and there are more people who I would be able to turn to for help, should I have needed any.

I also made another pretty drastic change to the functionality of the script. Instead of having it create a new material for every object, the script now creates one material and changes the value per-object using single switch nodes. Each object is given an extra attribute (or multiple, depending on whether or not multiple material attributes are randomized) set to a random value that is plugged into the V coordinate of  a ramp node. There is one ramp node for every attribute of the material that is to be randomized. This allows the user to go back and change the randomization to suit their needs at any time. It also means that the randomization ratio can be adjusted. Want randomization between two colors with a 75% bias towards one of them? Or maybe you want to randomize between file textures? Or how about random animated textures? Thanks to ramps, it’s all completely possible and easy! And if you want to tweak the material for a single object you can simply edit the extra attributes to your liking (they can be animated, too)!

Using the script is very simple. Simply select your desired objects, check the attributes you’d like to be randomized, enter a material name and type, and press the big “Color my world!” button. After that you can edit the ramp nodes that are feeding into your shader as well as the extra attributes (“Color Coord,” “Transparency Coord,” and “Specular Color Coord”) to change how the material behaves.

Download the script here.

If you encounter any errors or would like to give suggestions/feedback feel free to let me know!

Revisiting the Past, Again

The Changes Changed

title

Remember in my last post when I gave a sneak preview of what my new website/brand overhaul may look like? Well it turns out that may was a key word in that sentence because while I have started working on a brand adjustment it is nowhere near the direction that my small preview indicated. The reason? Simplicity. I decided that instead of building my brand around the idea of having memorable colors and styles that stood out to people I would design it to be simple and unobtrusive and let my work take precedence. I accomplished this on my website by doing two main things:

1) I completely eliminated all colors from the website design. The only elements that aren’t simply shades of grey are the items in my gallery. This helps them stand out better. And since my work is what really defines me as an artist it is important that it be the most prominent thing on peoples’ minds.

3d_prev
3D transforms, how exciting! I am a fan of any web element that, in addition to functionality, is fun to play with in a moment of boredom.

2) I simplified the layout of the website to the max. As soon as a visitor arrives they are presented with my gallery. That’s it. The only thing on the screen that isn’t part of the gallery is a 50-pixel-high nav bar that serves a the hub for functions such as returning to the top of the page; opening the “About Me” drawer; and providing links to email me, download my resume, and view this blog. Every item in the gallery is large and prominent. Not only that, but I eliminated all text from the page (except for my name, at higher browser widths) to allow the imagery maximum focus. Project titles and media are still visible via hover animation. Besides allowing me to play around with CSS 3D transforms this functionality also allows users to focus on a single thing at a time without being distracted by other text.

iphone_prev
Remember that iPhone web icon I showed in the last post? It looks like this now.

I hope to slowly migrate my whole brand to this new, simpler version. Thankfully one of my courses this semester just happens to be entirely dedicated to portfolio and personal brand development so I’m sure I’ll have plenty of opportunity to work on this project some more. I just hope it doesn’t prompt another web re-design just yet (but you never know)!

The Changes Changed