Month: May 2014

Flat vs. Skeuomorphism

Flat vs skeuomorphic design is a big debate currently in all sorts of designs and is definitely a big debate in the web design community so I thought I’d do a quick blog post giving you the gist of it. “Flat design” is a type of minimalist design that emphasizes usability. “Skeuomorphic design” is a more realistic type of design with more of a depth and polish to it. Skeuomorphic designs have shadows, gradients, reliefs, and details that resemble how objects would like and act in the real world. The big debate is between the advantages and disadvantages of both designs–– which is better? While flat design maybe by easier to use and have a faster load time it’s also difficult to execute well and often lacks personality. One of the biggest challenges of flat design is to keep it simple and individual at the same time, but people see is as simple, clean, colorful, modern and trendy. Skeumorphism, on the other hand, is a safe and familiar approach for designers and viewers because it’s closer to the way we, as humans, perceive the world. Designs that used skeumorphism are also easier to understand the purpose of but the added illustrations that make it so easy to understand can cause delays and elongate the loading and rendering time. Skeumorphism can also quickly become outdated as styles and trends change and is not “responsive web” friendly.

Below are some examples of the differences between a flat design and skeuomorphic design

ios-7-vs-ios-6-homescreen calculator skeuomorphism

Cheater Cheater – Short Rant

I had planned on researching and discussing flat vs skeuomorphism design in this blog post but after my research in my last post I wanted to shortly talk about something else. While looking for good examples of responsive sites I discovered this site: http://interactions.webflow.com/#more which I also posted previously. While this site is amazingly done in it’s responsiveness it brought up another important topic in web design today. Web design is becoming more and more accessible to the common man, or layman. People without any knowledge or education in web design or code are being able to, more and more, get by on their own and create a site thanks to applications like Adobe Dreamweaver and sites like webflow and so many more. Applications and sites where you can just click a button, like the ones shown from Adobe Dreamweaver below, and the code gets written for you are diminishing the true skills behind web design and the importance of and the demand for the web designer. I just wanted to point that out and how while it’s helpful I still think people should learn how to code before they use the advantages of applications like this.

 

Responsive Design

In my New Media Interactive class, we didn’t really learn web “design” as much as we did the coding aspect and through all that html and css code and javascript nonsense I think a very important thing we learned in that class was how to create a responsive website and the importance of it. A responsive website basically means the website in a whole resizes to fit whatever screen or window it’s in.

This means that the designer or coder would have different stylesheets for a desktop, tablet, and mobile version. Check out these sites for examples of a responsive site:

http://dustoftheground.com

http://interactions.webflow.com (this also just so happens to be a really cool site and have to do with design without coding)

 

Just resize your screen on your computer from as big as it can go width-wise to as small and see how the site changes and responds to the screen size. Now take a look at Facebook, youtube, or even the apple website, all sites you’d think would utilize the benefits of responsive web design but don’t. See how parts of their sites get cut off the smaller you get? How you have to scroll from left to right to be able to see or even read a single part of the site, how annoying is that? Responsive design was created due to the development of tablets and smart phones and due to how annoying parts of the website being cut off on smaller screen sizes was to the viewer. Responsive design was a result of “user experience” coined by Ethan Marcotte in 2010. It’s a web design approach aimed at creating sites to provide an optimal viewing experience–– easy reading and navigation with a minimum of resizing, panning, and scrolling–– across a wide range of devices.

 

I’ve learned the easiest way to do this is to use percentages or “auto” instead of pixels for the widths of divs in your stylesheets. Now you’re probably wondering, what do you mean percentages instead of pixels? What’s a div? What exactly is a style sheet? This is a stylesheet, it defines all the aspects of your site, the colors, fonts, sizes, etc of the elements of the website through css.

 

Screen Shot 2014-05-17 at 7.00.02 PM

(click to enlarge)

The elements of your website are mostly divs, along with different type of fonts like paragraphs (<p>), headers (<h1>, <h2>, <h3>, etc), and lists (<ul> and <li>). Divs are basically the containers making up different sections of your site, they define a division or a section in an html document.  As you can see I used percentages for the width of the info, picture, and main divs. I did this so that between the desktop and tablet version of this site the divs would resize and fit to the screen size. If I do this for all the divs in my website it will, slowly but surely, become responsive.

 

To learn more check out this sweet site: http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

 

Why Web Design?

At the beginning of the senior year of high school I had no clue what I wanted to do with my life or where I wanted to go to school. During my junior year I wasn’t so worried when someone asked me where I wanted to go and I had no answer besides a shrug and “somewhere out of Maine” as my only criteria but once senior year hit and people were writing their college essays and applying early decisions the panic started kicking in. Lucky for me I has a slightly overbearing and controlling mother who took one look at my schedule for that year and immediately questioned almost all the classes I was taking.She convinced me to drop AP Physics and Ap Euro and for the first time ever take classes in things I was actually interested in doing with my life. At the time it felt like she was shoving the Web Design and Management class offered at my school down my throat, and being a teenager I tried to find every reason to do the opposite of what she was suggesting. Thankfully I couldn’t think of any real reason and I loved that class. I finally had a clue of something I would love to do for a career that I could actually do. Then as the story went on I discovered RIT and the New Media Design program and fell even more in love with the idea of design for the technological world.

That’s where my web design story began, I loved designing the sites and the different pages, I loved the torture of coding, I loved it all. Nowadays I’m actually in a web design class for my major, New Media Interactive, the class itself is basically teaching us how to cheat web design by using applications like Adobe Dreamweaver but I still love it. Since web design was kind of the spark that lit the fire that led me to RIT I thought it would be a good blog topic–– it’s something I’m really interested and passionate about. So here I am, and here you are reading (thanks by the way). Hopefully somewhere along the way we’ll both learn a little something about web design, there’s so much that I could talk about, responsive design, flat vs skeuomorphism design, typography on web design, the history of it! Who knows where I’ll go with this!