Pages

Monday, January 25, 2016

Logo

This is the evolution of my logo.
It had humble beginnings, as I explored around the web and tried to discover what I wanted my logo to be. It wasn't until i actually made a list that things started to click.





D BEGINNING

I actually had (barely) a journal to put down my ideas for logo designs.



It's not much at all, but it's also accurate. I spent several days browsing logo designs and finally wrote a list down, and then went through the possibilities for each one. I couldn't figure out how i would make a symbol for myself, so i went with everything that was much easier. 

It began with my vision of a horizontal door that is common in sci-fi stuff, which of course ended up not looking too good, and went through the list trying each idea, occasionally branching off, until of course I came upon the bob ross idea.


It was at the encouragement from all my classmates that I started the bob ross idea and sprinted with it, going from a simple idea, to a complicated masterpiece, and then finally to a legitimate logo. I knew from the getgo that I wanted to have overlapping mountains, for depth and because it makes the shape of M and is cool. I wanted a stream going through both mountains but found it was incredibly difficult to actually put my vision onto paper (which honestly is how most things go), and used clouds to emphasize the depth and create some background shapes. 


Things just went from point A to B to C as ideas spiralled out, some other ideas became obsolete and others never made it onto the computer, and at the end of it all we have the finished product.

                                      

Friday, January 22, 2016

Design Features in Professional Websites

Kool Website Designs

http://www.calm.com/


This site is probably the most interesting one I've found. It's by far the most minimalistic functional website I have seen, with at the most 5 different things taking up screen space. The obvious one is the background video, the 2 buttons in the bottom right for volume and video selection, and the logo, with a button for the menu which advertises their app & offers different amounts of meditation, and links to various affiliated pages.

I first took interest in the menu, and found that it was a simple animation done with CSS3.










After that I found where the videos were hiding, which are shown through HTML5's video tags and some javascript to fade it in and out.


 Finally, I found the code for the actual video controls. The code for which is incredibly long, so I grabbed a screen cap of the different names for the events instead.











http://thestatusaudio.com



This one was a little more generic for a professional design, featuring a lot of big pictures and some text. A lot of their design was hard to read if only because they made it overly complicated, but most of it used CSS3 animations. I went ahead and grabbed a simple example of this, with a hover button.








Next was an image rollover. I couldn't find the javascript used for this but I'm sure it's buried somewhere in the source code.



http://www.nicholasmoegly.com/


I wasn't able to find anything else unique about the last site, so I grabbed one last website that had something I actually hadn't seen before, although the only reason I was able to is because of the school filters.

This site has a neat loader spin thing, which used what looks like a combo of CSS3 and javascript for a placeholder loading image for social media links.