Meta

Web Design

You may remember my post from a few months ago about the difficulty behind designing a new “save” icon. But that’s not the only icon that has issues. A designer by the name of Min Ming Lo has a fantastic article comparing the different “share” icons, including the difficulty of describing such a vague and general event using a single symbol.

In the last few day’s I’ve added 3 branding/web design projects to my portfolio. Have I finally decided a direction and started focusing solely on those forms of media? Well, no. The honest truth is I’ve had those projects finished for a while now and I’ve simply been procrastinating on posting them. But with all of the exciting projects I’ve been working on lately, can you blame me? Check them out on my website.

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!

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 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.

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)!

After months of work I have finally finished my largest web design project to date. I worked with Michail Yasonik to create a new website for RIT’s Computer Science House. The website is fully responsive and is compatible with all major browsers, including mobile browsers. We are both active members of CSH and are continuously updating and optimizing the website.

Remember that New Logo! post I made awhile back? How about the Wax Seals one I made more recently? Both of those featured images of what I considered at the time to be a personal logo. But the problem is, while they both had their merits, neither of those designs matched my style, both in logos and in design in general. So I decided to take another shot at it. This time I think I have it right. So, without further ado, here is the new re-branding of me.

This year I joined RIT’s SIGGRAPH group, called RITgraph. For those unaware, SIGGRAPH (Special Interest Group on GRAPHics and interactive techniques) is a worldwide group of artists, technicians, engineers, and enthusiasts working towards innovation and development in the field of computer graphics. Our group holds workshops, hosts industry speakers, and does other awesome things to foster community participation and interaction.

At the beginning of every year RITgraph chooses members to serve various executive board positions. This year, I became the graphic and web design officer for the group. This generally meant I was in charge of creating promotional material for our various events. However, I also decided to create a new RITgraph website as well. The new website helps us promote ourselves as well as keep members up-to-date with our events. Plus it was fun to create, which is always nice.

I urge everyone to look into SIGGRAPH – it’s an awesome group and a blast to be a part of. Or, if you’re a student at RIt (or just interested in seeing my website) you can check out RITgraph at rit.edu/sg/ritgraph.