Skip navigation
Help

recorder.sayforward.com

Hey! You're looking at the front page of recorder.sayforward.com which is a temporary storage place for articles I didn't read/evaluate yet. I also use this platform to prepare new content to post sayforward.com where audio/video/image material is hosted completely on my server. On the recorder instead, media is loaded from external sources, so don't get mad if some of them don't work anymore.

Please note that the content posted here is explicitly intended to help me remember certain things, i.e. it is not intended to entertain you in any way (although you certainly will find stuff that fulfills this criteria).

Now: Happy Browsing!

Two Directory Source Control is a work flow where you utilize one directory from source control, one directory that you work out of, and you then shuttle between them at your convenience. In this article, I’ll describe how traditional work flows work, the problems with them, and how you can use the Two Directory option to overcome them. This article assumes you know what source control is, what a merging tool is, and the value they bring to your work flow.

Traditional Source Control Work Flows

Many tools such as Flex Builder , Flash , and Visual Studio have plug ins that allow integration with source control such as Subversion , CVS , Perforce , and Visual Source Safe . This allows you to check out code & assets, edit them, and check your changes back into source control directly from your IDE of choice. Tools such as Subclipse , a plug in for Eclipse , allow you to check out & check in code from an SVN repo directly into your project. It also has nice built-in "diffing", the ability to show 2 pieces of code side by side to allow you to see what’s changed, and merge them if you so desire.

The reality, however, is that these work flows aren’t as easy as the marketing makes it sound. The main flaw they all have is conflict resolution.

Conflict Resolution

Conflicts are when the code you have on your machine is different from what is in source control. Whether this is because the file in source control is newer, someone has the file checked out already in Visual Source Safe, or a folder/package structure has been re-arranged making your structure out of sync. My main gripe with the tools I’ve used is that they do not do an adequate job of making conflict resolution easy. I define easy as simple to understand what the conflict is, how to resolve it, and not interrupting your current work forcing you to immediately deal with the conflict. To expound on that last part, I agree that you must deal with conflicts when checking in code, but a conflict should not immediately break your current build until you resolve a conflict. Nor should it prevent you from working.

There are 2 scenarios where this irritation is shown. The first example is where you check out the latest code from SVN for your project. You then make your Flex Project in that directory. Assuming you’ve figured out how to prevent Tortoise SVN from copying .svn folders into your bin directories, you download the latest, and get to work. How long you work, however, is based on how often your team checks in code. Even if you are working on different portions of the code, if someone checks in code that relates to yours, you’ll have to deal with the conflict. Typically, you’ll do an update first, and once you’ve ensure none of the code you are committing needs to be merged via resolved conflicts, you commit your changes.

As your team size grows, however, many people will be checking in code. Since dealing with conflicts isn’t fun, sometimes teams will check in more often. This results in a behavior re-enforcement for others to check in sooner as well. While I’m a firm believer in having something compiling sooner than later is a great Agile practice to follow to reduce risk, it’s hard to really make head way on some of your code if your focused on getting code compiling quicker so you can check in vs. making progress on your code.

It may seem subtle, but it’s a major attitude adjustment that I perceive as harmful for developers to have. They should enjoy coding their masterpieces, and assuming they are communicating with others and/or their team lead, they should be focusing. A developers focus is a very important commodity that shouldn’t be taken lightly. Instead of coding by positive reinforcement, "I can’t wait to check this in for others to see!", they are instead coding by negative reinforcement, "I need to hurry up and check in what I have working so I don’t have to deal with a confusing merge operationthat’ll slow me and my team down".

Eclipse combined with Subclipse has some good merging and history management tools. Eclipse has it’s own local history where it stores multiple versions of your files. You can choose to revert if you need to and it’ll provide a diffing tool right there for you. My first problem is the diffing tool sucks. Subclipse is not much better. I last used it in February of 2007; if it has improved since then, let me know. This wouldn’t be a big deal, except when it’s 5:59 pm on a Friday evening, and you really really want to go home. Unless you resolve the conflict, your build will be broken, and you cannot commit till you do so. Suddenly, a good diff tool becomes very important. It’s really frustrating for a developer, and removes motivation to work later. To compound it, most developers I know refuse to leave until their code is compiling. Suddenly an update interferes with this.

The second scenario which is worse than the above is package re-factoring. This is when you change the directory of a file, or a whole folder structure. If it is minute enough, you can usually get by if its not a directory you were working in. If, however, it is AND files have change, this can be a really long and frustrating process… all the while your code no longer works. You cannot compile JUST because you wanted to do the right thing and check your code in. This is also where you can truly tell if a diffing tool is good or not; how it helps you resolve folder changes and their relations to files.

One solution to this is to check your code into a branch and merge in later when it is convenient for you.

The last problem with working directly from the repo is actually caused by a feature of a lot of source control applications. This is the ability to only check in a directory with files that you are working on. For example, if your team is using Cairngorm, and all you are doing isValueObject and Factory work, you can pretty much stay in those 2 directories, and not worry about someone stepping on your toes.

…it is a false sense of security, however. The cardinal rule for source control is only check in code that compiles. This doesn’t mean that it compiles in your machine. What this means is if you were to check out the entire build from source control, could you get to compile? By updating just your area of interest from source control, and then committing your changes successfully in that area, in this case "vo" and "factories" packages, does not mean you have followed this rule. If another developer working on the Cairngorm "delegates" was using your Factories, her/his code would break even though you successfully checked code in. In effect, you broke the build. At one of my older jobs, whoever broke the build had to change their IM icon to a monkey. It sounds trivial, but it really sucked when people asked you why your IM icon was a monkey…

To prevent this, you need to update the entire repo. For some repo’s, this is not easy to do. Then one I’m working with currently is at least over 12 gigs, with hundreds of thousands of files, both ASCII and binary. That means that if at least 12 developers are working on it at the same time, chances are high a lot of files will be added and changed. Regardless, you only take the hit in the beginning, if you update frequently, and have a good diff tool, this increases your ability to ensure your code won’t break the build when you check in. Enterprise tools installed on the source control server itself like Cruise Control can actually automate this process, and send emails with information on who checked in code, if it compiled or not, and what was changed. To be fair, this isn’t a problem with a lot of independent server-side code.

Another minor point is how some source control systems work with locking files. Some allow developers to check out code and "lock" it. This prevents others from checking it in. Some make it impossible to work with because the code then becomes read-only. Since having another directory under your control, away from the source folder, you won’t have this problem.

To summarize, there are a lot of problems, even with built-in IDE tools, to working directly in the repo:

  1. conflict resolution prevents you from compiling. Manager says, "Can I see the latest?" Dev replies, "No… I’m merging code."
  2. folder change conflict resolution. "Can you re-factor later?"
  3. pain avoidance code committing. "I’d better hurry up and check in what I have working so I don’t have to merge… to heck with focusing".
  4. not checking out the entire repo, committing code, and breaking the build. "Works on my box…"

Two Directory Source Control Work Flow

To reiterate, Two Directory Source Control is a work flow where you utilize one directory from source control, one directory that you work out of, and you then shuttle & merge between them at your convenience. I’ve been using this work flow for about 2 1/2 years now and everyone I encounter usually finds it extremely odd I don’t work directly in the repo, hence the need for this blog entry. I was taught this work flow by Thomas Burleson, one of people responsible for the Universal Mind Cairngorm Extensions . Beyond the above, his additional justification at the time was that with Flex 1.5, SVN and Tomcat or JRun would do weird things together every so often, resulting in strange compilation bugs. Before Flex 2, you had to compile on the server (it was the law), so you’d setup a local web server on your box, and refresh a web browser page to see your app.

This work flow solves the problems above.

The first thing is conflict resolution is now done at your convenience. This is a big deal. Suddenly getting the latest from the repo is not a grand affair. You can just get the latest, and go back to work. You can also see what has changed without having to immediately integrate it into your code base if you’re not ready to do so. You can also keep working; since the code you updated is in a totally different directory, the code you’re working on isn’t affected. About to catch a plane an losing wireless? Just update, and you can still focus on coding instead of resolving your changes with someone else when you are incapable of giving them a phone call to discuss. Finally, you can confidence that when you update, your code will still work. That’s a good feeling.

Secondly, file conflict resolution is challenging, yet fun. Folder conflict resolution, however, is very challenging, and requires a lot of meticulous concentration. Deleting directories can delete a lot of files and folders within them, and thus tick a lot of other developers off if you screw up and check in your screw up. So you have to be careful. Rather than updating some massive package re-factoring and preparing for a battle with Subclipse, you can instead just let Tortoise SVN do it’s job; you just right click and update; done. When you’re ready, and you know your version of code works, you can then merge the 2 pieces using Beyond Compare, or whatever Merging tool you use. It’s a lot easier to do this when you have 2 real, physical folder directories vs. a virtual one.

Third, this convenience extends to code committing. Rather than being motivated to commit code out of fear of merging, you can do so when you’re good and ready. Even if you wait 3 days, you know you’ll have plenty of time to merge the changes into your code, get it working, THEN check in inside a safe, non-repo area. This confidence in your ability to merge with the assurance you have a nice sequestered area away from your repo motivates you to focus on creating good code vs. creating compiling code for the mere sake of making merging easier.

Fourth, because this work flow forces you to continually get the latest code form the entire repo, you always have the latest build, not just a portion of the build. This ensures that when you check in code, you know it won’t break the build because you already have the entire build and have tested it on your local box. Typically anything wrong from there is a configuration issue, not a code out of sync issue.

You need 2 things to utilize this work flow. The first is your folder structure and the second is a good merge / diffing tool.

Folder Structure

When setting up a project, you create your project folder. Inside of that, you make 2 directories called "dev" and "local". The "dev" folder is where your repo goes. This can be an SVN/CVS repo, or a Perforce work space. In the case of Subversion, I’ll usually have Tortoise check out trunk, tags, and branch here.

To say it another way, "dev" is where your source control code goes. The "local" folder is where your copy goes. You play and work inside of local. When you are ready to merge in changes, you use a merge tool to do so.

dev and local folders

Setting Up Beyond Compare

For the merge tool, I use Beyond Compare . While it’s only for PC, I purchased CrossOver , a Windows emulation tool for Mac, just so I could retain the same work flow on both my PC and Mac.

BeyondCompare has a few setup steps that you only have to do once. These are:

  1. Change default keyboard short cuts.
  2. Creating a new "session" to have your repo on the left, local code on the right.
  3. Showing only mismatches.
  4. Making your session expand folders & expand only folders with differences.
  5. Setting up BeyondCompare to filter (aka not show) certain files and folders
  6. Adjusting the file comparison control to be Size & CRC based
  7. Full Refresh!
  8. Synchronize to Right.

Let’s go over these steps in detail.

1. Change Default Keyboard Shortcuts

When you get the latest code, you’ll want to shuttle over to your local repository when you’re ready. If it’s new or unchanged files, you’ll want to do this quickly. I find Control + Right Arrow and Control + Left Arrow for putting local code todev is the best shortcuts for this.

Go to Tools > Options, and select "Keyboard" from the bottom left. Scroll down till you see "Copy to Right". Click it and press Control + Right Arrow key. Click "Copy to Left" and press Control + Left Arrow key.

BeyondCompare keyboard shortcuts

2. Creating a new "session" to have your repo on the left, local code on the right.

The easiest way to create a new session in BeyondCompare is to go "Session > New Empty". A session in BC is your saved settings with a name. A session will store what directory you are viewing on the left, what directory you are comparing to on the right, and other comparison options. You typically create 1 session per project. I typically put the dev, your source code repository on the left, and local, your copy, on the right.

Dev on the left, Local on the right

3. Showing only Mismatches

Click the "Only Mismatches" button. This will filter the files to only show files and folders that aren’t the same. Blue ones will be files that do not exist on the other side. Red indicates files that are different and gray indicates a filethat’s older than the file on the other side.

Show only mismatches

4. Making your session expand folders & expand only folders with differences

You want to have the views automatically expand folders if they are different. To do this, you need to check some check boxes in 2 places. The first place is in the Session settings under "Session > Session Manager". For your session, you’ll see a section called "Folder Handling". Check all 3 check boxes.

The second place is in "Session > Comparison Control". You’ll see the same 3 check boxes at the bottom of the dialogue; click all 3.

Expand folders automatically and only with differences

You’ll have to do this again in another dialogue; see step #6.

5. Setting up Beyond Compare to filter (aka not show) certain files and folders

There are some files you don’t care about. For Subversion, for example, these are ".svn". For Flex Builder, this includes .actionScriptProperties, .settings, etc. For Mac users who show all files, this is .DS_Store. You can filter these files out by clicking the glasses icon, and typing in the files and folders you want to filter out, 1 per line, and clicking OK.

While this will filter out files in the view, it WILL copy them if you shuttle folders back and forth. I never copy folders across inBeyond Compare , only files. The exception to this rule is if you do an "Actions > Synchronize Folders". This will obey your filter settings. If weird things start happening in your code, make sure you didn’t accidentally copy a folder with a bunch of .svn folders and files in it.

6. Adjusting the file comparison control to be Size & CRC based

To ensure you get a decent difference between files, choose both size & crc checking for file comparisons. You can choose this radio button in "Session > Comparison Control". See above picture.

modify file comparison and re-do folder expansion

7. Do a full refresh!

This will compare your entire folder & file structure. You can do so via "View > Full Refresh".

8. Synchronize to Right

If this is your first time shuttling files from your dev folder to your local folder, you can go "Actions > Synchronize Folders > Synchronize to Right".

Conclusions

That’s it, you’re ready to go! Get latest revision, do a full refresh, merge, code. Later, you can get latest revision, merge your code left, and check-in with confidence! In the end, Two Directory Source Control allows you to still compile your code when checking out the latest revision, makes it easier to resolve largere-factoring efforts, allows code committing to be a pleasurable endeavor, and ensuring you always check out the whole repo so you can confirm it builds on your machine with your latest changes. I hope it helps you out too.

Let me digress here a minute and point out how disappointed I am in the Mac platforms support of development tools. Tortoise SVN and Beyond Compare are fantastic tools for the PC. I have not found the equivalent for Mac. SvnX and the Tortoise equivalent for Mac really really suck, especially when you grew up in Tortoise SVN. Same thing on the Merge front; I have yet to find a good GUI based Merge tool for Mac. I’ll probably install Parallels on my new Mac, and stick to the PC version of Tortoise SVN & Beyond Compare since I still can’t shake Flash Develop .

0
Your rating: None

AJAX Libraries API

I just got to announce the Google AJAX Libraries API which exists to make Ajax applications that use popular frameworks such as Prototype, Script.aculo.us, jQuery, Dojo, and MooTools faster and easier for developers.

Whenever I wrote an application that uses one of these frameworks, I would picture a user accessing my application, having 33 copies of prototype.js, and yet downloading yet another one from my site. It would make me squirm. What a waste!

At the same time, I was reading research from Steve Souders and others in the performance space that showed just how badly we are doing at providing these libraries. As developers we should setup the caching correctly so we only send that file down when absolutely necessary. We should also gzip the files to browsers that accept them. Oh, and we should probably use a minified version to get that little bit more out of the system. We should also follow the practice of versioning the files nicely. Instead, we find a lot of jquery.js files with no version, that often have little tweaks added to the end of the fils, and caching is not setup well at all so the file keeps getting sent down for no reason.

When I joined Google I realised that we could help out here. What if we hosted these files? Everyone would see some instant benefits:

  • Caching can be done correctly, and once, by us... and developers have to do nothing
  • Gzip works
  • We can serve minified versions
  • The files are hosted by Google which has a distributed CDN at various points around the world, so the files are "close" to the user
  • The servers are fast
  • By using the same URLs, if a critical mass of applications use the Google infrastructure, when someone comes to your application the file may already be loaded!
  • A subtle performance (and security) issue revolves around the headers that you send up and down. Since you are using a special domain (NOTE: not google.com!), no cookies or other verbose headers will be sent up, saving precious bytes.

This is why we have released the AJAX Libraries API. We sat down with a few of the popular open source frameworks and they were all excited about the idea, so we got to work with them, and now you have access to their great work from our servers.

Details of what we are launching

You can access the libraries in two ways, and either way we take the pain out of hosting the libraries, correctly setting cache headers, staying up to date with the most recent bug fixes, etc.

The first way to access the scripts is simply be using a standard <script src=".."> tag that points to the correct place.

For example, to load Prototype version 1.6.0.2 you would place the following in your HTML:

PLAIN TEXT
HTML:

  1.  
  2. <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
  3.  

The second way to access the scripts is via the Google AJAX API Loader's google.load() method.

Here is an example using that technique to load and use jQuery for a simple search mashup:

PLAIN TEXT
HTML:

  1.  
  2. <script src="http://www.google.com/jsapi"></script>
  3. <script>
  4.   // Load jQuery
  5.   google.load("jquery", "1");
  6.  
  7.   // on page load complete, fire off a jQuery json-p query
  8.   // against Google web search
  9.   google.setOnLoadCallback(function() {
  10.     $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?q=google&;v=1.0&;callback=?",
  11.  
  12.       // on search completion, process the results
  13.       function (data) {
  14.         if (data.responseDate.results &&
  15.             data.responseDate.results.length>0) {
  16.           renderResults(data.responseDate.results);
  17.         }
  18.       });
  19.     });
  20. </script>
  21.  

You will notice that the version used was just "1". This is a smart versioning feature that allows your application to specify a desired version with as much precision as it needs. By dropping version fields, you end up wild carding a field. For instance, consider a set of versions: 1.9.1, 1.8.4, 1.8.2.

Specifying a version of "1.8.2" will select the obvious version. This is because a fully specified version was used. Specifying a version of "1.8" would select version 1.8.4 since this is the highest versioned release in the 1.8 branch. For much the same reason, a request for "1" will end up loading version 1.9.1.

Note, these versioning semantics work the same way when using google.load and when using direct script urls.

By default, the JavaScript that gets sent back by the loader will be minified, if there is a version supported. Thus, for the example above we would return the minified version of jQuery. If you specifically want the raw JavaScript itself, you can add the "uncompressed" parameter like so:

PLAIN TEXT
JAVASCRIPT:

  1.  
  2. google.load("jquery", "1.2", {uncompressed:true});
  3.  

Today we are starting with the current versions of the library, but moving forward we will be archiving all versions from now onwards so you can be sure they are available.

For a full listing of the currently supported libraries, see the documentation.

Here I am, talking about what we are doing in two short slides:

The Future

This is just the beginning. We obviously want to add more libraries as you find them useful. Also, if you squint a little you can see how this can extend even further.

If we see good usage, we can work with browser vendors to automatically ship these libraries. Then, if they see the URLs that we use, they could auto load the libraries, even special JIT'd ones, from their local system. Thus, no network hit at all! Also, the browser could have the IP addresses for this service available, so they don't have the hit of a DNS lookup. Longer lived special browser caches for JavaScript libraries could also use these URLs.

The bottom line, and what I am really excited about, is what this could all mean for Web developers if this happens. We could be removed of the constant burden of having to re-download our standard libraries all the time. What other platform makes you do this?! Imagine if you had to download the JRE everytime you ran a Java app! If we can remove this burden, we can spend more time flushing out functionality that we need, and less time worrying about the actual download bits. I am all for lean, but there is more to life.

Acknowledgements

I want to acknowledge the other work that has been done here. Some libraries such as jQuery and Dean Edwards Base were already kind of doing this by hot linking to their Google Code project hosting repository. We thought this was great, but we wanted to make it more official, and open it up to libraries that don't use our project hosting facilities.

Also, AOL does a great job of hosting Dojo already. We recommend using them for your Dojo needs, but are proud to also offer the library. Choice is good. Finally, Yahoo! placed the YUI files on their own CDN for all to use.

0
Your rating: None

Tink posted a great library manager for using external assets in your flash projects. When you start getting deep in projects you end up either having to roll your own that might end up being project specific, or you can just grab this from Tink and it is nice and standardized now for you.

Here’s and example of our Library & LibraryManager classes that we use in some of our Flex and AS 3.0 projects to manage our external assets stored in SWF’s.

The classes enabled you to create multiple libraries of embedded (retaining and giving access to code) or loaded SWF’s.

You can create instance of Library wherever you want, but you can also create them through the LibraryManager giving you a single class to gain access to all your Library instances.

As you develop more and more flash/flex projects with AS3 these types of utilities come in handy. Another that comes to mind is Arthur Debert’s BulkLoader and polygonal labs Data Structures for Game Developers that are all great kits.

Add Tink’s Library and LibraryManager to your arsenal today! Thanks Tink.

0
Your rating: None

When it comes to icons, web designers and graphic artists have an excellent opportunity to showcase their craft, prove their experience and explore their creativity. A sweet, nice icon set is a perfect showcase of designer’s work and a powerful instrument to build up your reputation online. In fact, designers make use of it, creating absolutely amazing icon sets and offering them for free download.

However, designing a high-quality icon set isn’t an easy task. It takes time, patience and resources and it requires professional skills and experience. We are regularly looking for talented artists and creative designers and we are happy to support them as much as possible — e.g. by showcasing their work in our magazine. If you are going to create an icon set and experience any problems releasing it or spreading the word — let us know, we may figure something out.

In the overview below we present 40 excellent, free and professional icons for desktop and web design. Some of them can be used for both private and commercial projects. You may always use them for fre in your private projects. Nevertheless, it is always worth to take a look at the license agreements — they can change from time to time.

You can also scan through the icons-related articles we’ve published before:

This time you’ll find quite many tasty snacks. Literally.

Free Icons For Your Web Designs

Office Space Icon Set
This set contains a coffee icon, chair icon, employee icon, coffee machine icon, computer display icon and information kiosk icon. Each icon is available in size 16×16px, 32×32px, 48×48px and 256×256px. Licensed under a Creative Commons Attribution-No Derivative Works 3.0 Unported License. This means that if you use the icons on your web site, please place a link to www.visualpharm.com on the same pages the icons are used.

Freebies Icons - Office Space Icon Set

Light Icons Set
A set of 22 light, clean and stylish icons created by Krzystof Kolatorski from Poland.

Freebies Icons - Light Icons by ~sone-pl

Transport Icon Set
This set of ready-made icons represents 35 objects of various modern transport facilities such as Cars, Airplanes, Helicopters, Trucks, Public conveyances, Squad car, Fire-engine, Ambulance, Taxi, Ships, etc. Free for personal use. .png, .ico. 16×16, 24×24, 32×32, 48×48, 64×64, 128×128, 256×256.

Freebies Icons - Vista Style Transport Icon Set. Icons-Land (Vista Icons, Stock Icons, Custom Icon Design Service)

Freebies Icons - Vista Style Transport Icon Set. Icons-Land (Vista Icons, Stock Icons, Custom Icon Design Service)

Old School Icon Pack
Old School Icon Pack contains 82 high quality (256×256 pixels) icons; PNG and ICO formats. This package includes: Extra Icons, File Icons, Folder Icons, Hardware Icons, Software Icons etc. Free for personal use only.

 Free Vista Style Icons, Free Icon Sets and Windows Vista Desktop Icons

The Simpsons Icons
11 Simpsons icons for Mac OS X and Windows. Designed by Anton Gerasimenko and Egor Zhgun from Russia. The link for the windows-version seems to be broken. Size: 128×128px.

 The Simpsons Icons

 The Simpsons Icons

Rss icons campaign
A large set of creative RSS icons designed by Design Freak.

Freebies Icons - NewsFire by ~barrymieny

Freebies Icons - NewsFire by ~barrymieny

Freebies Icons - NewsFire by ~barrymieny

Freebies Icons - NewsFire by ~barrymieny

Ice Cream Icons
A set of 15 sweet, shiny and tasty ice and cake icons. Size: 128×128, formats: .ico and .png. Designed by dim.po.

Freebies Icons - 128x128 Icons Set 4 by ~dimpoart

Ruby on Rails icon pack
Contains 3 color variations of the Ruby on Rails folder icon in 5 different sizes. Also includes a squared version of Rails logo in 5 different sizes.

Freebies Icons - Ruby on Rails icon pack by ~azizash

Set of Stylized Icons
Designed by Lucas (aka pho3nix-bf) from Poland. The YouTube, Wikipedia and Facebook icon may be used in online-projects.

Freebies Icons - Set of Stylized Icons by ~pho3nix-bf

Sticker Pack
A pack of stick-on icons whicih contains 41 individual sticky icons with large resources for Vista & Leopard. Designed by David Lanham. iContainer, Mac, Win.

 Sticker Pack 2

 Sticker Pack 1

128×128: Toast It!
A toaster icon, 128×128px.

 Toast It!

Icon Goodies
7 free icon goodies created by created by Chris Ivarson. Mac only. For instace, the Blogs icon pack includes Blogger icon, Livejournal icon, Wordpress icon and Xanga icon. Free to use.

Freebies Icons - Goodies | csi.nfshost.com

Freebies Icons - Goodies | csi.nfshost.com

Smashing RSS/Feed Icons
A free Smashing RSS/Feed icon set. The set contains 8 icons which you can use for private and commercial projects, blogs and web-sites for free. The icons are available for both Mac and Win-users in resolutions 16×16px, 24×24px, 32×32px, 48×48px, 128×128px, 256×256px and 512×512px.

Freebies Icons - Fresh, Free and Gorgeous RSS/Feed Icons | Graphics | Smashing Magazine

Bright! icon set
Bright! is a crisp, sharp and beautiful set of 148 hand-crafted icons in vector format, ideally for both web and print work. You can use Bright! for personal and commercial projects at free of charge. Comments and backlinks are appreciated.

Freebies Icons - Bright! - a free icon set

Freaky Crema
Cake and ice cream icons designed by dim.po from Russia. Crema Badges are also available for free download.

Freebies Icons - Freaky Crema by ~dimpoart
 

Freebies Icons - Freaky Crema by ~dimpoart

Build Your Own Box Kit
“Build Your Own Box” kit allows you to take a layered, Photoshop PSD file and add your own items inside. Logos, icons, anything. Some free icons are included in the PSD file as well. A How-To-Video (Quicktime) explains how you can create your icons using the .psd-file.

Freebies Icons - Icon Lab - Build Your Own Box

Nicely Stuffed
Six Colors + Leopard Ready. Designed by Max Gilchuk from Canada.

Freebies Icons - Nicely Stuffed by =mgilchuk

Antares Icon Pack
Antares Complete Pack contains 100 high quality (256×256 pixels) icons; PNG and ICO formats. This package includes: Blue Ray Disk icon, CD Drive icon, iMac OSX icon, iMac icon, Finder icon, Mail icon, Safari icon, iTunes icon, Trash icon, Dashboard icon etc. File Types: .ico, .png. Icon Sizes: 256×256, 128×128, 16×16, 32×32, 48×48.

 100 Free Vista Style icons

Laurent Baumann | Icons
The Film Roll icon set contains 1 icon in sizes 16×16px, 32×32px, 48×48px, 128×128px, 256×256px and 512×512px. Formats: icns and .png. These icons are released under Creative Commons License. Designed by Laurent Baumann.

Freebies Icons - laurent baumann | icons

Freebies Icons - laurent baumann | icons

Freebies Icons - laurent baumann | icons

Pool Icons
Do you have snow in winter? We do. A lot of snow. But now spring has finally come and we can’t ignore it. We’ve been waiting for so long! So here is a free icon set about what we see in the streets in spring. You can download Win and Mac icons as well as PNG files.

 Free stuff

Coffee Break Icon Set
10 freeware icons inspired by some delicious coffee foods. Content: Apple, Breads, Cheese, Coffee cups, Coffee pot, Cookies, Toast. Designed by Dirceu Veiga.

Freebies Icons - COFFEE BREAK - icons inspired in some delicious coffee foods. | Fast Icon - Free stock icons.

OSE PNGs
Free for personal use, but can be modified and released afterwards. This set also includes PSDs.

Freebies Icons - OSE PNGs by =gakuseisean

Email Me Icon Set
11 icons, 128×128px, created for the Mozdev.org projects. Free for personal use only. Designed by Mario Martínez from Mayosoft.

Freebies Icons - email me by ~Mayosoft

I’m not a Patriot
Flags of 32 countries + 2 communities, resulting in 34 png-images of file size 256×256px.

Freebies Icons - I'm not a Patriot by ~Mayosoft

Social Web Buttons
Two “social” sets, each consisting of 20 images in .png-format. Released under Creative Commons license. The sets include buttons for Delicious, Digg, Facebook, Flickr, LastFM, Pownce and Slideshare.

Freebies Icons - Social Web Buttons - Set 1 - WebFruits Blog // web design, grafica, internet, blog...

Freebies Icons - Social Web Buttons - Set 2 - WebFruits Blog // web design, grafica, internet, blog...

Windows Outlook
1 png (256px). For private and noncommercial use only. By Vande Mataram.

Freebies Icons - Windows Outlook --akkasone by ~Vande-Mataram

Mobile Device Icons
60 mobile device icons in 128×128 and 60 mobile device icons in 256×256. In .PNG format for whatever you use them for. If you’re looking for blackberry icons, check here. Courtesy of ~pierocksmysocks from US.

Freebies Icons - Mobile Device Icons by ~pierocksmysocks

Choose your sport Icons
8 original icons about sport areas. Available for both Windows and Mac OS X. Size: 256×256px and 512×512px.

Freebies Icons - tpdkdesign.net -+ Choose your sport !

Sketchy Paper Icon Set
Icons are created with simple, sketchy lines on a unique background - a paper note. So, get creative when using the set, hope it brings a new, unique light on your projects. The set contains 20 high quality, free icons in these sizes: 16×16px, 32×32px, 48×48px, 64×64px and 128×128px and 32-bit transparency PNG file format. 20 icons in .ico, .png and .icns format. You can also purchase these icons — then you may use them without being obligated to put a back link.

Freebies Icons - DryIcons | Free Icons | Sketchy Paper Icon Set

Mini Icon Sets

Vaga
This set of 60, semi-transparent .png icons (16 x 16) ready to use and available for free download. Released by Ed Merritt.

Freebies Icons - Vaga | Ten by Twenty

Monofactor Icon Set
This icon set, created by Onur Oztaskiran, contains 25 scalable Illustrator format icons. You can open the .ai file with any version of Illustrator above 8.0. With earlier versions, you might loose some of the effects on the icons. You are completely free to edit, change and/or directly use the icons in your site and in any kind of your projects.

Freebies Icons - Monofactor.com - Design Graphics Blog - Onur Oztaskiran -+ Blog Archive -+ Free Vector Icon Set 1 - Containing 25 Icons

Web Development Icons
24×24 free icon set in web 2.0 style. These icons are free to use in any kind of project unlimited times. Released under Creative Commons license. Windows only.

Freebies Icons - Free web development icons #4 - Download Royalty Free Icons and Stock Images For Web & Graphics Design

Circular Icons
Circular is a free icon set containing 100+ free to use icons. It’s a themed collection of 100+ 16×16 icons designed by Ben Gillbanks. The icons are available as a zip download of alpha transparent png’s (link over there on the right), and cost a grand total of nothing!

Screenshot

0
Your rating: None

In Web typography doesn’t have to support the overall design. It can dominate. It can be loud. It can be bold. And it can be everywhere on a web-site. In many situations it’s reasonable to give the typography the prominent position it deserves, leaving visual cues in the background or removing them at all. Doing that, you have to risk large font sizes surrounded by a generous amount of white space. What comes out of it? Elegant web sites with a unique form, style and sense of precision.

Few months ago we have already presented some sites with quite BIG typography. In this article we present further 55 examples of big, “loud” and yet elegant typography in web design; some listed designs are Flash-based, and in some cases designs are based not only upon typography, but also upon some visual elements.

Please take a look at the following posts as well:

The Showcase Of BIG Typography

Designfabrika
Görsel Işler’s porotfolio with a vibrant typography from Turkey. The design looks attractive and appealing.

Screenshot

Defining the Designer of 2015
AIGA uses only typography in its design and uses it effectively. An intiative to define the professional characteristics of the designers of 2015 so that together we can prepare designers for the skills and roles that will be expected for them.

Screenshot

Azzabee.com.au
Azzabee uses big typography in a rotating Flash-based promo. The navigation menu is perfectly integrated in the promo using PNG transparency. Very elegant and effective design solution.

Screenshot

Natl.tv
National Television is a project which uses bold, loud and sexy typography within a Flash-based design. Very playful, impressive and interesting to explore. Some content of the site may be hard to read, though.

Screenshot

Fl-2
Apparently, Fl-2, a design agency from Denver, Colorado, has a clear focus on typography. Both blog (first image) and the web-site (second image) offer literally HUGE typography. In the second example typography is integrated in the portfolio showcasing selected work produced by the agency.

Screenshot

Screenshot

Neubau Berlin
Letters, letters, letters. NeuBau is a German type-foundry which is why typography is used everywhere on the site. The typeface used is NB-Grotesk. The design isn’t intuitive at all, but that’s all about typography, right?

Screenshot

Screenshot

JLern Design
JLern Design presents the typography from a quite unusual perspective. Nice, compact and typography-heavy design solution. Flash in use.

Screenshot

Are you a virgin?
AIGA’s another concept based only on typography. The current section of the site is presented with a bold and colorful typography.

Screenshot

Hungry Man
Hungry man seems to be hungry for job as well. A really distinctive design with a little bit retro-look.

Screenshot

256tm.com
256TM is a font foundry by Thomas Huot-Marchand. Below the splash-page is presented. The navigation menu is, of course, based upon pure typography, too.

Screenshot

Elmwood
Elmwood isn’t really humble and uses typography to emphasize exactly this. Effective use of typography for promotional purposes. After all, it’s all about impressing people, right?

Screenshot

Erratic Wisdom
Not only is the typography quite bold, it is yellow too! Designed by Tom Fadial.

Screenshot

Moony.cz
Lukas Strnadel from Czech Republic places a brief description of the site in the middle of the page. Vibrant colors in use.

Screenshot

Switch Mediaworks
Switch Mediaworks is a pretty lively web-site with a pretty lively typography.

Screenshot

Shut.elmota.com

Screenshot

Mike Precious

Screenshot

Newsmap
Newsmap displays current stories and their popularity in a news map. More important messages are displayed with bold typography.

Screenshot

Fixie

Screenshot

Sean Klassen
Sean Klassen loves Helvetica and wears pants. Both his splash-page and his blog are heavy on typography.

Screenshot

Screenshot

Postmachina.com
Postmachina uses typography to deliver the message…

Screenshot

Chris Garrett Media
…so does Chris Garrett. Color transition in use…

Screenshot

Francesco Mugnai
…and so does Francesco Mugnai.

Screenshot

Freshe.st
Bill Morrison has a small web-site, but uses large and bold typography.

Screenshot

Urban Phes

Screenshot

Ourtype.be
Ourtype is a Belgian type foundry which showcases its typefaces at large scale. When you scroll the page, type seems to be a little bit shaky.

Screenshot

Kokokaka
Kokokaka sounds pretty strange, but this is how a Swedish design agency is called. Their web-site uses capital caps and very colorful links.

Screenshot

Organic Grid
Michael McDonald with dynamic Flash-based typographic design.

Screenshot

Colorcubic.com
Sometimes one can experiment with geometric shapes as well. Colorcubic uses illustrations which look like typography, but are indeed not letters.

Screenshot

Pier Madonia
Pier Madonia showcases his work using a large typography-based navigation menu. That’s an unusual approach which isn’t intuitive but still simple to understand and to use. The sub-menu is pretty large, too. And, of course, uses only typography.

Screenshot

Alex Cohaniuc
Alex Cohaniuc uses typography for his categories…

Screenshot

Ogilvy Durham
…Ogilvy Durham for his logo…

Screenshot

I Love Typography
…John Boardley for the title of his site.

Screenshot

Brunet Garcia

Screenshot

Studio Number One

Screenshot

Virtual Memories Inc.
Apparently, the creators of this site really love typography. Because they have almost nothing else.

Screenshot

300million.com
On 300million letters fly, jump and float. Created with Flash.

Screenshot

Twistori.com
Twistori is an ongoing social experiment which analyzes messages sent to Twitter and presents them in a scrolling window. With large and vibrant typography.

Screenshot

Daniel Hagglund

Screenshot

Vision 7
On Vision 7 the typography is literally squeezed insind a tiny and short layout. The letters are nevertheless huge.

Screenshot

Wind Jammer
Not really beautiful, but big and large. This company from London seems to have its own style when it comes to choice of letters.

Screenshot

Mattia Viviani

Screenshot

Paco Raphael

Screenshot

ixwa.com
Sometimes typography can be large yet remain subtle and support the content of the site…

Screenshot

Visie.com.br

Screenshot

Futonmedia

Screenshot

Babasonicos.com
Babasonicos uses bold and pretty colorful typography in the navigation. This may not be the perfect solution from the usability-perspective, but the site perfectly achieves its primary goal, namely to appear lively and colorful — just the way the band is in its pretty strange videos.

Screenshot

Topos Graphics
Topos Graphics: a start page with “mirrored” typography.

Screenshot

Popart Blog
Typography for headlines gone bold. The headline literally stands out.

Screenshot

Nu Visual Language

Screenshot

Urbanchip

Screenshot

Mike Poss

Screenshot

Marie Julien

Screenshot

Berlin.unlike.net
Bold typography supports the design. It doesn’t stand out but it is visible.

Screenshot

0
Your rating: None

What turned out to be just something to finally scratch a strict typing itch i'd had with tweening has no become and full blown side project. Not only did Moses get me started, but Graeme Asher and John Lindquist fueled the fire as well. Graeme's been working on Tween3DCamera and John's been helping me add some other properties like scale/scaleX/scaleY/scaleZ to the property types as well as a small refactor.

If you've tried Go3D lately, you'll notice that I had put static property methods (yeah kinda weird name, but that's what they do ) in Go3D.as, but have now moved them to Value.as in the properties directory. It seemed to make alot more sense with what their function was, and Go3D.as has been deleted for now since it serves no purpose.

check out the project here:
http://code.google.com/p/goplayground/wiki/JohnGrden

svn:
http://goplayground.googlecode.com/svn/trunk/JohnGrden/GO3D

One thing I added just today was the ability to pass a tweenTarget for a 3D object. If you look at the code samples below, you can now just pass a target and it's position and rotation will be used to tween to. You can also use constants to just tween to position or just rotation. You can also pass custom properties for it to use with the target. The swf demo I've posted in the playground basically tells the Cylinder object to use the properties of the orange sphere.

PLAIN TEXT
Actionscript:

  1. protected function tweenAll(e:Event=null):void
  2. {
  3.     resettargetObject();
  4.     tween = new Tween3D(targetObject, [Value.tweenTarget(middleObject)], duration, Easing.easeOutElastic);
  5.     tween.start();
  6. }
  7.  
  8. protected function tweenXYZ(e:Event=null):void
  9. {
  10.     resettargetObject();
  11.     tween = new Tween3D(targetObject, [Value.tweenTarget(middleObject, Value.XYZ)], duration, Easing.easeOutElastic);
  12.     tween.start();
  13. }
  14.        
  15. protected function tweenCustom(e:Event=null):void
  16. {
  17.     resettargetObject();
  18.     tween = new Tween3D(targetObject, [Value.tweenTarget(middleObject, [Value.X, Value.Y])], duration, Easing.easeOutElastic);
  19.     tween.start();
  20. }
  21.  
  22. protected function tweenRandom(e:Event=null):void
  23. {
  24.     tween = new Tween3D(targetObject, [Value.x(getRandom()), Value.y(getRandom()*.5), Value.z(getRandom())], duration, Easing.easeOutElastic);
  25.     tween.start();
  26. }

Value.tweenTarget() returns an array of Go3DProperty objects that Tween3D expects to get to do the tween. It's basically a convenient, yet strictly typed way of doing things. I'd say we're having as much fun as untyped objects at this point - Even more probably ;)

Note:
I'll be teaching on Go3D at the Toronto class in 2 weeks, and if you haven't signed up yet, I seriously suggest getting out there asap - seats are filling up

Now, the reason I say we need base 3D classes for all 3D engines to use is because in a situation where I want to open this up for Sandy3D or Away3D or any other 3D engine that uses x/y/z/rotationX/Y/Z/scaleX/Y/Z, I'd have to write specific classes tailored to their api and object types.

We need to have one set of common 3D classes that define the atom level of a 3D object with the main 10 properties:

x, y, z, rotationX/Y/Z, scale, scaleX/Y/Z

So, I'm going to be starting such an effort and see how that pans out ;) It makes too much sense especially when you consider any project that has to work with a 3D engine, but isn't integrated with the code base. ASCollada being one, and Go3D being another.

I'd love to hear people's thoughts on this matter.

0
Your rating: None

Sometimes typography is all you need to communicate your ideas effectively. Graphics can support the type or type can support the graphics, but to deliver the message precisely, you need to make sure your type is expressive enough, your design is distinctive enough and the composition is strong enough. The results are sometimes crazy, sometimes artsy, sometimes beautiful, but often just different from things we’re used to. Thus designers explore new horizons and we explore new viewing perspectives which is what inspiration is all about.

This post showcases over 70 examples of sexy, bold and experimental typography. Some examples are typographic posters, some are typographic illustrations and some are just sketches with type. In any case, you will hopefully find some inspiration for your future works.

Feel free to check out our previous typography-related posts:

  • Breathtaking Typographic Posters with over 50 typographic posters designed by artists across the globe. We feature Oriental, Iranian, Hebrew, Japanese, Chinese and Russian typographic posters as well as a number of further references,
  • Typography In Motion presents some excellent examples of typography embedded into movies and videos,
  • The Showcase of BIG Typography with over 35 examples of big, “loud” and yet elegant typography in web design.

So what can be achieved out of simple letters and symbols? Please be patient, some screenshots are huge.

Sweet and Cute Type

Sweet Sixteen
Typography with a sweet taste of sugar. A nice composition, an excellent execution. Sometimes not that much is needed to make the type look tasty. The typeface used below is Cutiful.

Beauty of Typography - This Day in Type — Participate! - am besten bewertet/Horton -- July 16, 2007 -- Cutiful

Dive Deep
Hand lettering by Ray Fenwick, cutting out by Dan Mogford.

Beauty of Typography - DIVE DEEP

Scarlett
An illustration created by Nik Ainley. Notice how well every single letter (e.g. “l” and “s”) fits in the composition.

Beauty of Typography - Shinybinary v2.1 - Art and designs of Nik Ainley

Newstand Cover for Computer Arts issue 139
Alejandro Paul’s Affair typography from Argentina: typography dominates in the composition, the swirly headline is just breathtaking.

Beauty of Typography - Newstand Cover for Computer Arts issue 139

17.06.2007
Created by Michael van Laar using Freebooter Script.

Beauty of Typography - This Day in Type — Participate! - am besten bewertet/Michael van Laar — June 17, 2007 — Freebooter Script

Aphrodisiac Dessert
Dessert type for a dessert announcement.

Beauty of Typography - FFFFOUND!

FitzGerald Album (Extended Play)
Nothing can beat old-style-typography. Nothing.

Beauty of Typography - FitzGerald Album (Extended Play)

Rally
Apparently, typography can be used for a number of purposes. Typographical Motorsports: simple yet interesting.

Beauty of Typography - Rally

Tina Colada
It is worth a discussion if “overlettering” actually helps to deliver a message, but the type looks nicely. And the choice of colors is impressive.

Beauty of Typography -

More ink is coming
Impressive lettering by Ale Paul.

Beauty of Typography - more ink is coming.jpg

cim_organic
Sunny, flourish motif for a fresh typographic composition. Designed by Ryan Katrina.

Beauty of Typography - cim_organic

Empire
The attention to detail is remarkable. Designed by Theo Aartsma.

Beauty of Typography - Empire

Eichholtz

Beauty of Typography - Eichholtz

Arabic Typography

Beauty of Typography - 4039-555-638

Elegant and Sexy Type

Climate Change ‘Co2′ ideas
Simple idea which uses only the power of typography. Impressive posters do not need to be colorful.

Beauty of Typography - Climate Change 'Co2' ideas

Αnapodi Klosti Poster
Poster for a experimental performance installation. The main lettering is based on PF Beau Sans. Unusual: thin font transform into a thin thread.

Beauty of Typography - Αnapodi Klosti Poster

qp logo
In this logo “q” and “p” belong together. Nice concept, nice colors.

Beauty of Typography - qp logo

Tony Rohr
Similar idea as in the previous one, but a different execution.

Beauty of Typography - FFFFOUND!

JG3!
Slick and sexy, colorful and strong. Notice how beautifully both letters intersect in the middle of the image.

Beauty of Typography - JG3!

CMYK Lovers
Well, that’s A LOT of letters. Vibrant colors meet 3D-typography. Available as a desktop wallpaper. Designed by Guilherme Marconi.

Beauty of Typography - Wallpaper of the Week #1 | Abduzeedo - graphic design | design inspiration | design tutorials

Poster in the city of Amsterdam
Dutch graphic design at its best. Interesting typographic construction which captures attention by its structure and attracts by its vibrant colors.

Beauty of Typography - poster in the city of Amsterdam

Requiem
Strong, dirty and grungy typography is also possible. Craig Shields manages to get impressive results combining grunge and type.

Beauty of Typography - Requiem

BBB
Designed by Stefan Lucut. The loog looks very modern and powerful, however, at the first glance it is not clear what the red thread stands for. Nevertheless, very original composition.

Beauty of Typography - BBB

Strong and Bold Type

Typography
Nicolas Alexander combines typography and retro. Notice how elegant the line starting in the letter “G” goes through “R”.

Beauty of Typography - Typography

2008 Calendar
Expressing feelings via colors and type. A very clean and beautiful design by Jonathan Davies.

Beauty of Typography - FFFFOUND!

Bckyrdflw Promo
Well, this one is hard to overlook. Andrew Dyjak’s poster can be read without vocals vowels. Lovely colors, cropping and, of course, type.

Beauty of Typography - Bckyrdflw Promo

Statistics Table
Strong, bold and extremely expressive. And it is just a table!

Beauty of Typography - FFFFOUND!

The Well of the Saints A1 poster
A1 Graphic poster produced by John McDermott. Simple, strong and sexy. Sometimes two colors and a bold typeface are enough.

Beauty of Typography - The Well of the Saints A1 poster

Breaks logo
A distinctive treatmeant of letters which perfectly fits to the message a poster wants to convey. Designed by Zoltan Szalay.

Beauty of Typography - Breaks logo

Nik Ainley
Nik Ainley strikes again. Lovely typographic work where letters don’t just convey the message, but are also functional: their form suggests the second message which is transported with the artwork.

Beauty of Typography - Shiny Binary

Benno Wissing
Dutch Typography by Benno Wissing. It looks very modern, but it was created in 1963.

Beauty of Typography - Benno Wissing

Film Poster
Colorful and distinctive. Each color stands for a different movie which participated in the festival.

Beauty of Typography - FFFFOUND!

Experiments with type

A2

Beauty of Typography - A2

Crumpler - ABC

Beauty of Typography - Crumpler - ABC

American Graphic Design

Beauty of Typography - American Graphic Design

The Make Lounge

Beauty of Typography - The Make Lounge

Moctezuma: James Brown

 James Brown

Dog Type
Sometimes typography is used to deliver a message in a quite, well, unusual way.

Beauty of Typography - FFFFOUND!

Lead Us Not Into The Future

Beauty of Typography - Lead Us Not Into The Future

»R« letter sketches

Beauty of Typography -

Blik x Drez

Beauty of Typography - Blik x Drez

A Stitch Up - Corktown Tavern - Base

Beauty of Typography - A Stitch Up - Corktown Tavern - Base

Cubix Rube

Beauty of Typography - Cubix Rube

supervision

Beauty of Typography - supervision

Palawa Poster

Beauty of Typography - Palawa Poster

seis [cartel]

Beauty of Typography - seis [cartel]

Wishes
Unusual type treatment which makes the wishes quite distinctive from the “usual” crowd.

Beauty of Typography - FFFFOUND!

Rasterfeld Event Poster

Beauty of Typography - Rasterfeld Event Poster

Personal Geocode

Beauty of Typography - Personal Geocode

Cubix Rube Soft

Beauty of Typography - Cubix Rube Soft

font_code

Beauty of Typography - font_code

Experimenting with s

Beauty of Typography - s

accept | adapt | evolve

Beauty of Typography - accept | adapt | evolve

fac04_flyer_a

Beauty of Typography - fac04_flyer_a

Doblette - Taller Tipografia (uy)

Beauty of Typography - Doblette - Taller Tipografia (uy)

Bold type
These letters are really hard to read. Is it the purpose of typography? Well, it’s definitely an experiment. Cute, fat and bold type in use.

Beauty of Typography -

Extraverage x The KDU
Pattern is used to create letters.

Beauty of Typography - Extraverage x The KDU

Visual Lexicon v 2.1 Metamorphosis

Beauty of Typography - Visual Lexicon v 2.1 Metamorphosis

Type Area

Beauty of Typography - Type Area

Wim Crouwel: New Alphabet book

Beauty of Typography - Wim Crouwel – New Alphabet book

Nederlandse Postzegels 1971

Beauty of Typography - Nederlandse Postzegels 1971

Askul

 Askul

Experimental Jetset: SMCS Invitations

 SMCS Invitations

Triple O’s
Sometimes type doesn’t look like type at all.

Beauty of Typography - FFFFOUND!

TypeNeu

Beauty of Typography - FFFFOUND!

88. Geometric Type
This type is quite freaky. Dutch Graphic Design.

Beauty of Typography - FFFFOUND!

89. YOLO
A (really) striking poster designed by Martin Fewell from Manchester, UK.

Beauty of Typography - FFFFOUND!

100. Best time of my life
Disturbing yet powerful. This poster delivers the message effectively.

Beauty of Typography - FFFFOUND!

Recycle
Usually typography is used as a foundation for symbols. In this artwork it is the other way around. The yellow circle in the middle of the composition may be too striking, but it may be the designer’s intention. Designed by Satoboy.

Beauty of Typography - RECYCLE

Chaumont, festival international de l’affiche, version longue - Etienne Mineur archives

Beauty of Typography - Chaumont, festival international de l'affiche, version longue - Etienne Mineur archives

Last Click

Colours Clock
Designed with the sole intention of not over complicating the design. Designed by Richard Shed.

Beauty of Typography - Reloj Richard Shed

Holding type
These flocked magnets looks pretty sweet.

Beauty of Typography - M

Spaghetti Dinner Poster
Beautiful integration of type into a photo.

Beauty of Typography - Spaghetti Dinner Poster

Matias Ignacio en crema
Ok, now it’s time for a coffee break.

Beauty of Typography - Matias Ignacio en crema

0
Your rating: None

Getting creative is part of our job. Whatever project we are working on, at some point we need to come up with some nice starting point — some fresh idea which we could explore further, build upon and refine until we have a polished, perfect result. Although having an idea is at least as important as implementing it properly, without inspiration and innovation you just can’t get anything done.

And this is where it sometimes gets messy. In fact, drawing inspiration is not as easy as we used to think of it. Inspiration is not just observing something, analyze it and implement it in one or another way in your work. Inspiration is much more: there is a fine line between inspiration and imitation which is easy to cross and as easy to mix up.

Inspiration means captivate an idea and develop it further. Imitation means identify an idea and use it. As a professional when getting creative, you need to make sure that you pick the right path to follow.

Ideas and Inspiration
Noell Hyman draws inspiration from magazines; stick-it-notes contain some ideas she might want to work upon later.

So how do you actually come up with new ideas (apart from reading Smashing Magazine, of course)? Where do you draw inspiration from? Do you have some bulletproof approaches against creativity blocks?

We would like to hear your opinion. Let us know in the comments!

Where do you draw inspiration from?
( polls)

0
Your rating: None

I’ve been playing with openFrameworks (currently in prerelease) for the past couple of days for a project I currently doing. I have to say that it is extremely powerful and a great introduction to C++ programming. “OpenFrameWorks, is a new open source, cross platform, c++ library, which was designed by Zachary Lieberman (US) and Theo Watson (UK) to make programming in c++ for students accessible and easy. In it, the developers wrap several different libraries like opengl for graphics, quicktime for movie playing and capturing, and free type for font rendering, into a convenient package in order to create a simple, intuitive framework for creating projects using c++. It is designed to work in freely available compilers, and will run under any of the current operating systems” Coming from a processing.org background which has satisfied all my needs till now, I really got interested in openFrameworks because of my increasing use of computer vision. While I never had the confidence to use C++ from scratch, to build computer vision software, openFrameworks offers a lot of the building blocks to let you go straight to the design phase. Check out the video above to find out more about the scope of openFrameworks and join the mailing list.

0
Your rating: None
Syndicate content