ECTOMACHINE

15 Amazingly Gorgeous Free Fonts

Jonden Jackson — Thu, 05 Nov 2009 18:31:22 +0000

If you are anything like us you love and understand the importance type plays in the world of design. In fact some would argue at times it is the most crucial element, and they are right. Well we thought we would focus on some killer fonts that can give your designs a little more pop and spice! Oh yea, did we mention they are free?! You will want to get your hands on all of these fonts. So go ahead! Download them all, we already have!

Download Font

Download Font

25 Amazing Inspirational Poster Designs

Jonden Jackson — Tue, 25 Aug 2009 19:27:41 +0000

Here at ECTOMACHINE we are huge fans of poster art. Ranging from Vector Based, Photo Based, Typography Based and just about anything and everything in between. As long as it looks good and has a clear and concise message, and sometimes even NOT!

Poster design and illustration may be one of the largest open arenas for creativity when it comes to design in general. Go ahead, look through some random poster designs out there and you will run into a plethora of awe inspiring designs and creations. This is just a small list of 25 inspirational poster designs that we have run across in the past couple of months and they deserve to be admired! So go on, take a look!

8 useful css tips and tricks

Jonden Jackson — Sun, 02 Aug 2009 19:36:06 +0000

We love uncovering secrets about web development. Sometimes it can be easy as 1-2-3 and sometimes…well..sometimes it can be a little more demanding to say the least. However, what we really love is uncovering new secrets about web development that are a breeze to execute. So with that being said we have created a little list or useful CSS tutorials and resources to share with you composed of some new ( and older ) tips and tricks that you may not be aware of.

So enough rambling, here is the list. Also let us know in our comments area if you use any of these techniques in your website or blog. We always like to see new and unusual development techniques.

Web Source:
Steve Mullen Creative

Ever notice when clicking around on a website you click your desired link and out of nowhere there is an unattractive border that surrounds the link? Yea, there is a really easy way to get rid of that with a little CSS and Javascript. Visit our good friend Steve Mullen’s blog on this quick fix.

Web Source:
Grind Pattern

This little tip came from our friend Scott Craig with Grind Pattern. Some of you may know solutions that are similar to this but we have found this one particularly very useful. Add a title to any background you choose simply by using the h1 tag and the em tag.

In order to do this, add the first step into your Stylesheet and the second step into your XHTML:

/* the First step displays styles the H1 tag and hides the EM tag */

h1 { background: (/example.jpg) no-repeat; width: 300px; height: 100px; }
em { display: none }

/* the Second step displays styles the H1 tag and hides the EM tag */

Title

And Voila! You got a nice tasty treat for search engines!

Web Source:
SmileyCat

Ok, so linked block color hovers aren’t the newest thing, BUT they still look fantastic integrated with comment areas of sites and ordered lists to name a few. Not to mention here is a super easy, sleek way of creating them!

Web Source:
Think Vitamin / Carsonified

Sometimes CSS tips and tricks aren’t always related to how you stylize and make things function in differently. Sometimes the tips are directly related to the markup itself. One thing to always remember when developing your markup is to keep it nice and clean to prevent future headaches. Carsonified has a fantastic blog post on this exact topic. Check it out!

Web Source:
CSS Tricks

Want to put some real text on an image that is both attractive and SEO friendly? Well look no further because CSS Tricks has a fantastic solution for an easy alternative to using graphic based text on images.

Web Source:
Trent Richardson

Ever wanted to say a little more with a link without adding the description to the link itself? Well no sweat, here is a handy little trick so that you can create easy hover bubbles for your links.

Web Source:
Phrogz

Tabular driven data isn’t new. You’ve seen it, it has been around, and using it in website development is still as useful as ever. Well we found a very clean approach to creating tabs that you may not have seen yet. Even let’s you bookmark desired your tab!

Web Source:
Snook

This is an awesome effect that we have stumbled upon a couple of times on the web and always wondered how it was done. Well we found it. Check it out, it’s a great approach to making things just a little more interesting for otherwise hum-drum text layouts. Can’t wait to use this one!

Integrate Twitter Into Your Web Design

Jonden Jackson — Thu, 02 Jul 2009 14:09:41 +0000

Ah Twitter, what was once considered an unknown social media tool is now on the bleeding edge of changing the world. Wait, that’s a very bold statement, perhaps we should say changing the way we live? Regardless Twitter is huge, everyone’s doing it, everyone’s talking about it and most importantly it actually plays a very important role now in saying what you need to say, how fast you need to say it, and finding a niche for it all.

Twitters role in the lightning fast world of social media is so important that it’s becoming a key design element SOMEWHERE in your personal blog or business site. There seems to be an unprecedented number of graphic designers and developers on twitter so of course the choice is obvious. Integrate your twitter account into your design and development projects and stay connected with those who follow you. Not to mention once integrated into your blogs and sites you can simply send a tweet from anywhere and you have a little news section on your website to be updated from anywhere at anytime. But you already know that.

As designers and developers we know adding any new feature to your site such as a twitter feed can be very exciting and open doors to endless possibilities of how you can design and develop for them.

So now that we have quickly gone over the importance of twitter in the design world let’s take a look at some current and beautiful twitter feeds integrated into site designs. Tweet Tweet!

Website:
WigWagWalk

Website:
Ronnie San

Website:
Thirty One West Creative

Website:
Creative Happy

Website:
Mr. Henry

Website:
A Simple Measure

Website:
Jason Reynolds

Website:
Jeff Finley

Website:
Douglas Menezes

Website:
Nick Fink

Website:
Lisa Moseley

Website:
Giancarlo-Fajardo

Website:
Brian Hansen

Website:
Alex Arts

Website:
MailChimp

Website:
Owltastic

Website:
ConvergeSC

Website:
Reality Equation

Website:
Trevor Sheridan

Website:
Armeda

Website:
SickDesigner

Website:
Dialogix

Website:
Pink Petrol

Website:
Kitchen Sink

Website:
Spout Creative

Website:
Jepser Bernardino

Website:
Derek Bender

Website:
Bara Design

Website:
Jones CH

Website:
Ali Felski

Website:
Matt Hamm

Speed Up Your Design and Development

Jonden Jackson — Thu, 11 Jun 2009 00:13:15 +0000

Look, as designers and developers alike, at some point in time we are all guilty of it. Maybe we spent a little too much time on design, or maybe we just couldn’t seem to get the right color scheme, or worse we spent too much time indenting our CSS and not enough time thinking about the code we were writing. Whatever the case may be at times we need some helping hands, and we need them to be lightweight.

Well you are in luck! We have been scouring around studying and finding some of the most common practices in design and development today and have prepared a list of applications that will save you time in the long run. Without all of the fluff of course.

So take a peek, give these sites a chance, we use them and you would be surprised how much time and tears this could wipe off of your projects.

Typetester

Typetester is an online application to compare and contrast fonts on your screen. By controlling line height, word space, and weight you can visually see what your type will look like before even adding it into your stylesheet. Oh yea, did we mention it generates the CSS for you?

Feed Icons

Need to grab some feed icons on the fly? Check out Feed Icons and simply grab the standard or colorized RSS feed icons. Also has some ul styles and li styles with the icons that could save some valuable development time.

Smush.it

Big backgrounds slowing your load time down? Check out Smush.it, a site solely built to compress the life out of your images without losing any clarity or quality. Don’t believe it? Try it out.

Snipplr

Ever had De Ja Vu? Of course. But have you have had it while writing code? Even worse. If you are starting to notice things that you consistently write out and wish there was a faster way just simply drop by SNIPPLR. This site will store those little pieces of code that you write over and over again so next time you catch yourself starting to write it out - stop - then go grab it from SNIPPLR.

Another great feature to this site is you realize quickly there are more developers out there who share your pain, but they also carry burdens of their own. You can view the codes that they use the most often and you can copy theirs! Great find!

jQuery Themeroller

I’m pretty sure everyone is familiar with jQuery now so we will cut right to the chase. You should check out jQuery Themeroller. It allows you to design custom jQuery UI themes for your projects. Go ahead and customize your theme and if you change your mind later, simply alter it and download the code. If you don’t have time to customize your own, just go check out the theme gallery and download one within seconds. Just one more reason flash should never be used for displaying content

Kuler

Kuler is an Adobe created themed community built around one thing. Colors! You can explore others custom created colors, create your own or upload your personalized and custom photos to create your personalized themes. This is a MUST have!

degraeve

This one is pretty much a no-brainer but very handy to have when you want to just grab the image and grab the colors from it. Super simple, and the colors automatically picked are usually spot on. Give this one a go when your custom schemes just aren’t getting the job done in time.

stripemania

Stripemania is a simple free tool to create seamles stripes for your designs. You can able choose the size, spacing, color, and gradient. This should save you a lot of time when your next striped background comes along.

launch splash

Working on a site but need a temporary splash page for it? Check out Launch Splash. Simply fill in the domain you want and pick from a list of nicely designed templates that fills in the blanks for you. A must have!

Tabifier

Have you ever been in such a rush to start coding your stylesheet that you just start coding on one line and don’t even bother with indenting? This is fine…if you are doing a 404 page. As we all know that when coding like this it’s going to be a mess down the road. That’s way we suggest Tabifier, if you do happen to find yourself rushing through your code to see the outcome, take a breather, copy the code and let tabifier take of it. It will indent it all for you!

Em Calculator

Are you good at math? If so then lucky you! If not, however, you are in good company. You know the difference between ‘px’ and ‘em’ and when you should use them, but what about when you have to convert pixels relative to em units? Look no further, just visit Em Calculator and skip the hassle.