Flash

Last week Vice posted an article on Rob Ford’s newly published book, Web Design: The Evolution of the Digital World 1990-Today.

The 640-page book, full of pictures of interactive websites from prior eras, benefits from taking a wide view of the visual culture of the past: Starting at the embryonic stages of the World Wide Web, it follows the art of web design through periods of extreme experimentation on the way to the convention-driven scaffolding we have today. The book makes a compelling case through its general structure that the sweet spot of creative web design came during the late 1990s through the mid-2000s—periods in which major brands were willing to invest a whole lot of money in a website intended for show, not just tell.

Ford’s main perspective is that Flash is responsible for the Internet’s most creative era.

I started my career as a designer in the “sweet spot” Ford highlights in his book, so I am both biased and knowledgeable about the breakthroughs in web/interactive design of the period. I remember Joshua Davis and his website Praystation, where he posted his digital art experiments in Flash on an almost daily basis. Davis also provided his pre-compiled source files for anyone to take and run with. There was also Eric Natzke, James Paterson (Presstube), Robert Hodgin (flight 404) and dozens of other digital artists and experimentors pushing the envelope with what was possible with Flash on the Web.

Then there were all the nascent digital agencies blazing a trail in web design like Huge, Big Spaceship, grupoW, hi-res, RG/A, Kioken, group94, and Firstborn to name a few.

It was also during this period that I was a contributing editor to one of the larger web design portals, Moluv (it’s actually still up). As a young designer I’d sift through hundreds of website submissions every day to find just a small handful that were actually great — great interactivity, great typography, great animation, and great content.

Sure, you could say Ford and I are looking back at the Web through a rose-colored, 72dpi monitor, but it’s a fact that every immersive website – powered by HTML, Javascript, and CSS – you see today on design portals like Awwwards, siteinspire, and Designer News has it’s roots in the experimental Flash sites of the early 2000s.

Parallax scrolling, custom typefaces, scripted motion, dynamic masking, video backgrounds, interactive 3-D objects — these all began life on the Web as Flash websites.

There are also interesting comments on this Vice article over at Slashdot.org. Many of the comments are negative, shitting on Flash as a buggy plug-in, plagued by endless security holes. While the security concerns around Flash are very real (Adobe will stop distributing and updating Flash in 2020), this discounts all creative work created in Flash.

Flash’s greatest contribution to the world of digital design is it lowered the barrier to entry for creating experimental, immersive, digital experiences. Designers and artists were no longer stuck with static HTML and images. They could now express themselves though motion, sound, and interactivity. If he or she was unable to figure out how to achieve a particular effect, they could go one of the many vibrant forums and find the answer – and source files – from someone else.

Native Apps are Still Better

From The Verge, Web apps are only getting better:

So, what is a Progressive Web App?

Well, for starters, it’s just a website with a special “manifest” file that defines the name of the app, the icon for the home screen, and whether or not the app should show the typical browser UI or just take over the full screen. Users can add any website with a manifest file to their home screen or their Start menu and launch it like a regular mobile or desktop app.

But instead of just loading a website from the internet, a Progressive Web App is typically cached on your device so it has some sort of offline functionality. That could be anything ranging from saving the JavaScript and CSS so the website simply loads faster, on up to saving everything the user does locally like a traditional app.

Progressive Web Apps, importantly, can also support push notifications and other background work due to a new web technology called “service workers.” Service workers can help cache new content and synchronize local changes to a remote server, which keeps Progressive Web Apps as up-to-date as a typical website, while staying as responsive as a native app.

Right now the best example of a Progressive Web App is the Twitter Lite client. It’s fast, minimal, and even has a toggle so you can minimize data usage. Some online stores and publications have also taken advantage of the snappy performance of PWAs. I’ve actually been playing a minimal 2048 clone PWA on my iPhone for the last week. It works offline and remembers my high score between sessions. Sometimes it even saves the game state so I can resume a long run, but it’s not perfect.

In 2007, before the introduction of the App Store for iOS (then iPhone OS), Steve Jobs promised developers the power of writing web apps for iPhone. Developers didn’t buy it. Fast forward 11 years to now and I still don’t think many are buying it.

I’m happy web apps are getting better but native apps still have the upper hand.

Griddify for Photoshop

Griddify, “helps you compose custom grid systems, vertical rhythm, and do a bunch of other stuff with guides in photoshop.”
I installed Griddify and it’s great, but that’s not the only thing blowing my mind. If you watch the video at the link above, look closer. It’s not actually a video at all, but what seems to be an audio track synchronized to a series of clickable elements on the page.
For instance, as the creator is showing a demo of the extension, you can actually click on Photoshop panels (and input fields) in the demo. Again, it’s not a video.
There’s clearly a lot of Javascript trickery going on that’s way over my head. Impressive.

Categories:

Interactive

Tags:

The Right Tools

Suresh Selvaraj on how Mitya came about:

Imagine an author had to write a novel using Photoshop. Or, a programmer had to code in Word. Doesn’t even make sense, right? But this is what Interaction Designers are forced to put up with right now. IxDs have to use After Effects, a static video editing tool, or Quartz Composer, a programming tool, to create their visual interactions! They have to do their job using tools that were originally built for someone else!
After watching the demo video, I think Mitya has the potential to be a great application for creating interactive prototypes for mobile apps.

Categories:

Interactive

Tags:

Advice for Clients

Mobile is ubiquitous. As such, every website needs a mobile version. It just makes sense (except over at my site; we’re keeping things REAL). But, mobile websites don’t just fall from the sky. They need to be designed and developed with the same amount of care as a site made for desktop browsers. So, for all you small business people who are planning on hiring some people to design and build a site: If you want a mobile version, mention it in advance. Bringing up the subject at the end of a project, and expecting it to have been part of the package, is not going to do much to foster good relationships with your contractors.
If there has been no mobile design that you saw or approved of, there will be no mobile site. If there is no quote for a mobile version in the estimate, there will be no mobile site. And most importantly, if you do not ask for a mobile version of the site, you will not get one. Someday soon, it will not need to be said that a mobile version is required (it will still have to be paid for), but that day is not here yet.

Categories:

Interactive

Tags:

Under the Stars

A beautifully-designed site by TMC for their Summer Under the Stars showcase.

Beautifully laid-out type over large photographs will never get old. Add a sharp use of masks and motion to it and it’s even better. HTML and Javascript are really starting to grow up.

Thanks, Jory.

Categories:

Interactive

Tags:

IndustryNext – Great Integration of Map Technology

industrynext_contact.gif
This is a great example of choosing the right technology for the job. IndustryNext, like many companies, wanted to put a map on their contact page, but as cool as Google Maps is, it wasn’t the solution since IndustryNext’s site was built in Flash and Google Maps was built in AJAX.
So what they decided to do was use Yahoo Maps. It’s nearly identical to Google Maps, but in Flash. Like Google Maps, Yahoo Maps has a public API that you can tap into to build your own mashups. The result is a seemlessly integrated map experience.
Also note the use of direct linking within Flash on IndustryNext’s site, mimicking separate pages for each of the sections within the site. People have been doing this for a while, but it’s overlooked a lot:
http://www.industrynext.com/#showcase
http://www.industrynext.com/#capabilities

Categories:

Interactive

Tags:

Action City

actioncity.jpg
I just received an email from Creative Director of GrupoW, Miguel Calderon:

Only the toughest ones cross its streets. Danger is an exciting constant challenge for its habitants. Living in ActionCity is just for men who don’t fear sweat.

Great job guys! Check out Action City here.

Categories:

Interactive

Tags:

Why Interactive Design is the Best Field

I made the decision over 7 years ago that I was strictly ‘RGB’. What I mean by this was that despite my 4 years of print design training as an undergraduate, I was going to focus on web design. It proved to be good move because, aside from a slight bump in ’02 after the Dotcom Bubble burst, I’ve always had projects to work on.
What is it about interactive design that makes it so good?
Its Interactive
It’s right there in the name! Interactive design is not a one-way street. You click a button on a website and it responds. You type on your keyboard and click ‘Submit’ to update your site. You visit a film site and are immersed in a cinema-like experience. You can view content, create it, change it, download it, or send it on to a friend. As an interactive designer, you create the environments people will interact with. You decide how controlled or free the project is. It’s a lot of hard work and responsibility, but it’s also a lot of fun.
Open Source Community Love
This is an aspect of interactive design that truly sets itself apart from other industries. The fact that you have the ability to view code on other sites and learn hands-on from other people’s expertise is indispensable. This is particularly helpful when working out issues in XHTML and CSS.
When you’re designing and building your project, you’re never alone. If you hit a wall, either creatively or technically, you have forums and blogs where people just like you are dealing with the same issues, and most of the time there’s going to be people out there who know more than you and and can provide you with some direction or even post sample files to download.
valuable resources I’ve used:
Sitepoint – great for CSS, PHP/MySQL
Ultrashock – great Flash resource
AListApart – focused on web standards, HTML & CSS
Flashkit – all about Flash
StyleGala – CSS-focused portal
Prototype – Actionscript-licious
Do It Yourself
The final reason I’d like to mention on why interactive design is so great is best exemplified by Andy Rutledge in a recent article he wrote on his site. He concludes that CarMax.com is a poorly designed site. His next steps are:
a) explain why the site is poorly designed
b) redesign the homepage to reflect a better design and thus, communicate better.
This is why interactive designers should NEVER complain they don’t have anything in their portfolio worth showing. If you need portfolio pieces, make them up. Find a site that sucks and make it work! Have you always wanted to redo Craigslist? Then just do it. What are you waiting for? I’m not suggesting redesigning complete sites for free for companies that aren’t your clients, but focus on a key area – the homepage, the video player interface, the navigation bar. You decide what needs the most help.
From a career standpoint it’s important for potential employers to know that just because you’re not technically ‘working’ doesn’t mean you’re not working. Don’t make 6 months of unemployment a reason to be embarrassed. Make it a reason a employer didn’t find you sooner! You’d be surprised how much work you could get if you decided to send one of your drop-dead, amazing comps to the company in question.
This is also important for your growth as a designer. Just like your body, you mind needs exercise too. You ever go away on a 1 or 2 week vacation and sit back at your computer and have to thing for a second what those key commands were? So keep lifting those Photoshop weights. Keep running laps around the CSS track.
Enough reading. Go be interactive. Enjoy it.

Categories:

Interactive

Tags: