Flush cleanses the mind and scoops up any crappy (as well as those genuinely good) graphic design ideas, notes, and thoughts.
Just finished coding the Form page of the Experiments section. The concept with this one is to move the transparencies around to create new forms. And you can reload the page and generate a new configuration. I don’t make a point to decrease accessibility, but it just happened that way. And when the section fills up, it’ll look more coherent, relatively speaking.
Flush.
The temporary version of the Archives section is now open. So you can look at my old portfolio sites as well as the Blogger version of Flush.
As I do more new stuff, I will move the old stuff to the Archives.
Flush.
As mentioned in the previous post, the Experiments Section now has a background. It’s meant to accommodate the widest available screen (according to Wikipedia), which is 2560 x 2048. I don’t have that large of a monitor, but it’s one of those things where you have to expect as many possible user experience scenarios as you can.
Here’s a screen shot of a part of the background image, but zoom out on the actual page or select the View Background Image function of your browser to see the entire image.
The background image is a composition of the raw photographs I took two years ago at Putah Creek at UC Davis. They were meant to be photomerged into a seamless image, but I thought it would be appropriate to show them this way for the Experiments section to represent the emphasis on the process rather than the result in creative experiments.
I also started working on the Photo page of the Experiments Section. Here’s a cropped screenshot.
The idea with this section’s design is that the only thing you see on the page is images and no text. The text only appears when your cursor hovers over the transparency that has that text in it.
Not sure about the level of accessibility here, but the Experiments section is the only section on my site that is not limited by accessibility concerns, even though I try to accommodate accessibility needs when convenient. The text-less states are controlled by CSS anyway, so if someone visits the site without CSS, it will read it perfectly fine.
The page is also meant to be wider than your browser window. Unless you turn off JavaScript, you’re always going to have a wider page along a horizontal scrollbar. With this being a page about images, the idea is to fit more images on each row with the space that was taken up by the navigation on the left.
Flush.
Transparencies are in place. Just a couple of things and the main page is done!
Flush.
Started laying out the Experiments page. The following’s a screenshot of what I have so far, and here’s the temporary address: http://ivanwlam.com/experiments/wordpress
The yellow and green blocks are only there for positioning. The transparency images will replace them when they’re ready. I pulled the template from the Flush theme, which is why you see some similar elements. But I’m going to customize all the elements to this page, of course.
By the way, if anyone knows how to disable vertical scrolling in Opera, Chrome, and Safari (basically any browser that’s not IE or Firefox), I’d like to know!
Flush.
I sort of left out something from the monthly review that I forgot to mention. For the past month, I started watching through a bunch of TED videos at a time on the Adobe Media Player. I wanted to see what some of the smartest and and most successful people have done and can inspire me with. Some were hits, while others misses.
I am often amazed at how some of these presenters think so differently and creatively to solve their particular problems. I’m sure some of it was BS in their presentations, but the rest is quite impressive.
This evening, I watched IDEO CEO Tim Brown’s presentation on creativity and play. He explained how as children grow up, they learn to self-edit and develop judgment of their actions, thus the ability to create freely and to brainstorm diminishes.
I certainly feel that way. Based on the environment in which I grew up, it’s practically inevitable that I’d learned to be all about perfection and accuracy. But I’ve also since learned to pull myself away from that and am now finding a balance between entropy and order (this explains my equal love for visual design and programming).
At the same time, my head is constantly filling with so many ideas about everything, it’s ridiculous. For the past few years, I’ve used many tools to download those ideas, with different levels of success. Currently, I have this blog Flush, though you can tell how much success I’ve had with it as my ideas-unloading medium (but hopefully that will all change now that I’ve switched to WordPress), I have my GTD “Someday/Maybe” system that safely stores my ideas for a later time, and I have Twitter, to my followers on which I apologize, for the thoughts there are less design and more… unusual.
And now, I am working on another medium that is the most related to design, the Experiments. It’s one of the main sections of my website that I am redesigning, similar to what I’ve done to Flush, and hopefully, this will be an easy medium for me to work with and that the convenience will encourage me to finally do experiments on a regular basis. Here is a screenshot of the design I’ve worked on today:
Yes, it’s going to be blog-based, but the individual categories will be in a slightly different format. This is going to cut down on the programming but still have room for me to be creative and explore with code and design.
So with the opening of the Experiments section in the coming days, I am optimistic that I can more easily take Tim Brown’s advice to explore and to play, and to keep creativity regular.
Flush.
A little more than four months ago, my designer friend Alan Wells recommended me to his friends Kai and Nate for a freelance gig to build a website for their newly founded viral video production company. He sent me the link to their site at the time, which he had quickly put together showcasing their past video projects. I quickly did more research on these guys to get a sense of the type of work they do. (And by research, I meant watching all of their videos in one sitting.)
One of their larger projects was a video blog called Huge in Asia, where they lived in Vietnam and other Asian countries for a couple months documenting their adventures. (I mentioned this in my monthly review last December.) After watching the fifty-episode vlog series, I knew that these guys possessed the potential for excellent content and success, and despite the upcoming busy holiday season at Peet’s, I decided that I would help these guys out and build a site for their company Portal A Interactive.
Being a typical recent-graduate designer, I couldn’t help but start coming up with ideas for the site. (I suppose I was still in school mode, where I was compelled to act on any ideas I thought of without considering ownership and compensation.) At the same time, though, having completed a design project for my relatives a few months back without a contract, I definitely learned my lesson and was determined to do everything I was supposed to as a freelancer this time around to protect myself and the client from unnecessary unhappiness.
I looked up tutorials for drafting freelance design contracts, and like the advice that young designers receive from experienced designers for preparing portfolios, there was an unbelievably overwhelming wealth of types of ways that one could go about this. There was so much conflicting advice that I could seriously curl up under my covers and cry. I asked my freelancer friends for advice and tried to write my own contract, but I was still concerned that I might be missing something that would come back and bite me later on.
Fortunately, I remembered that AIGA’s site has a section for business practices. I found the AIGA Standard Form of Agreement for Design Services that designers can use as a template. I adapted the AIGA agreement and took out one or two clauses that didn’t apply at all and had no way of hurting me or the client. I also put together a project-specific proposal, and quickly tried to get all that legal stuff taken care of so I could stop turning off the part of my brain that is responsible for thinking of ideas for the site.
After the administrative stuff was taken care of, the first task in the agenda was creating the logo. I enjoy designing logos not because it’s easy (it’s not). I love that good logos look simple, yet are highly complex. Generally, the more different elements there are in a logo, the weaker the logo becomes. So with this project, I tried to keep the logo as simple as I could, sticking to the criteria of using a “one” letterform design and projecting a light-bulb signage mood that the client had envisioned.
Here’s the basic concept of the logo:
Here’s the final version, lit up and against a dark background:
Since this logo doesn’t include the name of the company, I developed a secondary logo mainly for the website.
Details of the neon:
While the neon isn’t the same type of lighting as the light-bulb logo, incorporating both into the site creates a mood that could not be achieved by using just one. This results in a mix, a melting pot of ideas, something that is not completely established and boring, and something that is flexible and can change as it grows, which is, in a way, what this company is about.
Before I took on this project, I had never touched WordPress. I had heard about it, but I always thought it was a paid service, and I just didn’t want to pay to create a blog that I could do the same thing for free somewhere else. But turns out it was free, and it gives you mad power for customization… in PHP. I was new to PHP, so this was both a challenge and an opportunity to learn.
As I worked on this project, I became more familiar with the WordPress setup as well as with PHP and MySQL, which I was also new to. But I quickly grew to like it. In fact, I liked it so much, I set up the video thumbnail section in the header that is based on MySQL. Furthermore, when I will be done with this project in a few weeks, I’m going back to my own site and convert it to accommodate the use of MySQL, such as my portfolio and experiments pages, which is currently based on PHP and XML.
This project has also allowed me to experiment with interactivity that I would not have needed with my own site. The video thumbnail section in the header has a slider that shows more thumbnails when you click on the arrows. It’s a simple function, but there’s a lot of planning involved. It’s even Javascript-disabled-safe in that, if you disable Javascript, the arrows disappear so you won’t have non-functioning arrows which would weaken user experience.
Another interactive feature is the Grayout. When you click on a thumbnail video in the header or a Featured video in the sidebar, the whole page darkens and displays the video on that page. The size also adjusts based on your window size (except for IE) up to certain max/min values. Again, it’s Javascript-disabled-safe; if you disable Javascript, the images act as normal links and bring to a different page so you can still watch the videos.
Finally, launched two weeks ago, a video player that plays more than one video in sync. This was something that Kai and Nate had first suggested, way in the beginning, before we even met and agreed to work together. Currently, the controls are basic, but using the YouTube Chromeless Player API, I set up a player that plays two or more videos at the same time, so that one (or more) video(s) can sync with one another. Here’s an example of what they did with this player. I’ve added volume control that Kai and Nate can determine beforehand to maximize viewer’s audio experience.
There’s a lot more to talk about than what I can cover here (or that you’re willing to read), so let me wrap up by briefly going over the many things that I have learned through this project.
Flush.
Comments:
No Comments Yet »