Thanks Filament Group!

Over the summer I had the awesome opportunity to intern at the Filament Group. They're the Development and Design firm behind the Boston Globe responsive redesign. I met Ethan Marcotte (who stops by occasionally) and the rest of the team. They also house jQuery mobile's mobile device test lab with over 70 devices. I learned a ton there and took notes: http://aetherpoint.com/Thank_You_Filament_Group/

Catchy Dubstep / Bass Music Fades Fast

Dubstep (and more accurately Bass Music) has taken a lot of the music scene by storm. A lot of Bass music is categorized by a drop, where the track is at it's apex of energy. This is essentially the chorus.

Bass music tends to relay on sound textures more than melody lines. While some Bass drops can be incredible, they tend to (this is not a global statement) lack melody and favor more sparsely arranged notes / samples.

My hypothesis is that bass music does not sit in our heads as long as more melodic music. How often to you actually find yourself humming a bass-genre song in comparison with a pop song? While pop is written specifically to be catchy, it does so with melody and something that can generally be sung along too. You can't really sing along to a dubstep drop.

It will be interesting to see how bass music will continue. Like everything it will see falls, emergences, and reemergences. This article was definitely written from a devil's advocate perspective. In no way am I bashing bass music or saying it's lesser. I'm just pointing out it's different music approach.

Responsive Design - South Street

Responsive design is something that an be tough to pull off. You can’t just take a site and squash it to Responsive. The change takes place at a content level, an information architecture level, a development level and a design level.

Take a large image for example. In a responsive design, a mobile device will have to download that entire image. Not too great for smartphones with slower connections and with users paying for their data. Just because you can use the latest WebGL, CSS3 doesn’t mean you should. Browsers, devices, and OS’s all have their own quirks. We need to put the user first and make our websites future friendly.

The Filament Group is making some huge strides in doing responsive design responsibly. If your into code, check them out:

https://github.com/filamentgroup/Southstreet

Mobile Devices, Browsers, and OS's Should Brag about their HTML5 integration

It's hard to keep things working consistently across a wide range of mobile devices, their OS's, and different browsers. What if companies could pitch their compatibility with HTML5, CSS3, and other best web practices, saying they give the best "internet experience"? This would encourage developers and companies to stay current to best web practices and educate consumers, allowing them to push the right things.

Television Media Query Testing

The Television has yet to be really explored like mobile devices have. I'm not even sure how well the query @Media Tv works. If anyone has information on this, or has televisions with browsers (and some spare time), please view the GitHub Thread below to do some testing.

Television Media Query Test

Resources:

• Google TV Developers, Designing for the TV
• Visual of TV Monitor "Breakpoints"
• Designing for the Interactive Television (PDF)

Is It Possible to Design Mobile First If We Can't Program Gestures on the Web?

Is It Possible to Design Mobile First If We Can't (easily) Program Gestures on the Web? Read the following article which brings up a great point about clunky UI buttons. Buttons are a hack.

A Thought on Web Redesigns: Long Term Transitional Design?

"The disaster known as redesigns:

• Large “Big Box” retailer spent $100,000,000 to redesign website. Launch day: 20% loss in revenues.
• Large law firm. Redesigned intranet to use MS Sharepoint instead of static HTML. The entire law firm was shut down for three weeks.
  
• One of the Top 20 Websites hired a top design firm for a complete UX overhaul. Pageviews decreased on 40% on launch day.
  
• United merged with Continental, flipped the switch on website launch. Result: Complaints out the whazoo!"

Read the entry from An Event Apart 2012 here.

When sites relaunch a redesign, users are generally upset or at the very least slightly unsettled at the change. Even if the UX, AI, and Visual Hierarchy is better, it's something different that the user has to adapt too.

My question is: "Is there anyway to grandfather a large user base into a new design?"

Facebook does it which their changes. They don't scare their users with any drastic changes. The large changes are also optional. Facebook's Timeline was a radical change, but users were allowed to try and choose if they wanted it. Slowly Facebook moved towards full timeline integration. As more and more users tried and got used to it, they became motivation for more stubborn users (yeah, you can probably think of those people) who didn't initially want to switch over. Many websites will allow users to try a fully redesigned version before it's release. I'm wondering if it's possible to keep the design modular enough that developers could slowly shift components around over an extended period of time while conducting user tests.

Kind of like a flounder. Except less ugly.

Maybe developers could emphasis modular components of a site to keep it maintainable, but also rearrangeable. If a change deemed itself beneficial for users, developers could shift the design.

If things want to be Responsive, they have to be able to evolve over the long term, not just in the heat of the moment. Future Friendly is an ideal example.

Free for Personal Use Photoshop Brushes

If you haven't already checked out my newer Photoshop Brushes, please do! I haven't had much time to design more, but hopefully I can make more in the future. Remember all the brushes here are 300 DPI, 2500 x 2500 pixels, perfect for Retina / HD Displays that the Web is moving towards. The Savage Brush Pack below has been very popular as has recieved over 100,000 downloads total to date.



















Check Them Out:

http://fort3design.blogspot.com/p/resources.html


Adobe Photoshop Extended CS6 Win Student 65171279

Air Mechs - Chrome Native Top Down RTS / Tower Defense / LoL - Style Game

I normally don't review games too often, but this game deserves mention. By Carbon Games, Air Mechs runs off a Chrome Browser Extension and utilizes WebGL to drive the game. The result is beautiful:

The result is a hybrid of League of Legends style gameplay with more Starcraft RTS elements. Units are vital to success, and positioning and match ups are just as crucial. While your main Air Mech can take on individual units, it cannot engage multiple enemies until mid to late game with upgraded powers / armor. I player must micro manage his / army in addition to fighting with his / her Air Mech. Players' armies must be preselected, adding an additional amount of strategy to the game, particularly in team matches.

Sure the UI isn't as tight as it could be, and the application does occasionally crash, but it's nevertheless a WebGL feat. With the recent changes in Natives Apps and Mobile Applications, where does a Browser Native game fall?


One can see it as just another App system, but also a step that could help bring rich content to general web applications. Download the Chrome Extension Here: http://carbongames.com/download.html

Must Read: Pragmatic Progressive Enhancement

Pragmatic responsive design

View more presentations from yiibu

The current state of the src image tag extension and picture element

Just wanted to call attention to this. Especially if you have been part of or following the proposed syntax to remedy the responsive images issue.

Read about it here.

Deadmau5... and UX (User Experience)?

Design has been moving in an adaptive, responsive, and experiential direction. Websites respond and adapt to the screen size (and hopefully eventually bandwidth: The State of Responsive Images). Instead of presenting the user with an aesthetically pleasing site, or even user interface, many designers now craft an entire experience. They ensure a user can get from point A to point B in the right amount of time while balancing other aspects like memorability, choice and challenge.

You may be wondering where Deadmau5 comes into the picture in contemporary design, and to answer your question he doesn't. What he says does though.

In a tumblr post Deadmau5 described how to market yourself as a producer, artist and musician:

anyway, im not sure whats left in me here, its late, early, whatever, i still havent slept… but the TLDR version is basicly… make an entire experience with your work… not just a name and a piece of work. Make an interesting and unique experience, and the people will want to come to be a part of it. and the rest will just happen naturally. think about it. the experience that is yours will “market” itself. -Deadmau5

Instead of just creating a catchy song and giving it a name, an artist has to market him and / or herself as an experience. I'm not trying to extract meaning out of this quote, but one cannot deny Deadmau5's success as a trailblazer in electronic music. Perhaps he just knows what people are looking for.

I would say that people really are looking for a full experience, not just something that they can hear or see. People are longing to be part of something and immersed, and it's our job as artists and designers to craft that for them.

Retina Displays: Choking Up the Web?

Apple has confirmed their new Macbooks will feature retina displays. It's clear that Apple is pushing high DPI screens. My question is, will this move slow down the web? People don't seem to be rushing to add graphics that take advantage of the iPhone 4 Retina Display and other +72 DPI Smart Phones' displays. Regardless, increasing the DPI of an image increases file size, increasing page load times. Will the speed of web development be able to compensate for a shift in image file size?

Read more on CNet.

Less CSS

A way to write dynamic CSS code more efficiently.

http://lesscss.org/

Golden Grid System

An alternate responsive grid system with a wider max width. Check it out.

http://goldengridsystem.com/

More Must Read Links

More good web articles and trends to catch up on if you haven't already. Check it out:


http://www.netmagazine.com/features/15-top-web-design-and-development-trends-2012

http://www.alistapart.com/articles/responsive-web-design/

http://coding.smashingmagazine.com/2012/01/30/the-future-of-screen-typography-is-in-your-hands/

http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one/

http://thewondrous.com/outstanding-web-typography-trends-for-2012/

http://www.abookapart.com/products/mobile-first

http://www.netmagazine.com/features/state-responsive-images

Why Good UI Design is So Hard for Developers

Good UI design is hard to achieve for developers in the same way that good programming and development is hard for designers. The comments here are a nice refresher.


http://stackoverflow.com/questions/514083/why-is-good-ui-design-so-hard-for-some-developers

Responsive Design Resources

Some pretty interesting resources for Responsive Designers.

Check It Out

WebGl Terrain Editor

Pretty amazing. This was not possible in the browser a year or so ago.

Check It Out


More Experimental Web Gl sites here.

Responsive Type / Design

A thought on responsive type. Instead of setting certain pixel / em sizes for type. I wonder if it would be possible to create a light framework of variable type with Javascript. Instead of defining a specific size to begin with, why not pick a range (that responsive to different criteria) and then base everything off of ratios similar to what we already do. This is probably already being implemented. A limited example is the variable text-size on the Boston Globe except based around other data instead of user input. I wonder how much we can utilize information collected from the user to customize their experience besides the width of the browser.

http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one/

Photoshop, Illustrator, and Indesign should be MIDI Assignable

While midi mapping is typically feature of Music Mastering / Digital Audio Workstation programs, I think midi support should be implemented in design programs. Controls could be mapped to basic midi controllers (like the AKAI MPD 24). It could increase workflow speed since hotkeys cannot be assigned to everything.

Google Play

Google play now offers mp3's in 320 kbs in addition to lots of other android apps and games to the Chrome browser. It may challenge Beatport or iTunes. Because it's web based, Google can access and draw from it's existing user base through Chrome and Gmail, especially to the mobile audience (where it's existed for some time). Promotion with popular $3.99 albums helps as well too.


Check it out:

https://play.google.com/store

New Music

An important distinction between a "cosmetically responsive website" and a fully responsive site

An important distinction between a "cosmetically responsive website" and a fully responsive site. While media queries are great for changing things visually, they don't change content. i.e. Users approaching a site from a handheld perspective will be there for a different reason than ones visiting the site on a desktop and therefore should optimally be served different content, not the same content with a different interface.

http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one/

It would be very helpful to have data as to what users do online on their mobile phones. If anyone has some good resources, please post them.

Top Website Design Sites

Check out these websites featuring some of the best designed and developed websites on the net:




http://www.awwwards.com/ 


http://designcharts.com/ 


http://www.moluv.com/ 


http://www.thefwa.com/ 


http://www.cssdesignawards.com/

A Call to Student Designers and Design Professors

The web has been advancing quickly within the past year. Students enrolled in design classes now find themselves with many professors that have not been able to keep up with the recent advances. In some cases this results in the lack of proper education and preparation for the workforce post-schooling.

One could argue that school is primarily useful for learning to think creatively and problem solving which could be applied to anything that is encountered later on. Many students learn how to utilize the creative process as well as synthesize information into visually engaging forms of communication. That is extremely important.

In order to remain relevant to the design profession, however, designers should know what can be done and what advances have been made to allow things to happen. Similar to being aware of visual trends, designers have to be aware of new code, techniques, and devices that exist. Without this awareness, designers cannot communicate with their developers or use all the weapons available to them in their arsenal. Student designers must be familiar with, let alone embrace the new turns the web has taken and be willing to constantly learn and make adjustments moving forward. Otherwise they're just in a box.

Your browser does not support the canvas element.


To Students: Become familiar with HTML5, CSS3. Jquery, and what they can do. Learn how and why they are implemented. Better yet, learn how to implement them. Become familiar with responsive design and how it effects the ideal website today. Know both visual and web-based design trends. Learn how UX and Information Architecture works. Predict for the future and try new things. Learn new things. Push your old-school professors to learn new things. Challenge them respectfully (You likely know something web-based they don't. They have years of design experience within the design industry).


To Professors: Be ready to learn new things. Learn what you can about responsive design, HTML5, CSS3, and jQuery among other things. Make your students explore new techniques. You have many connections that can serve as ways to educate students. Invite designers from cutting edge firms to hold a discussion with their class. Utilize the resources on the internet, blogs, and others designer's sites. Know you are laying a foundation for the next generation of designers.

Regarding the HTML5 Canvas & Online SVG

Online SVG compatibility allows for unlimited scaling on the web. I'm wondering if website designs could be created in illustrator and exported to a scalable SVG as another option for responsive design. The main problem would be adding interactivity. If all the graphic elements are completely scalable, there would be a infinite amount of basic scaling flexibility. Would this challenge the box/wrapper model?

Top Web-Based Typeface Hosting Site Comparisons

Smashing Magazine has a great post comparing the various @font-face hosting companies. There is a lot of early competitors, but I feel like we will see the list shrink, and less sites can provide something competitive. There are so many options that finding the right typeface hosting site can be a little overwhelming.

There has to be some way to centralize typeface hosting. Maybe we will see that as the use of @font-face and its hosting sites supporting it become bigger.


@font-face comparison chart

Top Web-Based Typeface Hosting Site Comparisons

The Future of Web Typography

A great article on smashing about screen typography's potential through Font Face. As websites become more and more responsive, the typography will have adjust as well. Check It

The Shrinking Power of the Raster File

With the advent of the HTML5 canvas element, it is possible to incorporate vector images into the web experience (A good article about the canvas element here). With that being said, basic task that could be done in photoshop or illustrator can simply be made through code while retaining a large amount of flexibility, something essential in responsive design. Photoshop and illustrator, while always important for more complicated components are loosing their usefulness for web application (similar to fireworks). It will be interesting to see how much the web will use codes such as the canvas elements to render visuals instead of through photoshop. When will Dreamweaver or a similar program incorporate a WYSIWYG editor for the canvas?

SOPA and PIPA online protest (January 18th, 2012)

As you very well may know, today is that day in which several major sites, including Wikipedia and Google have protest the SOPA and PIPA bills. The bills aim to cut off websites that are providing primarily pirated content through government regulation. While piracy and copyright infringement are both something that should be removed, the definition of copyright infringement can be shaky. It would slow the inception of new ideas prevent important controversial topics from being brought up. Deviant Art provides a straightforward and distilled version to help people understand the bill and its repercussions.

Read It on Deviant Art

Great Breakdown of the bill: http://mashable.com/2012/01/17/sopa-dangerous-opinion/

"An Important Time for Designers"

This article provides a great goal looking forward and reminds us of the power designers have to shape our world. 


Please Read This

Web Design and Social Media: Insights for 2012

Web design and social media especially have made huge jumps in 2011. Integration of responsive design, jQuery, and HTML5 have been the widespread trend (some of which is over-hyped). This article gives good insight on web, design, and social media in 2012.



Check it Out

Abduzeedo.com - A great source for inspiration.

This site offers a wide variety of different art/design/photography work all of which are well selected and cataloged. The Daily Inspiration posts are especially note worthy.

Check It Out

HTML5's Power, Threatening Apps

HTML5 is gaining strength and will slowly overtake applications on the IOS/Android market because it lives inside the browser (therefore making it easier to distribute) and can do much of what applications can do. This article explains it very well.


Check Out This Article

Fontbook 2.0 - iPad

Fontbook. 2.0 recently launched for the iPad. It features thousands of new cataloged typefaces and boasts the ability to search for and compare typefaces of a similar genres, time period, usage, and trends, all of which are upldated and curated through Over the Air Technology. There are no plans to launch for the Android/OSX, but a HTML version is in development.





Check it Out!

Buy it!

Layer Tennis

Layer Tennis is a Friday competition between two well known designers in which a file is handed back to the opposing designer every 15 minutes. Animation, type, photomanipulation, and illustration, are all tools that are used. The results are pretty crazy:




Check It Out!


Forte