Tips for Web Designers, Developers, and Bloggers

Posts tagged ‘showcase’

Design Inspiration #2

Websites

Logos

Advertisements

Design Inspiration #1

I’m going to start a whole new branch of design inspiration. Categories are: Design & Inspiration. This is post #1. Starting from post #2, I’ll not put an introduction, just images and links.

Websites

https://i2.wp.com/maxcdn.thedesigninspiration.com/wp-content/uploads/2010/07/Nhdist-l.jpg

New Hamphshire Distributers, inc., http://www.nhdist.com/

Illustration

https://i0.wp.com/maxcdn.thedesigninspiration.com/wp-content/uploads/2010/07/Thank-you-for-those-days-l.jpg

Thank you for those days

https://i1.wp.com/maxcdn.thedesigninspiration.com/wp-content/uploads/2010/07/Earth-l.jpg

Earth

https://i1.wp.com/maxcdn.thedesigninspiration.com/wp-content/uploads/2010/07/Davy-jones-l.jpg

Davy Jones

https://i0.wp.com/maxcdn.thedesigninspiration.com/wp-content/uploads/2010/07/Battle-at-HU-Lao-Gates-l.jpg

Battle at HU Lao Gates

Logos

https://i1.wp.com/maxcdn.thedesigninspiration.com/wp-content/uploads/2010/07/Reforger-Films-l.jpg

Reforger Films

https://i2.wp.com/maxcdn.thedesigninspiration.com/wp-content/uploads/2010/07/Airtistic-l.jpg

Artistic

https://i1.wp.com/maxcdn.thedesigninspiration.com/wp-content/uploads/2010/06/Wine-Bottega-l.jpg

Wine Bottega

Huge Inspiration for the Designer

Websites

Liftux.com:

cc

Lift

Designeus.hr:

https://i0.wp.com/maxcdn.thedesigninspiration.com/wp-content/uploads/2010/07/Designeus-l.jpgd

Designeus

Wireframeplus.com:

https://i2.wp.com/maxcdn.thedesigninspiration.com/wp-content/uploads/2010/07/Wireframe-Plus-l.jpg

Wireframe Plus

Fatihtanriverdi.com:

https://i0.wp.com/maxcdn.thedesigninspiration.com/wp-content/uploads/2010/07/Fatih-Tanriverdi-l.jpg

Faith Tanriverdi

Illustration

Problems With Graphics? The Formats NOT to Use

PART 1: JPG – To Be Used Only With Photos

Many websites have great graphic content. Images, videos, banners, etc. you notice them everyday – they aren’t clear looking. Notice here on a picture I took from Core-PHP:

Cr

Core-PHP WordPress Logo for Their Front Page

Notice how it’s not too sharp? That’s the problem. This image is a JPG (A.K.A. JPEG). That’s exactly what happens when you put an image created using a computer (whether it’s a Mac or PC) is saved as a JPG. Keep in mind, a JPG isn’t all bad. For it to work with vector graphics, or any high quality graphic, you need a bulky file – so it’s almost impossible to compress without any problems. Here’s another example:

dasf

A Zoomed Demonstration

This file format should be used only with photos. That’s all. If you made Photoshop adjustments, it’ll be OK, but make sure it’s good looking. Test it out before it’s online. To test it out, download a copy of all common browsers, or ones that are for your website. Type up some markup and open the file in the browser. Here are common browsers:

  • Opera
  • Safari
  • Firefox
  • [Google] Chrome
  • IE (this one is known for problems.)

Part 2: PNG, for Everything Else

If you have regular graphics, you should use PNG files. Portable Network Graphics are really common over the internet. They’ll be used for still images in high quality. Just use PDN or Photoshop to turn GIF files to PNG files, if you are used to GIF. Here’s an article about 8-bit alpha – why you should switch from GIF to PNG.

So, GIF files are great for animation, but you should use Flash SWF files instead – they even have better resolution (duh). PNG’s are for still graphics, and JPG’s (or JPEG’s) are for photographic wonders.

Some Pretty Cool Fonts

Here I’ll post something designers look for (and create) all over the world: some pretty cool fonts. To heck with the introduction, I’ll get to the point.

tere

Amputa Bangiz Standard font

This font combines a neat retro look and a nice futuristic touch. Found on Deviant Art.

https://i1.wp.com/fc06.deviantart.net/fs22/i/2008/015/d/0/_Digital_Ninja___font_type__by_Quiccs.jpg

Digital Ninja

Digital Ninja, created by the same author as above (Quiccs), hase the same sort of retro and futuristic look, but the differences are obvious.

https://i1.wp.com/www.fonts101.com/previews/827/Fatboy_Slim_BLTC_2_BRK_font_preview_8028_2.png

Fatboy Font

Fatboy Slim is a pretty cool comic font. I found this on random searches. This is a super awesome comic font, and looks pretty good.

That’s it for this post, but in my searching, if I’ve learned something, it’s: there’s always something better!

3 Twitter Icons

In this post, I’ll link to (and provide screenshots) of cool Twitter icons that I found. The idea hit me today. Every good blogger/website designer should have a neat and unique Twitter icon to go with the theme of their website. And finally, I know that only 3 twitter icons is a really low number (and other posts that I saw had 100+), but I’m just getting used to the webdesign blog.

1. At first, when I thought of this post, I found a twitter Icon on “CorePHP.com“. The website itself didn’t appeal to me much, but the twitter icon did. It seemed like a great idea to make a bird poke through the wall saying, “Follow me on twitter!!”

cs

Core PHP's neat Twitter Icon

2. Here’s an icon set that is like no other. Though the icon set doesn’t look related at all, something that really spoils it, each individual icon is looking great! This icon may be a bit too large on the top, so if you’re going to use this set, remember that an over sized footer is a trend.

twitter social icons 100+ Remarkably Beautiful Twitter Icons And Buttons

A cool twitter icon from a set of six remarkable buttons.

3. This comes from another remarkable set, this time from a set of only twitter icons!! It’s called “TwitterFun.” I chose what I thought was the best one from the pack, the one with a bird upon a blimp. Fun, huh?

Another neat Twitter Icon set. Buy vector file or free PNG file.

5 Widgets to Enrich Your Website

Here I’ll tell you 5 widgets that are so cool, sites like Abduzeedo, WikiHow, etc. have them. Why would you want widgets? You don’t want too many, but a few here and there will do just fine. Widgets will keep your blog/site connected with the rest of the internet, which is play a major role in hits, page views, status, page rank, etc.

  1. http://bar.meebo.com/. The Meebo Bar is one of the most popular widgets I’ve seen. I’ve found it on Abduzeedo and Wikihow, major sites that have thousands of unique visitors per week (or day, I’ve never checked). Here’s what one of these famed bars look like:

    mb

    The famed Meebo Bar

  2. The Facebook share button. http://www.facebook.com/facebook-widgets/share.php. This is a must for your blog or website. You’ll have your audience see just how many people like whatever you post or write, how many like your game, product, video, music, or whatever you post.
  3. Some sort of widget to display your tweet. First of all, you should get a twitter account (no duh). Then, just start tweeting!! Sooner or later, you’ll do once everytime you’re on the computer!! Something like this can be gained from: http://twitter.com/goodies/widgets (twitter site).
  4. Digg widget. This is a MUST!! For this, just post an embed code that you can find on Digg.com.
  5. A http://flattr.com/ widget. This is something like a Digg digs sort-of thing, only it’s called Flattr. For wordpress: http://en.forums.wordpress.com/topic/flattr-widget-for-wordpresscom?replies=14. For everything else: I don’t know.

These widgets are sure to enhance your traffic, hits, etc. and get you’re blog’s name out there. On top of that, it’ll get visitors who might want to chat on the Meebo bar, etc.