blog

We’re very proud of our design capabilities here at dynamIt. We started mainly as a dev house, but quickly realized the value in having rock star designers on staff. All of the sites we design are custom and the critical aesthetic eye is invaluable in development of User Interfaces for our systems.

Our lead designer – Phil Franks – is multi-talented. He continually puts out stunning designs, wowing not only clients but everyone here in the office with his innovation and vision. In the last few months, he put one of his favorite talents (logo design) to use and saw some pretty spectacular results.

DataPortability is an organization that champions the “idea that individuals should have control over their data by determining who can use it and how it can be used.” The concept is important on the internet today as more and more information is stored and available on the web. All of the major players including Microsoft, Facebook, Flickr, YouTube, etc. are on board and the technical best practices being developed will no doubt be a big part of standards in web for a long time.

Enter problem – DataPortability finds out that their logo happens to look a lot like the Fedora logo (read more about this here). Instead of dropping loads of cash and hiring some big firm to design a new logo [although they coulda shoulda come to dynamIt ] DP engaged in a concept called crowdsourcing and opened up a global contest for new a new logo. They utilized Flickr as the collection/viewing mechanism and things really took off. The contest was PR’d by popular blog/site TechCrunch . Nearly 500 submissions came in from around the world. The submission period was closed and the logos were reviewed by panel of judges that have these nice little companies in their titles:

* Malthe Sigurdsson, Brand director at Skype
* Fred Oliveira, Webreakstuff.com
* Tom Coates, Yahoo
* Ashley Hall, Yahoo
* Fiona McDougall, OneWorld Communications
* Michael Pick, Smashcut Media

Long story short – Phil’s design made the short list/final cut of 15 from the nearly 500 original submissions. Not too shabby huh? See Phil’s logo right below >>

The final phase was a public vote. While Phil’s logo wasn’t chosen in the end (and believe me we are not fans of the winner), we think that it is a tribute to his incredible talent that one of his concepts was selected as one of the top 15 (actually it was ranked #2 by the judges before the public got their hands on things). *Note: Strike 2 against DataPortability today as a French company has sent a second cease and desist letter claiming that the new logo is infringing on theirs. We’ll see how that turns out.

We look at the entire situation as a great opportunity to showcase the skills of a member of the dynamIt team. Also, I point out that this is another example of the go-get-’em attitude and initiative that we all take: not only are we working hard on client charges, but we pursue our passions individually as well.

one.

:: Nick ::

Most days you will find us in the office, sleeves rolled up, hunched over our desks, designing sweetness or coding away. We greatly enjoy the work that we do from day to day, but every now and then it is good to escape the typical work day and, well, just have fun. Last Thursday was one of those days. When the guys showed up in the morning we decided we were going to drop everything, drive down to Cincinnati, and catch the 12:35pm Reds game.

There is nothing quite like enjoying a hot dog and cold beer at the ballpark on a nice afternoon. On a personal level, the trip down to Cincinnati as well as the ballpark setting call to mind only the best of memories. We arrived in Cincinnati to find it sunny and about 75 degrees, a perfect day for baseball. We purchased tickets and made our way to the bleacher seats above the left field wall. Most of the game’s action took place in the first two innings as Houston jumped out to 3-1 lead only to find it tied after Reds’ at-bat in the second. In the fifth, the Astros added two more runs. The Reds would try to catch up, but never bring it any closer. The game ended with the score 5-3 in favor of the Astros.

Although the Reds could not pull it out, we certainly enjoyed the trip. After the game, it was back to Columbus to resume work as usual at dynamIt.

Using dynamIt Portals

dynamIt loves Portal. Unlike the Aperture Science Laboratory, you will hopefully find navigation through our site easy enough without the portal gun. However, we decided to give you one anyway. During your stay here at www.dynamItTechnologies.com you will be able to jump from page to page by placing portals and stepping through them.

To place a portal: (Shift+Click and Alt+Click)

To walk through a portal:

How to get dynamIt portals on your site

You are welcome to play around on our site as much as you’d like. But, you can take it a step farther and place our portals on your own website or blog. All of our source code is provided for download below.

To install dynamIt portals, copy the following files to your web server: portal.php, orange.png, and blue.png. In addition, you will also need to get a copy of jQuery as the dynamIt portals depend heavily on it. Please visit http://www.jquery.com for more details. Note that dynamIt Portals was developed using jQuery v1.2.3. In the download, we are supplying this version unchanged.

Once the files have been placed on your server, open portal.php and make a minor modification. On line 28 you will find:

You will need to replace our web address with the URL to the directory in which you have placed the portal files.

Then, you will need to place two things into every portalable surface of your website (that is, every page you wish to be reachable by dynamIt Portal). First, you will need to have an active PHP session, so if it does not already exist, place the following code at the very top of every page, before anything has been output to the browser:

Second, inside the html <head> of each page, include portal.php like so:

That is all there is to it. Download the code by clicking the link below to get started.

portal.zip (180KB)

Web design has evolved over the years, and the new way of designing websites focuses on the user experience. Combining usability with design has enhanced the look of the web on many levels, and sites are just more pleasing visually. Some of these design choices, if implemented properly, can really enhance the overall look and feel of your site and make for a great user experience.

Horizontal Division & Open Floor Plan

A major choice in web design has to do with the initial layout of the site. Much like the new real estate trend of the open floor plans, people also like the way that looks on the web. Having only horizontal lines dividing the site, while letting the text and graphics define the vertical lines, really softens the overall look of a site design.

Using Only A Few Colors

Usually, when designing a site, I like to stick with three to four colors on my palette. Choosing to use a moderate color palette with a vibrant pop color seems to be the style for a few reasons. First, it creates another form of hierarchy for the user, allowing the vibrant colors to show what is more important on the page. Two, the user isn’t overwhelmed by a crazy color wheel of fun. It seems to be more pleasing on the eye, allowing users to focus on what is really important on the page. Few colors, if used correctly can also enhance the overall look of your site.

The Use of Good Typography

People usually think of text as text, but when people can see text as a graphic element as well, that is typography in action. When laying out text on a page, the goal is to create contrast in the piles of words. Creating over sized headers is an easy way to catch the attention of the user, and it also looks great on the page. Throwing in some changes in color, line weight, and line spacing can really make a page of words easy on the eyes.

Gradients, Graphics, and Textures

The web one style of flat colors, boxes on a page, and animated gifs are long gone. Adding subtle gradients creates a nice change of color and gives dimension to a page design. Using icons, much like the new CBR site design that just launched see the site, can add to the user experience as well. Using icons and graphics to define navigation or break up text on a page layout really enhances the look of a site. Another way to jazz up a site design is to incorporate a texture. You can see this implemented on various themed sites, and when it’s applied the right way it can really take your site to the next level.

Every web developer should be well aware that if your e-mail address appears on your website in text, you should expect an increase in spam. To thwart spammers you will often see e-mail addresses placed in images to be displayed on the web. I used to do it this way myself, but recently I have shifted to a method that is much easier implement and should work just as well.

The solution: use JavaScript. By using a programming language like JavaScript to build a string and display it, evil spamming robots can scrub my site all they’d like and never find my e-mail address in the code.

<a href=”javascript:location.href = ‘ma’ + ‘i’ + ‘lto:b’ + ‘ob’ + ‘b’ + ‘y@’ + ‘d’ + ‘y’ + ‘na’ + ‘mi’ + ‘t.u’ + ‘s’;”><script type=”text/javascript”>document.write(‘b’ + ‘ob’ + ‘b’ + ‘y&’ + ‘#’ + ’64;d’ + ‘y’ + ‘na’ + ‘mi’ + ‘t.u’ + ‘s’);</script></a>

Turn every <h1> into any font.

I’ve got a client that insists on a using a fancy script font for every headline on their site.
That is great, but this font is probably the farthest thing from web-safe and I need to make it so that every computer user sees their fancy font.
I could sit here and make close to 100 images, one for each page’s title, but what happens when the client adds a new page to the site with our CMS?
Exactly, we need a solution that is not only easy to implement, but easy to maintain.

It is not an uncommon solution to use Flash to embed our favorite font and display our titles to all using this font.
We can query sting the data into our Flash movie and have it quickly build the title with ActionScript.
Ok, that solves the easy to implement problem, but how about maintenance? Certainly, we cannot expect the client to know how
to change a query string parameter in the Flash embed code. Rest assured, with a little JavaScript (using jQuery) we can make
it so that all the user has to do it create an <h1> and have that morphed into our Flash header as the page loads.

Step 1: Create the Flash Movie

This is almost trivial if you know some Flash. We need to do two things, create the dynamic text box with our embedded font,
then write the ActionScript one-liner to set its value based on our parameter.

First, create a new Flash movie with the size for your headline. Then, to embed a font,

1. Right click on the Library Pane and select ‘New Font…’
2. Give this font a name and select from the drop-down list which font you would like to embed.
3. Click ‘Ok’, a font symbol will be placed in your movie’s library.

Now, draw a text box on the stage and do the following using the Properties window,

1. Select ‘Dynamic Text’ from the drop-down (instead of static text or input text).
2. Give the text box an instance name, I have called mine ‘myTitle’.
3. From the font drop-down select the font symbol you have created by name. Be sure that there is an asterisk
   next to the name, this tells us it is a font symbol.
4. Set any other text properties that you wish such as size, color, etc.
5. Click on the button labeled ‘Embed…’.
6. Select the characters from this font which you will need to embed. Note, you will very unlikely need them all,
   just select the sets that will be actually used by your titles.
7. Click ‘Ok’.

Finally, we will need to add the ActionScript to pull in a variable from the query string and set our text box to have this value.
Click on the only frame in the timeline and open your Actions window. if you are using ActionScript 2.0 this is a simple one-liner:

All we need to do now is send in a value ‘t’ and our title will be set as needed.

Publish the movie, upload to your web server and drop the embed code into your HTML.
If you have called the movie myTitle.swf then make sure that you are specifying the title when referencing the swf source.
For example, if your page title is ‘Our Services’ then the Flash movie we need to load should be myTitle.swf?t=Our+Services.

Step 2: Use JavaScript to replace the <h1>’s with our Flash titles.

Now that we have an instance of our Flash title working, we want to automate this so we need not go into the HTML source any time we want
a different page title. We will achieve this by replacing every <h1> on the page with the equivalent Flash title.

I will use jQuery to do my heavy lifting. Also, I will be implementing SWFObject to place my Flash movies.

If you are following along with the code you see that we loop through each <h1> on the page, give that <h1> an ID, pull the content
of the headline and send it into a Flash movie instance that we write to the <h1> element with SWFObject.
This will effectively replace each <h1> on the page with a version that preserves the font of our choice.