Filed under Flash, Fun on February 23 | 0 comments
Think you’ve got what it takes? Write a Flash ActioScript sketch/application in 140 characters or less. It’s harder than you think. Check out Grant Skinner’s overview and then read the rules. After you are thoroughly confused, check out the entry page for a little clarity and some great work. Prepare to be amazed at what a very creative community has put together. I have a couple I tossed together in the mix, but the real beauties belong to Quasimondo. His mastery of ActionScript has made 140 characters seem effortless.
With talk of more rounds to come and murmurs of various permutations of the gimmee code included to help you along in your quest, this should be fun to follow. Think of it as a communal geek Actionscript tennis carried on for all the world to be confused at. 
I’d love to see a TweetCoding that offers Flex as a option, or perhaps allows for a couple external packages as some of the gimee code. URLRequests (for e4x madness), maybe extra audio stuff, a little 3D, maybe some filters. I feel tired thinking about the late nights already. 
Have you created something cool in TweetCoding? Post a link here.
Filed under From Delicious on February 21 | 0 comments
Hey, why not link to another AS3 based preloader tutorial. Not bad.
About the easiest to follow AS3 preloader tutorial I have come across, great for new Flash designers.
A pretty big stack of CSS related tutorials and resources. Worth a review.
Filed under From Delicious on February 20 | 1 comment
Looking for some nice tiley background for divs and pages? Well, this site has over 150 of 'em.
Preaching to the choir here. Come to your meeting with confidence and rule that boardroom with your design prowess.
10 to 3 to 1. +Ponies! Who doesn't love ponies?
Working a design from sketch to wireframe to Photoshop.
Brainy ideas from some of the brainiest web designers around
A whole site with nothing but grid paper? Wow, I'm in love.
Filed under From Delicious on February 19 | 0 comments
Filed under From Delicious on February 17 | 0 comments
A wide array of good free stuff. Nice vectors, icons, css.
Some very very nice icons here in lots of formats and sizes.
Filed under School, Web Design on February 15 | 12 comments
I teach a web design course at Bradley University. “Designing for the World Wide Web” is the course title. The focus of the course is standards based web design using CSS and XHTML, coupled with a little bit of behavior layer DOM scripting using JavaScript. We use JS to place media files and validate some forms, etc. After the first couple classes and some demos on how to create a standards compliant XHTML document, we move on to teaching CSS. That’s where this post comes in. One of the best places on the web to see the power of CSS is of course CSSZenGarden.com, and I like to use that site as a good intro to CSS design and using web design tools like Firebug, and the WebDeveloper toolbar. The assignment is fairly straight-forward.
- Visit the site, save the HTML file to your computer.
- Make a CSS file and save it in the same directory as your HTML file.
- You are allowed to make only one edit to the HTML file, changing the import statement to load in your newly created CSS file.
- Choose a non Flash based web site design you would like to emulate and open it up in your web browser. (It works best if the site is a site designed with standards, using CSS for layout instead of tables, etc.) The idea is that you are attempting to recreate a site’s style, not one specific page. Therefore, it may be best to open up several pages of the site to see how images, lists, menus, headers, paragraphs etc are handled in various types of layouts and situations.
- Use Firebug’s inspection tools or the WebDeveloper’s Toolbar inspection set to discern what sorts of CSS properties are being modified. Make note of these.
- Apply the required CSS attributes to our local copy of CSS Zen Garden one by one.
- Work the page’s typography first, then padding and element margins, borders and backgrounds next, finalizing on placing the elements on page using floats, positioning, etc. You may need to create, make or replicate images in order to fully realize your design.
- Finish your work and upload it!
This is a relatively simple project and works well on so many levels. It gets you up to speed on what attributes CSS can modify on elements in an HTML page. It allows you as a designer to focus only on the style and not writing page structure or HTML markup. It serves a great introduction to advanced CSS concepts like contextual/descendant selectors in order to introduce variety in the designs and style the various lists in different fashions. It works as a job training aid because, often as a junior webdesigner on a project you may be required to follow the lead established by another designer on a project. It forces you to be creative with your CSS because you don’t have any flexibility to change the markup. It teaches you how to analyze a page’s design in a very methodical, detail oriented fashion. It requires that you be flexible and able to interpret rules that may use relative measurements that no longer apply to your more scaled back implementation. I like that the students are working towards a design goal in mind, rather then having to concept it themselves, allowing them to focus on the implementation. It’s easy to quantify how closely a design mimics the look of something else.
I am consistently amazed with the quality of work done by the students on this project. Sure there are stumbling blocks along the way, but overall it’s a resounding success and a great way to get student thinking about rules based design for the web.
Some things I don’t focus on in this assignment:
- IE compatibility, since we can’t create conditional stylesheets in the markup it would be difficult to expect aesthetic parity in Internet Explorer.
- Doing things the “exactly right” way. If a student needs to use large negative margins or non standard positioning techniques to achieve the look and feel of the other site, I’m fine with that.
- Perfect image quality. It would be a lot to ask to have the new students attempt graphic design techniques used on some of these sites.
So, here are a couple sample pages I have created. This one is done in the style of my blog. This one looks like an Adobe.com page. Each one looks pretty darn close to the inspiration site and didn’t require and editing of the markup.
How about you? Have you ever created a CSSZen Garden page? If you are teaching CSS to students, how do you get them started? I’m always interested in hearing
Filed under From Delicious on February 12 | 1 comment
A pretty good little video showing the styling of a page over time
A timelapse video of a CSS edit in process. Shows the general order in which you should probably work… typography, color, images/backgrounds, columns, fine-tuneing.
A cool little JS bookmarklet to create a timelpase movie out of your CSS Edit. Useful for tutorials.
Filed under From Delicious on February 9 | 0 comments
Filed under Flex on February 7 | 0 comments
I’ve been informed that I got accepted to speak at 360|Flex in Indianapolis (hence the title for the post)! The show will be going down May 18-20, 2009. This is my first true conference speaking gig, so I’m pretty psyched about it. I often speak to 1 day seminars, user groups, classes and other associations, but this is the first time I’ve been invited to a multi-day, multi-track event. Very cool, indeed.
My session is titled “Developers Are From Mars, Designers Are From Venus”. It’s a session focused on the integration points in a mixed team and the challenges facing them. This is a situation that many design and development house find themselves in today for a number of reasons. As Flash development gives way to Flex development for larger applications, the makeup of the development staff is bringing in more traditional development techniques and technology that seems foreign to designers. Likewise, Developers now just coming to the Flash platform, lured by RIA sexiness and agile techniques find themselves awash in a sea of designer hoo-ha. Leading? Kerning? Whitespace? The attention given to aesthetic in a modern app is not something one used to battleship grey apps is used to. This combination of situations, when put under pressure to deliver on time and on budget can breed animosity and destroys the teamwork mentality needed to create a superior user experience. My session is light on code, heavy on collaboration. Hopefully you’ll find out about some
You can check out the other great 49 speakers on the schedule at: http://360conferences.com/360flex/downloads/schedule.pdf It’s looking like it’s gonna be another great 360|Flex conference, especially with the list of people lined up. Juan Sanchez, Michael Labriola, Doug McCune, Josh Buhler, Renaun Erickson, Jeff Tapper and so many other talented and well known developers in the Flex ecosystem. I’m really happy to share a bill with so many others that I read, follow online and respect.
Tickets are cheaper on a first come, first serve basis! There are limited seats available, so register early. These 360|Flex events sell out. So buy your tickets asap at http://360flex.eventbrite.com to get the best possible price. I hope I see you there… you better go to my session!
Filed under From Delicious on February 5 | 2 comments
My del.icio.us
