Sunday, March 30, 2008

Design Style Tutorial: SIMPLICITY IN WEB 2.0 (Part 1)

I think it is about time to include CSS as one of the design element in the tutorials. The chances to get your blog or website stunning would depend so much on the process of integrating elements of visual design to your blog by CSS. As Web 2.0 begin to emerge in the beginning of 2006, many websites and blogs articles have been giving us clarity of how to visualize better Web 2.0 style.

You will need to take a look of some Web 2.0 design resources before we get in to our today’s tutorial. When you use one of those resources, please credit the original designers for appreciation and read his or her design copyright before you apply them to your design.

Certain design elements which are frequently implemented on Web 2.0 themes are:

1. Fonts and Typography – Big Size Text for Headings.
The trends will however show you bigger text in order to improve functionality in layout design. Bigger text is more accessible to more people, and font sizes range between 14 and 16. The consequences of using big text, you have to make room by simplifying, removing unnecessary elements. There are also tendencies to have less contrast between text and background. Darker background would benefits users of new computer that has brighter screen.

2. Round Corner
Round corner in web 2.0 sites seemingly polished to create informal invitation. This cozy form is chosen for comfort eyes when searching down from header to footer.
We have included this design element to the Web 2.0 resource list and round corners can be generated from:

  • Online round corner generators
    Round corner generators should be easy for anyone who probably doesn’t know of how to use CSS or graphic application. Really a time saver!

  • CSS
    This CSS round corner will let your web page load faster, since you don’t have to add big size of image as background in html markups nor CSS techniques.

  • Photoshop or illustrator application.
    It has the advantages to create more variation of FX, for instances: more options to use background color gradients, fading out some other sides of corners, more option to add sleek border FX, etc.


3. Color Scheme
If you notice carefully, color schemes in Web 2.0 genuinely consist of vivid colors to add more contrast over some part of page element AND shades of greyscale ranges from Shiny silver [#EEEEEE] to Shadows Grey [#36393D].
They are greenish, as it works like a charm on Techcrunch and Technorati. Flickr and Odeo Pink should be popular for star badges and icons. Bold and saturated blue as well as RSS orange are also common. Little bit red on Last.fm and Blog Catalog add up some spice to the pale white – grey background.

4. Gradients, Glossy, and Reflected Effect
Web 2.0 was a breakthrough from a static and none semantic rules kind of website into modern and dynamic website that talks visually to achieve interactivity and functionality with the viewers. There is an interesting article debating of how people have started following Web 2.0 trends without further learning of design concept process. Onur Oztaskiran has a personal opinion on the article: “How Web 2.0 Style designs disturb me”

The use of gradients, glossy and reflected effect is so much about Web 2.0 style, but being excessive with those effects could make your site gone out of focus.
Bear in mind that special effect is good, but put it or use it for the right spot! Less is more and keeping it as simple as possible.

5. Miscellaneous vectors shape and image style
Glossy button, big RSS icons, Stars badges are everywhere… :D Oh so cute, and shiny....
The looks are simpler than the old times style. Again, I shall remind you to give some space to your website layout structure even if you have to use some of them.
They are easy to create and even you’re not good to make one, internet provides you tons of links to download the files and they are ready to use. Find some of cool buttons, badges and icons on the Web 2.0 resources.
Regardless of how you want your Web 2.0 design style going to look like; you don’t have to implement every of those simple guidelines on your design. Consider it twice, in which part of element that need some retouch and experiment is the best

There will be another post for tomorrow’s tutorial following this section. You can also subscribe to Graphic Identity by RSS Feed or by Email if you like to follow the next updates :)

UPDATES:
  • Design Style Tutorial: SIMPLICITY IN WEB 2.0 (Part 2) is now live! Visit the page for the CSS background positioning tricks!


  • WEB 2.0 THEMES ON INTERNET:


    Pixel2Life


    Photobucket



    Split Da Diz


    Photobucket


    StylishLabs

    Photobucket


    Juricks2Web


    Photobucket

    Related Post:

    Wednesday, March 26, 2008

    DESIGNATHLON - Logo Design vs Blog Design

    Time to get your self warm up now! New events are likely get you to exercise into rounds of enthusiastic battle of DESIGNATHLON competitions. :D Don't get confuse to what I'm trying to say. DESIGNATHLON is just a dummy term to describe what's going on here.

    There are two design competition events that I've been following recently. Held on Logo Design Love and Vandelay Website Design, I think if you could watch these competition it would be as fun as watching a game competition. You don't have to sweat to create and submit your hell of astonishing design, because all you have to do is to vote. You will be the judge reader along with other blog readers across the globe to choose some of the design entries as your most favorite design.

    Read More

    Enough with the chit chat let see what you can do ;)!

    Reader Appreciation Award at Logo Design Love
    Photobucket
    There are 10 award categories of logo submission. As well as an outright winner decided by the judges, you are also invited to vote by leaving comments on the individual category posts. Add a comment below every post category as your favourite design (or 1st, 2nd and 3rd favourite). Once all categories have been published, the votes will be counted and the final round featured .
    Categories already published are hyperlinked. The remainder will follow very soon. Find these 10 logo design categories and start your votes now!
    * Business blogs
    * Design and photography blogs
    * Entertainment blogs
    * Environmental blogs
    * Health and self-development blogs
    * Marketing and PR blogs
    * Personal blogs
    * Political blogs
    * Technology blogs
    * Miscellaneous (for everything else)


    Blog Design Madness
    Blog Design Madness
    The Blog Design Madness competition is now officially underway! There are 64 blogs that have been chosen, and the participants are all listed in this post. Because each competition requires a separate poll, Vandelay Website Design needs to break up the first round into 2 parts. There are 16 matchups in this post involving 32 outstanding blog designs, and the second half of round one will come in a few days.
    Each matchup includes a poll, links and a screenshot of both blogs. Vote for your favorite blog on Blog Design Madness: Round One now!
    Here are the competition participants:
    * Freelance Switch vs. Mark's Digital Farm
    * Vocino.com vs. You the Designer
    * Pro Blog Design vs. Tim Kadlec
    * 9513 vs. Webstock
    * Grand Sierra Magazine vs. Elitist Snob
    * The Big Noob vs. Blog Design Blog
    * Reflections vs. Trailer Flick
    * David Airey vs. Kollermedia
    * ProBlogger vs. Sully's Design Studio
    * Artico vs. Young Go Getter
    * Cult Foo vs. N. Design Studio
    * Robert Beerworth vs. Noupe
    * Laura Alter vs. Loon Design
    * Rob Goodlatte vs. A List Apart
    * Josh Spear vs. Mostly Lisa
    * PSDTuts vs. Bart-Jan Verhoef

    UPDATE:

    • The results from the 1st half of round one are as follows (see the original post for screenshots and links):

    • Blog Design Madness has completed the votings for The Second Half of Round One
      There were 32 excellent designs to decide on, and the winner of this second half round one are:
      Freelance Switch vs. Mark’s Digital Farm
      Winner is Freelance Switch

      Vocino vs. Youth the Design
      Winner is Vocino

      Pro Blog Design vs. Tim Kadlec
      Winner is Pro Blog Design

      9513 vs. Webstock
      Winner is 9513

      Grand Sierra Magazine vs. Elitist Snob (this poll was tied, so I took am removing my vote for Grand Sierra Magazine and using the readers votes of 15 to 14 in favor of…)
      Winner is Elitist Snob

      The Big Noob vs. Blog Design Blog
      Winner is Blog Design Blog

      Reflections vs. TrailerFlick
      Winner is Reflections

      David Airey vs. Kollermedia
      Winner is David Airey

      ProBlogger vs. Sully’s Design Studio
      Winner is Sully’s Design Studio

      Artico vs. Young Go Getter
      Winner is Young Go Getter

      Cult Foo vs. N. Design Studio
      Winner is N. Design Studio

      Robert Beerworth vs. Noupe
      Winner is Robert Beerworth

      Laura Alter vs. Loon Design
      Winner is Loon Design

      Rob Goodlatte vs. A List Apart
      Winner is A List Apart

      Josh Spear vs. Mostly Lisa
      Winner is Josh Spear

      PSDTuts vs. Bart-Jan Verhoef
      Winner is PSDTuts


    ICON GALORE - Professional Quality at Highly Affordable Rates

    Icons could be one of graphic design element that every professional software developer or a website developer needs to accomplish their work into an excellent quality level. Websites that offering icons (free and commercial) emerge almost every day, but not all of them provide both quality and quantity; in fact, usually, quality is far more important for presentation. Supposed that Icon Galore fairly new for you, today I want to introduce this website and their most striking features of their service
    in a review. So I will show you why professional quality comes into our attention.

    header icon galore

    Icon Galore presents professional Xp and Vista icons at lowest cost in the internet. They offer icons in three different formats, which are:
    • .gif format
    • .ico format
    • .png format

    You get a package of icon set formats on every purchase.
    Also, if you need vector formats in your design, this format pack need to be ordered separately.
    Find out about the difference between these formats and what purpose do they serve that more at Icon Galore website.

    Icon Galore has the largest collection of icons 5000 unique icons and 900000 files for download. If you visit the website, you will find

    Featured Icon Sets come into 8 categories, they are:
    1. Network and Database Icons
    Network Database Icons
    2. Accounting Software Icons
    Accounting Icons
    3. Email Application Icons
    Email Application Icons
    4. Application Navigation Icons
    Application Navigation Icons
    5. Web Icons
    Web Icons
    6. E-commerce Icons
    E-commerce Icons
    7. Conceptual Icons
    Conceptual Icons
    8. Entire Icon Collection
    Entire Icon Collection

    There are also Budget Icon Sets which are divided into 12 categories, such as: Hotel and Travel Icons, Telecom Icons, Entertainment Icons, Medical Icons and many others.

    A nifty icon set available in different packages:
    • For each icon six formats, active, inactive, over states, five different sizes and 150 files included.
      icon types

    • Icon Galore offers seven different icon sizes with every purchase as follows:
      16 x 16 pixels
      24 x 24 pixels
      32 x 32 pixels
      48 x 48 pixels
      64 x 64 pixels
      128 x 128 pixels
      256 x 256 pixels
    • Icons come in true color as well as 256 colors.


    Not able to find the icons that you need? custom icons design service will be available at affordable rates. Make use of Icon Galore icon customization services and get the icons of your choice delivered at your doorsteps. All you have to do to get started is fill up online customization form and you are ready to go!
    And if a form is not enough for your urgent need, Icon Galore provide you live chat support available in 24/7 customer support service.

    Friday, March 21, 2008

    Redditers – What They Tend to Do?

    Reddit’s environment is not so much different with another social media website which gives you way to click for a vote. This kind of environment is absolutely perfect for a blog article which has interesting headline. Another thing is Redditers can actually spice up the article’s headline submitted to draw more attention. Regardless to all the pros and cons, Reddit encourage the Redditers simply to vote the article submitted and hardly can find a way to visit or even to revisit if you get lucky enough for a precious visit.

    Analyzing your stat would probably help you to figure how each of your referral websites performed to your blog. A popular article submission in Reddit, can stay on the front page for approximately the maximum time frame of 24 hours or less, after which it’ll move in the second page for a while, before slowly falling down the ranks. A short blast within hours or a day, and no guarantee of follow up actions in return. This is what so called: “A perfect example of high bounce rate in Google Analytics”.

    Huge traffic is what all bloggers eager for. The kind of traffics that you need would be so much depending to the blog that you maintain. If you blog about money or primarily run some advertisement programs, to get high exposures to your blog is the reason why you should bother with Reddit.

    Anticipate nothing more but merely high exposure in one or two days. However, there is an interesting case study which is done by Maki of doshdosh.com.
    Maki has been projecting formulas to bring long term perspective or growth plan based on his research upon a Redditer fellow’s submission materials.

    Reddit was my first experiment of using social media website to promote my early articles. My blog visitors ranged only 20 to 50 for the whole day that time. As a newbie, I was so careless of not spare some times to read useful tips from more experienced Bloggers. Although I got boost of traffics from Reddit, the experiment was turning into something bad! I thought it was okay to submit my own article to Reddit, well this was a huge mistake because most of the Redditers hate it. Unlike Digg, Blog Engange, or Design Float which have more flexible submissions guideline’s rules, the Redditers can easily blacklist your domain or website when you do repeated self-submissions/promotions.

    As a social media website, Reddit is a giant community ever. If you only care about numbers of traffics and nothing but traffics, then you are a typical Redditers.
    When you determine that a well targeted traffics and readers as your main concern, I think you may start to think another way besides just using Reddit. Everyone who thinks of long term growth progress should always agree if this community is not even worth to be sticked on.

    That is why (in my personal opinion) I’ve seen lots of high profiled Bloggers only focusing to Digg, Stumble Upon or Del.icio.us for promoting their blog. See how Bittbox attracts the readers to do the socio bookmark favor by using three kind of socio bookmark buttons (Digg, Stumble Upon and Del.icio.us) and so does I Love Typography which uses 4 buttons only (Del.icio.us, Digg, Facebook and Stumble Upon) to avoid the clutters.

    A Digg user clicks the digg button as a way to vote your article, but believe it or not, Digg’s environment will bring you more valuable traffics than Reddit. Jacob Cass described this in his article: What is the best social media website? Digg, SU, Delicious, Reddit … or?

    Are You a Typical Redditer?

    This article is a submission for Vivien’s Social Media Group Writing Project, something that may be useful for you to learn more about Social Media Websites.

    UPDATES



    Related Post:

    Thursday, March 20, 2008

    Things to Consider Before You Join a Flickr Pool

    Photographers and Designers need a social media website that would help their artwork visually targeted. Flickr has the powerful tool to bring a visual masterpiece uncovered to the millions of viewers. If you’re a photographer or a designer who blog, why not starting out a Flickr pool? It would be wonderful to include a bit of interactivity with your readers. Besides promoting goal, A Flickr pool is an excellent media, where you can discuss and learn from others.

    I’ve already joined some of Flickr Pools which is Bittbox User Showcase and another design contest event called “What is Graphic Design?” held by Veerle’s Blog. After I’ve submitted some of my graphic designs into the group pools, I begin to have more amazing Flickr contacts, receiving comments and some Flickr members adding my designs to their favorite list. To me, Flickr is like a huge design reference collections where I can find inspirational works of visual art and meet the man behind those masterpieces.

    Before we jump to the main topic, I also would like to let you know that I’ve started Graphic Identity Design Showcase pool. This is a group where you can showcase your graphic design after you adapting some of my Free Design Box items as part of your artwork. In the mean time, I’ve manually submitted some of graphics which are designed using one of my Photoshop Brushes series. They are actually a group of great deviants and I would love to see more in the future. You are always welcome to join this group and feel free to add your profile or blog URLs in the comment box!

    Here are things to consider before you join a Flickr Pool:

    1. Create a nice screen name url because you can direct people to your Flickr pages with it! Some of you probably don’t know that you can change your default Flickr profile, which is usually consist of ugly code and numbers by login to your Flickr account
    The unique URL address you can use to show people your photos (and your Flickr profile) should be look like this:
    http://www.flickr.com/photos/yourscreenname/
    A nice screen name URL should be potentially easy to remember and to identify. Otherwise, you’ll be a forgotten by the group members.

    2. If you think that your photos or graphics are sorts of valued assets, manage the usage rights under a “Creative Commons” license. Hence, everyone will need to pay attention to usage rights if they want to use your photo in a publication.

    3. Batch system on Flickr allows us to set different content type of uploaded files (photos or graphics). Flickr has a sort of organizing options where you can set the content type of your graphics to "other - art, illustration, CGI, etc." and NOT as a photo as wanted by the Flickr guidelines. If you already uploaded it you can change it under the organize menu and go to the poster (choose recent uploads), double click the thumb of the image and in the popup window choose filter and select "other - art, illustration, CGI, etc." I believe this system correlates a lot to Flickr photostream search

    4. Watermark your photos with your blog URL or anything that would relate to your profile. I’m doing this from the start, and actually a spruce idea to send more direct visits to your blog.

    5. Tags your uploaded photos because tags make it easy for you to find your photos later on when you have tons and tons of photos. When you upload photos, there is a little box where you can enter Tags. There is also a space to enter tags on the right on each photo page and you can add tags when using Flickr Organizr.
    Just type some words relevant to the picture, with spaces in between, like "sky park dog blue grass green".

    6. Read Flickr Community Guidelines for further readings ;)


    This article is a submission for Brian Auer at Epic Edits as a part of a larger group writing project being termed “The Social Media Mega Project


    Related Links:

    Sunday, March 16, 2008

    Fire Fusion Vectors - Part 1


    First vectors I published to Graphic Identity Blog. You know I have no time to create better image preview, so I believe you will find out more after you finish the download ;)

    fire fusion free vectors part 1


    Read More

    The vectors are free to download for commercial or private use, but keep in mind that the vectors pack is officially can only be downloaded from GRAPHIC IDENTITY blog. Please read Graphic Identity Legal Usage before you download it.

    Please give your comment (feedback) for whatever it is, or share the permalink with feed flare or Add This button if you like!
    Feel free to use the vector's pack image preview if you want to blog about this freebies :D

    Just don't forget to subscribe as well, so you won't miss any updates of the next Free Design Box from Graphic Identity!


    I hope you like this Fire Fusion Vectors - Part 1 design pack :D, and enjoy!

    Graphic Identity Fire Fusion - Part1 (AI CS 1).zip (451.37 KB)
    Fire Fusion Vectors AI

    Graphic Identity Fire Fusion - Part1 (EPS).zip (479.4 KB)
    Fire Fusion Vectors EPS


    Graphic Identity Fire Fusion - Part1 (SVG).zip (392.53 KB)
    Fire Fusion Vectors SVG

    Graphic Identity Fire Fusion - Part 1 (PNG).rar (221.85 KB)
    Fire Fusion Vectors PNG


    Friday, March 7, 2008

    Graphic Design Group Writing Project Articles

    “Graphic Design” is not that hard to imagine. When you start typing words using your keyboards, graphic design could give you tremendous outlines to your imagination and actually you are unconsciously experiencing it in every single day of your life. You see it, you touch it, you need it, and you feel it!

    The first Group Writing Project that I have entered came up with wonderful selected articles. Jacob Cass was organizing this cool group writing contest nicely.If you’re one of the Graphic Design lovers, I send a bit of warm invitation for you to read the articles, socio bookmark, to link up and subscribe!

    I tried to categorize these articles so it would help you to grasp the headlines a little. Please correct me if somehow I made some mistake in sorting them. Enjoy!


    Designer Bits

    Web Design


    HTML and CSS


    Logo Design


    Social Network

    Content and Review

    Color

    Tutorial

    Design Optimizing

    Freebies

    Which one of those articles is your favorite? Drop your comment and share this post if you like :D!

    Wednesday, March 5, 2008

    Feed Flare Grand Opening Contest!

    FeedFlare.ca has been launch just over a month. Collin, the owner of this fantastic Feed Flare community site has starting out a grand opening contest with total prize packages are worth just over $5200.00 (cash value) plus the 25,000 Entrecard credits.

    Feed Flare Contest


    THE LONG LIST OF PRIZES

    I have informed you in my previous post that Graphic Identity blog has been taking part to sponsoring Feed Flare first contest. One of these prizes might be yours if you become one of the lucky winners of this amazing contest!

    • Mini Unix web hosting package free for 1 year - Donated by BlurFur web hosting services (value - $70.00) - random draw

    • Advertising voucher with Bidvertiser worth $200.00 in free clicks (value - $200.00) - random draw

    • Blog branding package which includes (Favico, header, logo, 125x125 button) design package donated by Graphic Identity (value - $200.00) - random draw

    • Free advertising for one month in the form of a 125x125 button on Blogging Cents. (value - $35.00) - random draw

    • Win one of 3 free advertising spots on the “You Can Learn Series” blog in the form of a 125x125 ad button (value per spot - $10.00) - random draw

    • Exclusive Theme donated by Unique Blog Designs (value - $99.00) there is around 10 different themes you can chose from if you win - random draw

    • Win one of 2 copies of the “Written Promptly Everyday”; E-Book donated by The Prompt Writer (value per book -$5.00) random draw

    • Win a copy of “How to launch a profitable free lancing business for under $50.00”; donated by the “Self Made Chick” (value - $12.00) random draw

    • Custom banner design and the size will be of your choice donated by Dat Money dot com (value - $50.00) random draw

    • One month free 125x125 advertising on Jason Boom dot com. (value - $20.00) random draw

    • Grand Prise - 25,000 Entrecard credits (one lump some, the largest amount to be given away in a contest to date) draw date is March 31st (value - not really sure but some where around $250.00 I think)

    • Bonus gifts - we have 200 pages on the “One Buck Wiki”; to give away - the first two hundred contest enterer’s will be each given one page as a bonus gift just for entering our grand opening contest.You will still be able to win any of the other prizes we have as well. The current selling price for a page on the “One Buck Wiki”; is $20.00 making this our largest prize package worth over $4000.00 in cash value.

    • Featured Grand Prise = $500.00 cash payable via PayPal with the draw date being March 31st. You can thank my nice income tax return for this prize!!!


    This event will be fun to enter and made simple so you can join anytime!
    To join the contest is always easy! You can read the details at Feed Flare contest announcement post and submit your entry fast!


    THE CONTEST SPONSORS

    The contest sponsors listed below will serve the winners with their kind donation of prizes ;) You will recognize from the list that some of the sponsors are actually popular bloggers and well known site services in the blogosphere. The contest has been start and gets supported nicely by these sponsors. Don’t loose a chance to join this exclusive contest event by submitting your entry start from now! :D

    1- Blogging Cents
    2- My Radical Blogs
    3- Jason Boom
    4- Dat money
    5- Graphic Identity
    6- You Can Learn Series


    7- BlueFur.com
    8- BidVertiser


    9- Firewalker Designs


    10- The Prompt Writer


    11- Self Made Chick
    12- Revenue Canada (my tax return)
    13- My Radical Blogs


    14- One Buck Wiki
    15- Unique Blog Designs

    Have fun and take your part!

    Tuesday, March 4, 2008

    Blogspot Design Showcase – Part 3

    Been very busy with things to do on February :D, so this post kind of hold up a bit. These Blogspot blogs just grabbed my attention for the first time I saw them. You know I love to catch a glimpse on paintings and artistic illustrations and sense the story behind them.
    So today, the reviews will include 4 Blogspot blogs which has crazily updates their post with breath taking arts and illustration. Buckle up guys!

    Dot Dot Design

    DotDotDesign

    Guga is the the author for Dot Dot Design blog. He is enjoying life by featuring wonderful list of designs, beautiful things and wonderful stuff at Dot Dot Design blog to the internet audience.
    …visual filtration of ideas, aesthetics and amusements.


    Dot Dot Design now appears with minimalist single column blog theme.
    Guga tends to carefully pick design photos or graphic illustrations for his blog every day. Pop and intuitively Innovative-Creative is his personal taste I believe. :D Guga, correct me if I’m wrong!
    Do you like it? hate it? You are all invited to post a comment to Dot Dot Design blog.

    Guga's Profile:


    M Fayaz Blog

    mfayaz blog


    M Fayaz is a 23 years old digital artist from Maldives. Marvelous header and design layout that will make you scrolling down for more is the first impression I got when I’ve visited M Fayaz Blog.
    He is also good in designing Blogger template! Just link back to M Fayaz Blog.
    One thing that might be a constructive criticism to Fayaz: Man! Go label each of your post today! For a better digging activity ;)

    Fayaz's Profile:


    Designer Depot

    designer depot

    Noelevz is the man behind the Designer Depot blog. One thing exceptional about this blog could be the insightful interview with some high profiled digital graphic artists from all over blogoshpere.
    Designer Depot is also an Entrecard advertiser with very good advertising rate now. That means a guarantee of high traffics activity when you decide to buy Entrecard advertisement spot from Designer Depot.

    Noelevz's Profile:


    Fossforous

    fossforous

    Fossfor is an illustrator artist from Belgium who loves to share excellent graphic arts in her blog. Her collections mostly about cartoons character illustration. Another blogs of her is Fossfor’s Laboratory . This blog is devoted to painting and drawing. You will find advice, resources, techniques and examples as well as links to other artist bloggers and sites.
    Enjoy and bookmark these lovely blogs now!

    Fossfor's Profile:


    Do you know any other Blogspot Design Showcase that I can visit to? or you simply want your graphic design blog topic to be featured also at Graphic Identity. Feel free to comment, or email me at graphicidentity.blog@gmail.com.

    Featured Post

    Monster Illustration Vectors that Work

    Not all monsters are scary and we can apply them in a design composition or illustration. You may want to search bunch of new created monst...