Posts Tagged ‘Design’

How to Choose Right CSS Frameworks

Wednesday, March 10th, 2010

CSS Frameworks allow you to rapidly improve and speed up your development time when used correctly, and provide a powerful way to style our websites and applications with flexibility and effectiveness.

So How Do We Choose the Right One?
The first step you need to take is to make sure you decide upon a framework that has an established and accurate representation of detailed documentation. This is vital to the steps you’ll take in implementing and utilizing your framework the way it was intended. Next, you should analyze what problems the specified frameworks of your choice will solve. As you come across frameworks that you believe might “fit the bill” for the project(s) at hand, then it would be wise to compare each of them and elaborate on which framework addresses which concerns and satisfies your needs.

Also, don’t hesitate to ask other developers and colleagues which framework has worked best for them and why? This will help you gain valuable insight based on the experience of others, something that can’t be bought. Another point I would like to make is the role your chosen framework’s community plays. How big is it? Are the members helpful? Does it provide invaluable resources? Every one of these questions help you determine if your framework’s community is going to be of use. The logical point of view is, the larger and more involved the community is, the better your chances are at finding the right type of help when you need it.

Below we will take a look at 8 of the best frameworks we found to be useful for both developers and designers.

Blueprint CSS

The Blueprint CSS framework uses a grid-system that has pre-built typography and includes various plugins, built-in form styles and more. With BP you’ll also find good stable documentation, a wiki, an active discussion group, and examples of sites built on the Blueprint system.

Elements CSS Framework

Overall, the Elements framework makes it much easier and efficient to write CSS code. It’s a way to keep your files organized, benefit from a collection of present classes that can make your development process much friendlier, and it’ll automatically add respective icons for external links so that users will be able to quickly find and access them as well.

Content with Style

Content with Style is a CSS framework that helps you style and structure your website with amazing design and typographical elements. With six different layouts to choose from that include vertical navigation, two content columns, horizontal navigation with two columns of content and useful one content columns. Content with Style is an efficient way to “prioritize” the content on your site and focus on areas such as the header, main content, sub content, and more.

Emastic

This lightweight CSS framework uses PX, EM, or % widths for the process of signaling a page width, and it is also based on an elastic layout. Emastic comes with various pre-defined styles for your typography and much more. Predominantly, the grid is made up of blocks that are sized from 5 to 75em units. The default sizes can be changed at any time and the frameworks design options depend on the grid layout.

960 Grid System

The 960 grid system is a powerful CSS framework that lets us develop and prototype websites rapidly. The layouts are based on 12-16 columns and the layout templates are for Illustrator, Photoshop, Expression Design, Fireworks and more. You can also print a variety of templates for use with pen and paper if that’s what suits you best.

Yui Grids

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Features included are support for fluid-width, easy customization, flexible template columns, and more.

Yaml

“Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users. YAML is focussed on web standards and accessibility, slim framework core with numerous extensions, complete multilingual documentation, and robust, flexible layout concept (columns & grids).

SenCSs

SenCSs stands for Sensible Standards CSS baseline, (pronounced “sense”). It supplies sensible styling for all repetitive parts of your CSS, and doesn’t force a lay-out system on you. This allows you to focus on actually developing your website’s style. SenCSs isn’t a framework like other CSS frameworks, it doesn’t include a layout system littered with silly classes and pre-set grids, so what does SenCSs do? SenCSs does everything else: baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms and more.

Read more:
How to Choose Right CSS Frameworks

Workaholic

Wednesday, March 10th, 2010

2 column business related wordpress theme compatible with old to latest version of wordpress. This theme is also tested in some major browsers.

Workaholic

Demo Download

    Read more:
    Workaholic

    Wild West

    Wednesday, March 10th, 2010

    3 column gambling related wordpress theme compatible with old to latest version of wordpress. This theme is also tested in some major browsers.

    Wild West

    Demo | Download

      See the rest here:
      Wild West

      MediaLoot Competition – 5 Free Year Long Licenses up for grabs

      Tuesday, March 9th, 2010

      Once in a while a new design resource arrives that looks so good you simply have to shout about it from the rooftops and make sure everybody knows about it. And today such a resource has launched, it is called Media Loot – a lowly priced subscription-based online toolbox of premium design resources. It is your one-stop resource for the coolest icons, the highest quality Photoshop brushes, the perfect textures, the best vectors, professional print templates, and much much more.

      And the coolest thing of all? We have 5 free one-year licenses up for grabs (valued at $168 each!).
      All you have to do to win a subscription is leave a comment below and tell us what resources you would like to see on MediaLoot.

      About MediaLoot

      Media Loot has been founded with one basic idea — to somehow provide better design resources for a lot less money. The best way to do that, they have found out, was to offer a subscription membership where designers could band together in a larger community. They can then buy tons of awesome designs together, distribute the cost, and everyone gets more for less. Now, how cool an idea is that?

      MediaLoot Screenshot

      The goal of the site has been to eliminate the need for pay-per-use sites by offering a subscription-based service and offer royalty-free resources designers that you could use on your own or commercial projects.

      What cool resources does Media Loot offer?

      Have a look a below at some of the cool resources that MediaLoot offer, and remember this is only the tip of the iceberg, and more much will be available soon.

      MediaLoot ScreenshotMediaLoot ScreenshotMediaLoot ScreenshotMediaLoot ScreenshotMediaLoot ScreenshotMediaLoot Screenshot

      You can browse more resources here: MediaLoot Resources.

      How to win this competition

      To win one of the 5 free one-year licenses all you have to do is leave a comment below telling us what you kind of resources you would like to see on MediaLoot.
      The competition will end on the 9th of April 2010, so get your comments in as quickly as you can. Good luck!
      Even if you don’t win this competition, you can join MediaLoot for only $14 per month (Join Medialoot), it would be money well spent.



      Continued here:
      MediaLoot Competition – 5 Free Year Long Licenses up for grabs

      Pixelpipe For Android & iPhone Posts Updates To Over 100 Networks

      Tuesday, March 9th, 2010

      When accessing a certain site, blog, or social network, it’s become customary to expect a mobile application from the site. Now, having tried the official Android Facebook application, I must admit to being rather disappointed. It’s even less intuitive than the current design, and that’s saying something.

      Yahoo! Meme has a similar story on display. Or hasn’t, rather. There is no official mobile app available yet.

      In these cases, we would turn to third-party (preferably) freeware. And we would be positively stunned. Reader, meet Pixelpipe.

      Pixelpipe :: 100+ Sites Supported

      Pixelpipe is an application for your Android, iPhone, or Palm Pre that allows you to post to social network sites and blogs. So what? Pixelpipe currently supports far over 100 different ‘pipes’, including Wordpress, Blogger, Drupal, Facebook, Twitter, Meme, Flickr, and pretty much anything else that comes to mind. Here’s a list dating back five months, and it’ll still blow your mind. So that.

      pixelpipe review

      You can Twitter, blog, share family snapshots, and even upload to a batch of ‘pipes’ by using one predefined @tag. Amazingly, Pixelpipe manages to retain an overview of the horde. Prepare for dumping your old mobile applications.

      What work needs to be done for the switch, you ask? Just follow the steps below.

      Step 1 – Create a Pixelpipe Account

      Quite obviously, you’re going to need a Pixelpipe account. Otherwise signing in would be one hell of a job. The basic sign up progress is hardly even a bother. Just enter your name, email address and password.

      pixelpipe review

      If you’ve already got an account on Twitter or Ovi Share, you can even skip the signup progress, and link those accounts together by simply logging in. However, do note that in the future you will always need to sign in with that Twitter or Ovi Share account you used, so there’s an unnecessary online dependence.

      Step 2 – Add Your Pipes

      Once signed in, you’ll need to start adding ‘pipes’. These are simply blog or social network accounts that you can later use to throw some interesting content online. Apart from Facebook, Meme and Twitter, not all these accounts are so obvious. It takes some time, but I’d advise you to scan through the entire list.

      Know that you can also perform this step on your mobile phone. But repeatedly entering usernames and passwords goes a lot easier on your computer.

      pixelpipe review

      Perhaps you’re already sure what you want to use Pixelpipe for. In that case, you might only want to add a very specific branch of online accounts, and leave the rest for your desktop internet use. Luckily you can also filter the available ‘pipe’ accounts by their capabilities.

      After authorizing Pixelpipe with the selected account, you’ll be asked to enter a few additional details as well. Noteworthy is the Routing tag. By embedding this tag in title or body, you can override the default pipes and have a message sent only to that service. Routing tags are also used when you post by email and MMS.

      Step 3 – Profit! (Mobile)

      And that’s pretty much all you need to do before you’re able to start using Pixelpipe for you mobile phone. If you log in with your Pixelpipe account now, you’re all set to go. Post text, pictures, and video to all of you’re favorite sites.

      As you can see in the screenshot above, you can still select non-default pipes every time you post. Where supported, you can even include your Geo (graphical location).

      Know any mobile applications that top this? Be sure to let us know what mobile services you use, and why!

      Did you like the post? Please do share your thoughts in the comments section!


      Related posts



      View post:
      Pixelpipe For Android & iPhone Posts Updates To Over 100 Networks

      This Weeks Twitter Design News Roundup N.27

      Tuesday, March 9th, 2010

      This is our weekly Twitter Design News Round-Up, a collection of fresh design related resources that we have shared via Twitter in the past week.

      Just in case you are not one of our Twitter followers, click here: twitter.com/speckyboy, and you’ll be kept up to date with loads of design news and resources.

      As always, if you have any cool links that you would like to share, do not hesitate to share them here: Submit News. Thanks to everyone that has been emailing.

      Good Reading: Web Design Criticism: A How-To from Smashing Magazine

      Web Design Criticism: A How-To

      Good Reading: Designers: How to Search For, Hire, and Work With a Web-Developer from Noupe.com

      Designers: How to Search For, Hire, and Work With a Web-Developer

      Good Reading: How Much Do Standards And Trends Dictate Your Web Design? from Pelfusion

      How Much Do Standards And Trends Dictate Your Web Design?

      Inspirational Showcase: 70+ Fresh and Inspirational Single Page Website Designs from Instantshift

      70+ Fresh and Inspirational Single Page Website Designs
      70+ Fresh and Inspirational Single Page Website Designs

      Inspirational Showcase: 55 Inspirational Original White and Light Web Designs from readactor.com

      55 Inspirational Original White and Light Web Designs
      55 Inspirational Original White and Light Web Designs

      Tutorial: Quick Tip: Highlight Author Comments in WordPress – The Right Way from AEXT.com

      Quick Tip: Highlight Author Comments in WordPress - The Right Way

      Tutorial: Speed Up with CSS3 Gradients from CSS Tricks

      Speed Up with CSS3 Gradients

      Tutorial: Rotated Background with Slide Up Menu using JQuery and CSS from thatagency.com

      Rotated Background with Slide Up Menu using JQuery and CSS

      Tutorial: Capture the Perfect Panning Shot Every Time from photo.tutsplus.com

      Capture the Perfect Panning Shot Every Time

      Tutorial: Create a Stunning Retro Futuristic Typography from RichWorks

      Create a Stunning Retro Futuristic Typography

      Tutorial: Burnt Wood Text Effect – Photoshop Tutorial from Visual Swirl

      Burnt Wood Text Effect – Photoshop Tutorial

      New Free Web App: Picmeleo Online Photo Editor

      Picmeleo Online Photo Editor

      Freebie Download: Free Star Wars TrueType Font from Airopia

      Free Star Wars TrueType Font

      Freebie Download: Update: Social Media Icons from WebdesignerWall

      Update: Social Media Icons

      Freebie Download: Google Nexus One, Android GUI PSD Packs For Designers from Cheth Studios

      Google Nexus One, Android GUI PSD Packs For Designers

      Freebie Download: Free Web UI Wireframe Kit from Fuel Your Interface

      Free Web UI Wireframe Kit

      Freebie Download: Gesturecons – Multi-Touch Icons

      Gesturecons - Multi-Touch Icons

      Previous Twitter News…

      Twitter Design News Roundup N.26 »
      Twitter Design News Roundup N.25 »
      Twitter Design News Roundup N.24 »
      Twitter Design News Roundup N.23 »
      Twitter Design News Roundup N.22 »
      Twitter Design News Roundup Archives »



      Visit link:
      This Weeks Twitter Design News Roundup N.27

      Top 8 Dreaded Favors Asked of Web Designers

      Tuesday, March 9th, 2010

      Long before you officially take the profession of graphic or web designer, your friends and family will support your ambitions by developing your talent. At first, your loved ones inspect your work and if they like what they see, you’ll get flooded with their requests for one page flyers, t-shirt designs, logos, and company websites. When you are just starting out, you welcome their requests because it gives you a chance to grow your skill set as a designer. After all, it’s almost like dealing with real clients, right?

      The drama comes when you actually become a full time designer. The friends and family who drew upon your talent during your newbie years are still standing around with their hands out, and now you also must contend with two more groups of favor askers: clients and anonymous foreigners who contact you through Twitter.

      Here are 8 of the most common and eye-rollingly annoying favors all designers encounter at one point or another. For ease of reference, we’ll call the offending party “Dude.”

      1. “Hey, can you take a look at my site and tell me what you think?”

      At first glance, this seems like a harmless five to ten minute project. Dude asks for your opinion, and you both know that you are an esteemed and dedicated design pro. You optimistically click on his website link, and you’re teleported back in 1998 with a Geocities-reminiscent design so horrifying it makes MySpace look professional. After you try hard not to lose all respect for Dude, you carefully suggest that he get rid of the Flash intro. You are then met with an uncomfortable defensiveness, where Dude refuses to accept your professional advice.

      Lesson learned: Decipher whether your friend is looking for actual advice or just a pat on the back.

      2. “Um, would you mind designing my site… for free?”

      It’s shocking how many people feel truly entitled to a free web design. If you’ve ever had the pleasure of introducing yourself as a web designer, you may notice the wheels instantly starting to turn in your acquaintance’s mind. Everyone, even those without any product or any relevant thing to say, want, demand and need a website. These are the people, especially, who will want such a website produced for free. They may lure you with the distant hopes they use to fuel their own insanity: “Once I get some visitors, I’ll direct them to your services” (Standard practice, regardless).

      Lesson learned: Limit your charity cases to those you can do in your free time and only do it for charity because the only reward you’ll reap is psychological.

      3. “Can you help me design my site to look like ______?”

      This request is closely related to the first two requests. Perhaps Dude has taken it upon himself to designed a website, already had a moment of epiphany and now realizes that it sucks. At least you’re on the same page. Then comes, “I’d like my site to look just like Avatar. You know, all 3D and stuff.” Once you realize that Dude is serious, another realization also sinks in. If you take on this “consulting” project, all of your time and energy will be engulfed by this vortex, and you won’t be getting paid for your trouble. What’s the solution? Direct Dude to Yahoo! Answers? No, he’ll never go for that, because this is a top secret idea.

      Lesson learned: Find your inner ineptness and apply it to this situation. Feign ignorance, suggest peripheral design ideas such as blue color palettes and wait for your friend to get bored of the idea and come to his senses.

      4. “I think I have a virus.”

      No one likes to hear these words, and if someone’s sharing this information with you, they usually want one of two things: sympathy or help, sometimes both. When you hear these words come from a client, you must assume they are referring to a computer virus (let’s hope). This your client’s passive/ aggressive way of getting you to offer assistance. If you, wisely, remain silent, he or she will shamelessly ask you for your help. Just because you work in front of your computer all day does not mean that you qualify for tech support. You have to Google things just like everyone else.

      Lesson learned: Get the courage to finally direct someone to Let Me Google That For You. However, for professional relationships, avoid the snark and actually lightly research the problem, but make no promises and waste no longer than 15 minutes.

      5. “Let me help you with any of your extra work.”

      This favor comes in the form of a donated favor. In other words, Dude is suggesting that he’s doing you a favor, when he’s actually just trying to get paid. One morning you open your email box, and there’s an email from some dude you’ve never heard of. He wants you to lend him some of your work. Depending on your level of job-related stress, you may be inclined to offer him some work, but what’s this? No portfolio? No website? No spell-check. Wait, is Dude even located in the same hemisphere as you?

      Lesson learned: You get what you pay for.

      6. “So, it’s been a minute… How much longer is it going to take?”

      Just when you’ve got your Good Samaritan on and decided to help Dude during your free time, he starts becoming a diva. Never mind the impossible requests to make his website look just like *let your imagination run wild on this one,* or the countless revisions to a perfectly designed logo, or the endless hours you spent over IM trying to explain why putting an invisible list of keywords at the bottom of the webpage is unnecessary. When you least expect it, expect to receive a phone call, email, direct tweet saying, “Hey, so, um… when’s the project going to be finished?” You reply back, “Dude, I told you I was going to fit this in between my actual work from actual clients that actually pay.” To this, Dude replies, “I didn’t think it was going to take this long, maybe I should just get this professionally done.” Oh, that’s a killer. First of all, Dude has no consideration for the amount of time you’ve invested in this project. Secondly and more importantly, you are a professional. Why not offer you money so that you can prioritize his project?

      Lesson learned: Clearly state from the beginning that it will take you some ridiculously long amount of time to complete the project for free and if Dude’s still on board, he’ll be happy if you finish it sooner than expected.

      7. “Can I use your server until I get my own hosting?”

      What’s so wrong about this request? You have extra space and you can afford the bandwidth. The problem is that Dude will never get his own hosting, and eventually he’ll forget about his site. A year later, you’ll remind him, “Hey Dude, you know you still have your stuff on my server? I’m moving to another server, so is it alright if I get rid of it? You have a back up, right?” Dude will do one of two things: he’ll respond with indignant anger, upset that you’re rushing him to get his act together or he’ll pretend to be okay with it, all the while, holding a grudge.

      Lesson learned: Friends don’t let friends use their servers.

      8. “Hey, I volunteered you to re-do my co-worker’s step-daughter’s wedding album.”

      You can replace this with any task in which your mom volunteers your services for free. It’s always lovely to deal with someone who’s happy to accept your honest labor for free, because we all know they won’t make any unreasonable demands. The most difficult part of this ordeal is having to contend with your mother in her role as the merciless middleman who nags you for quality, timeliness and her good reputation.

      Lesson learned: Grin and bear it? There’s no real way to avoid this nightmare.

      What are some of the most annoying favors your friends and family have asked from you?

      About the Author

      JacquelineJacqueline is an artist and a writer who spends an inordinate amount of time playing Super Nintendo and watching Star Trek. You can find out more about Jacqueline on her website, and follow her updates on Twitter.

      Read more here:
      Top 8 Dreaded Favors Asked of Web Designers

      Freebies – Confetti Pack – Free Confetti Vectors, Brushes & Textures

      Monday, March 8th, 2010

      Hello all! First off, for those of you who didn’t know, I was out of the country all of last week (On me and my wife’s delayed Honeymoon!). That’s the reason there was no Tweets of the Week (It’s hard to setup a post, with Twitter links from the future ;) ) As you can see I had my other normal posts setup, ready to go. Hopefully yall enjoyed last weeks post about Type Foundries, and the inspirational work of Nick De Jardine. (And don’t worry, Tweets of the Week will return this week, with tons of cool links.)

      To start the week off, I’ve got a cool freebie pack for you. It’s Confetti! My nephew recently won some school contest, and they wrapped the prize in newspaper and confetti. He’s a smart kid, and he knows what I do, so he suggested I check it out. It was very cool. So I decided to make some Photoshop Brushes, Vectors and textures out of the confetti. I wanted to give yall a variety. I’m including samples below of a few of each, but check out the pack for much more. Enjoy!

      Vectors:

      WordPress Theme Releases for 03/07

      Monday, March 8th, 2010

      Turquoise

      turquoise

      The Turquoise Theme is a simple free WordPress Theme 980px wide with 3 Sidebars and an Option Page to populate the Footer. One Sidebar is on the right side optimized for Adsense 250px Ads. Two Sidebars are on top of the postings and below the Posting. Good for 468px Ads.

      Greener Side

      Greener Side

      Smell the fresh cut grass and feel the butterflies flutter past your face… It’s summer year round with this eye-catching fixed width two-column design.

      Wordsmith Blog

      Wordsmith Blog

      Two column, brown theme. Choose background colors, sidebar placement, and an optional adsense ready sidebar.

      5 Music WordPress Themes

      Producer 

      Share your music and videos, connect with fans, and let everyone know about your upcoming gigs with one of these music WordPress themes. Whether you’re a musician, DJ, or producer, one thing’s for sure — these widget-ready and Gravatar-enabled themes rock.

      See the article here:
      WordPress Theme Releases for 03/07