Programming Blog » Graphics

Photoshop Layer Styles in CSS3

Facebook-Web-Design — Fri, 29 Jul 2011 01:56:29 +0000

I just ran across this awesome project by Felix Niklas and it blew my mind. it’s an HTML5 app for creating CSS3 in an intuitive way. The interface is very similar to Photoshop and functions just like it as well. I wrote a little preview/breakdown/review of it.
Go to Source

CSS3 Buttons Experiment

Facebook-Web-Design — Fri, 29 Jul 2011 01:56:28 +0000

So I had a little fun last night and decided to experiment with some CSS3 buttons. I created eight different buttons so far. No images were used at all. I went wild with gradients and rounded corners.
Go to Source

PB iPhone Game Sneak Peek

Facebook-Web-Design — Thu, 28 Jul 2011 23:40:43 +0000

PB iPhone Game Sneak Peek from Carlos B on Vimeo.

Here’s a sneak peek of my upcoming iPhone game. The game will be in the Apple App Store hopefully very soon. The game is a breakout clone, but I’m trying to include new features to make it somehow a little different and unique. It’s my first game so will see how it turns out. Any feedback will be appreciated.

Follow me on Twitter/FaceBook to stay updated.
Follow on Twitter at: http://twitter.com/PixelelementCom
Follow on FaceBook at: http://www.facebook.com/pages/PixelElement/261577454405

Go to Source

10 Nature Inspired Urban Renewal Designs

Facebook-Web-Design — Thu, 28 Jul 2011 23:26:37 +0000

Advertise here with BSA

This is a guest post from Antonina of OpenBuildings - a community-driven and openly editable encyclopaedia of buildings from around the world. It’s a database of historic, contemporary and conceptual architecture that exists as a website and application for iPhone, and since last week - Android, which enable users to find, learn about and share nearby buildings of architectural merit.

Rising sustainability concerns over the last decade have brought about a fascinating new tendency in landscape concepts for development and renewal of urban and even industrial areas. Nature is coming back to cities and that’s a wonderful opportunity for us to get back to it too. Experience the mesmerizing beauty of these nature bites inserted into urban context and let’s hope this is the future of landscape architecture!

James Corner Field Operations & Diller Scofidio + Renfro: The High Line

Mayfield Organic Lavender Farm

Albert Kahn & William McDonough + Partners: Ford River Rouge Complex

Burckhardt+Partner AG & Raderschall: MFO Park

West 8: Garden of 10 000 Bridges

coLAB studio: Bird and Butterfly Garden

Balmori Associates: Bilbao Jardín

Turenscape: Shanghai Houtan Park

Urbanarbolismo: Vertical Garden

Groundlab + Plasma Studio: Flowing Gardens

This is a post from Inspired Magazine. If you like it, you may want to subscribe to our RSS full feed to be updated on every article we’re publishing. Also, it’s highly recommended to follow us on Twitter!

10 Nature Inspired Urban Renewal Designs

Go to Source

Boosting Your Social Media Reach by Updating Your Tech

Facebook-Web-Design — Thu, 28 Jul 2011 23:25:07 +0000

Advertise here with BSA

As the next evolution of the Internet, the social Web is such a massively diverse and dynamic atmosphere that simply refuses to rest. What began as a casual conduit for the masses to connect with one another, logically progressed into a largely adapted standard even on the business segment.

But while these businesses have standardized their own specific processes, implementations and social media strategies, it’s also crucial to adapt to the freshest trends and technologies. These not only provide your company with countless ways to jumpstart your online traction, and invigorate your existing marketing plan’s progress.

Here are four technologies (and some not-so new ones) that you can utilize that can definitely help boost your business’ social media reach.

HTML5

For those not in the know, HTML5 is the next iteration of the Internet’s code base. But while it’s yet to be formally established as the Web standard, it’s already in wide use among popular Web sites given its new features that are significantly beneficial for search engine optimization (SEO) and social media marketing. Among the new updates are specific tags and attributes for multimedia and graphical elements that can help you better deliver your content to your site visitors without needing to install additional browser extensions or plug-ins for playback.

Moreover, HTML5 also offers an optimized set of features that enable search engines like Google and Bing to easily index your Web site or blog. This, of course, ramps up your brand’s visibility and increases its discoverability online, helping you engage with your targeted demographic and reach out to untapped segments.

Mobile Tech

Mobility has become an important part of most businesses, and it will prove to be among the most valuable tools in your social media arsenal. You can leverage on a variety of wireless connectivity options, your phone’s set of features, and many available apps to accomplish multiple tasks even when offsite. This can run from simple content creation, stat tracking, site maintenance, and account management, among many others—all can help make your regular workload a cinch to complete.

For the front-end, you’ll need a mobile site specially optimized for smartphones to increase your presence on the mobile Web (check out Mobify, WPtouch). You can also take advantage of mobile phones’ capabilities and integrate them into your social media marketing campaigns. Features like geolocation, augmented reality, mobile apps, text messaging, voice capabilities, and the built-in camera are among the most common features being utilized by social media marketers today.

Cloud Computing

Cloud computing is one of today’s most progressive technologies that continue to drive businesses forward. It offers companies with ways to expand their businesses, offer value-added products and services, and enhance their accessibility. This will also effectively trim down your IT costs, significantly reducing the expenses usually relegated to purchasing and maintaining of natively hosted hardware, and the acquisition of software licenses.

And it can be a great route for your company to take that will expand both the delivery of your services, better the campaign management and tracking, and can invigorate how you can engage with your potential customers.

From the back-end, you have cloud-hosted word processors with multi-user collaborative capabilities, online storage, and a handful of apps that can help you track your progress and manage every aspect of your campaign. And on the front-end, you can integrate the use of various apps for engaging with your followers. You can even create your own specifically developed to up your branding efforts, and make sure you get to specifically reach your goals.

Social Media Sites

Just because Facebook and Twitter are the most popular sites out there, it doesn’t mean they’re the only ones your brand should be on. While the aforementioned social networking giants can get you a lot of attention from your demographic, they can only do so much as far as capabilities are concerned. And as creative and as innovative as your marketing ideas are, this can limit your campaign’s progress and stem your brand’s growth online.

To get the most out of the Web, updating your social media arsenal can be the best thing you’ll do for your business. Out there you’ll find other channels for carrying your marketing strategies, some better than others, but it’s important to keep in mind exactly what it is you intend to achieve. For this, you may consider including sites like YouTube, Tumblr, Yelp or even Formspring — that is if their features and user base truly address your needs.

header image via Totally How To

Boosting Your Social Media Reach by Updating Your Tech

Go to Source

33 Curious Uses of Periodic Tables – Great Visualizations or Mendeleev’s Worst Nightmare?

Facebook-Web-Design — Thu, 28 Jul 2011 23:22:13 +0000

Advertise here with BSA

One of the first contacts we all have with a data visualization, in the early stages of our academic life, is the Periodic Table of Elements. I know, we do graphs and charts way before that, but, really, is there a more universal, and recognizable, visualization in the world?

And not to mention that it goes way back, more than 200 years of history, which makes it one of the first modern data visualizations, as well. If want to fully understand the history, and evolution of the Periodic Table of Elements, a good place to start is the Wikipedia article.

But what we’ll be showcasing here are some…how should we call it…deviations of the original one.

Because, as you will see, the term “Periodic Table” has gone far beyond the original scientific use…

Periodic Table of World Internet Facts | Via

The Periodic Table Of The Social Web | Via

The Periodic Table Of SEO Ranking Factors | Via

Periodic Table Guide to Google’s APIs | Via

You have it for businesses, organizations, sports and several other occupations…

Arsenal’s Periodic table | Via

Everton F.C. Periodic Table | Via

Periodic Table of Professional Cycling | Via

The Periodic Table of Business Cards | Via

Periodic Table of Storytelling | Via

Periodic Table of Artists | Via

Periodic Table of Typefaces | Via

The Periodic Table of Nickelodeon | Via

Also, covering serious issues…

Periodic Table of Elements, in Pictures | Via

Periodioc Table of Food | Via

Periodic Table of Dessert | Via

Periodic Table of Disasters | Via

Periodic Table of Terrorist Organizations | Via

…and not so serious…

Periodic Table of Smellements | Via

Periodic Table of Beer | Via

The periodic table of awesoments | Via

Periodic Table of Vulgarity | Via

Periodic Table of Irrational Nonsense | Via

Periodic Table of Swearing | Via

And you even have it for places:

Periodic Table of Hong Kong | Via

Let’s not forget entertainment!

The Periodic Table of Mad Men | Via

Periodic Table of Sci-Fi Film and Television | Via

Periodic Table of Science Fiction | Via

Periodic Table Of Super-Powers | Via

Periodic Table of The Empire Strikes Back | Via

Periodic Table of Videos [Interactive] | Via

Periodic Table of Controllers | Via

Periodic Table of Final Fantasy Characters | Via

And, last, but not least…

The Periodic Table of Periodic Tables | Via

I’m pretty sure that you’ll find some other “periodic table extravaganzas” out there. If so, feel free to share them!

33 Curious Uses of Periodic Tables – Great Visualizations or Mendeleev’s Worst Nightmare?

Go to Source

33 Curious Uses of Periodic Tables – Great Visualizations or Mendeleev’s Worst Nightmare?

Facebook-Web-Design — Thu, 28 Jul 2011 23:22:08 +0000

Advertise here with BSA

But what we’ll be showcasing here are some…how should we call it…deviations of the original one.

Because, as you will see, the term “Periodic Table” has gone far beyond the original scientific use…

Periodic Table of World Internet Facts | Via

The Periodic Table Of The Social Web | Via

The Periodic Table Of SEO Ranking Factors | Via

Periodic Table Guide to Google’s APIs | Via

You have it for businesses, organizations, sports and several other occupations…

Arsenal’s Periodic table | Via

Everton F.C. Periodic Table | Via

Periodic Table of Professional Cycling | Via

The Periodic Table of Business Cards | Via

Periodic Table of Storytelling | Via

Periodic Table of Artists | Via

Periodic Table of Typefaces | Via

The Periodic Table of Nickelodeon | Via

Also, covering serious issues…

Periodic Table of Elements, in Pictures | Via

Periodioc Table of Food | Via

Periodic Table of Dessert | Via

Periodic Table of Disasters | Via

Periodic Table of Terrorist Organizations | Via

…and not so serious…

Periodic Table of Smellements | Via

Periodic Table of Beer | Via

The periodic table of awesoments | Via

Periodic Table of Vulgarity | Via

Periodic Table of Irrational Nonsense | Via

Periodic Table of Swearing | Via

And you even have it for places:

Periodic Table of Hong Kong | Via

Let’s not forget entertainment!

The Periodic Table of Mad Men | Via

Periodic Table of Sci-Fi Film and Television | Via

Periodic Table of Science Fiction | Via

Periodic Table Of Super-Powers | Via

Periodic Table of The Empire Strikes Back | Via

Periodic Table of Videos [Interactive] | Via

Periodic Table of Controllers | Via

Periodic Table of Final Fantasy Characters | Via

And, last, but not least…

The Periodic Table of Periodic Tables | Via

I’m pretty sure that you’ll find some other “periodic table extravaganzas” out there. If so, feel free to share them!

33 Curious Uses of Periodic Tables – Great Visualizations or Mendeleev’s Worst Nightmare?

Go to Source

iNoobs: Top 12 Web Design Guidelines (For Print Designers)

Facebook-Web-Design — Thu, 28 Jul 2011 23:21:03 +0000

Advertise here with BSA

"Ohhhh God!! I love web design."

Welcome to another edition of the iNoobs series – where we teach you how to become a web developer (and how to grow lots of body hair and shoot omega beams from your eyes – because ya’ll know that’s the only thing that can defeat Superman).

Comic book geeky-ness aside I was asked the other day to help a friend get into web design…

“Holy f$%k,” I cursed at my grandmother… “I can combine two loves, kill two birds if you will. I can help my friend (aka my grams) and write a great post for the iNoobs series…”

(Is he already calling this a “great post”, sometimes I like his cocky writing style… sometimes it’s just too much. And is his “friend” his grandma?)

Yes… and… the parenthesis means YOU’RE thinking it…

On to the design juice…

Top 12 Web Design Guidelines (For Print Designers)

I know a lot of you out there are fantastic designers.

You can mouse through photoshop, clickety-clicking like there’s no tomorrow.

You can draw vectors in Illustrator like a boss (sometimes spelled BAWSE for effect).

You can layout stuff out in InDesign that would give any typophile a Times New Roman Orgasm. (Is that a font joke…?)

“I’m not sure, just stay with me.”

But you want to know more about web design.

Well, if you’re like my friend – as well as a few designers I’ve coached while working at an ad/marketing agency – you’d like to create some sweet designs for the web, but have some questions like, “Where do I begin?“

Unfortunately, I’ve tried simply telling designers to “open your eyes” but that never seems to work – but let’s start there anyway. Before we get to our bulleted list goodness:

OPEN YOUR EYES (BTW I’m saying this in a sultry Penelope Cruz voice)

As you move throughout the web pay attention to how everything is layed out. Pay attention to everything that has been taken into account (or haphazardly mashed together by the devs). Look at the margins, the size of the site, its behavior as you scroll, the consistency of titles, and boxes, and advertisement space and… EVERYTHING.

Then I would start by replicating the design of one of your favorite sites. That’s how I started. Just go find a beautiful site and… do it again, in photoshop or your application of choice (oh shit, I used the word application – when I used to use “program” apple is taking over).

Go recreate and enhance it. Add stuff and play with things. You’re a designer you probably have a good eye for design (and hopefully beautiful eyes in general) and will be able to move through your changes tossing the chaff and keeping your delicious wheat.

But, if you must have a complete break down here are my… Top 12 Web Design Guidelines (for Print Designers)

1) Photoshop

Preferably work/design in Photoshop (or export final design to a photoshop friendly format).

We coders like this because of layers. Layers rock for design, and for cutting up HTML/CSS.

While working within Photoshop or other software make sure colors are set to RGB and the resolution of the document you’re working on is 72DPI (but these are both defaults). It’s important to make sure to keep your design file organized (if using photoshop, keep your layers organized) using groups, and naming. Part of the next steps of cutting up a design into HTML & CSS require that we get to very specific portions of the design and organization helps reduce that time.

2) Design Resolution/Image Size

When considering the size of the website almost 100% of the time we go with a fixed width (set number of pixels) and centered design. If you’ll be following this same recommended path you’ll need to then set a maximum size for the design (boundaries for which all of the content falls under. For smaller screens 760px is recommended, however with larger and larger screens more readily available the de-facto is currently 960px as it allows lots of design freedom, as well as space for advertising and multiple columns worth of content.

Additional Resources – http://960.gs/

3) Background

It’s important to illustrate in the design how the background will be handled so that it can be coded properly. There’s a number of different options here:

Static Background (simple color or image)
Tiled Background (vertically or horizontally)
Static Background (an image that stays in place despite scrolling)

Additional Resources – http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/

4) Navigation

The main site navigation should (in my opinion) almost always be positioned at the top – and only in extreme situations to the side of the site. If you must put it on the side – position it to the left. The site navigation should be one of the most prominent elements on the page and should be consistent across the whole site.

5) Fonts

It’s important to understand that photoshop by default will anti alias text (make it look rounded and pretty onscreen – this is the “strong, sharp, etc.” setting) and has a host of EXTRA fonts unavailable to most users.

Most modern web browsers however don’t make font’s look pretty they stay jagged and that most users won’t have specialized fonts (see additional resource for most common web friendly fonts). Unlike colors, which you can display as many as you’d like (“web friendly colors” are no longer important to adhere to) fonts are a different story. Although fonts can be specially imported to create a unique design that is consistent for all users, it is usually done so at the cost of speed – it takes time for the user to download the tools required to have this done. I’ve played around with the flash versions and javascript version of embedded fonts and although both can work exceptionally well – they can seriously slow down the speed of your website!

Additionally, when converting the design into HTML, we’ll need to make sure we have the same fonts (in the cases where fonts are to be implemented exactly) should you want to use a custom font.

Web safe fonts (render the quickest/easiest) – http://www.fonttester.com/help/list_of_web_safe_fonts.html
Google Font Library – all fonts can be quickly and easily implemented (and SEO friendly) but will slow down end user computer http://www.google.com/webfonts#ChoosePlace:select

6) Headers/Titles

Much like the fonts consideration it’s important to consider headers. Any titles on the site (big areas of text usually signaling a page title) are considered “headers” being consistent here (using a similar font and style) will help in the conversion process.

7) Content

Although the fancy images and colors are important the single MOST important thing is your content (text!) – it’s probably the most space any single element will need to take up, and will take the most time of your user (reading) so consider the type/font, the contrast between the content and the background it sits on, as well as secondary elements (for example a blog/news section will typically have a comment section, a box listing the author, date, etc.).

Details

Often the best designs are very simple but with consistency and very specific tiny details. For example just adding a slight border and drop shadow to a box can make a world of difference. Great web design is all about those kinds of tiny details, both on the home page as well as throughout the site.

9) Colors/Links

Because of screen discrepancies and considerations for eye site problems it’s recommended to contrast your colors as much as possible, particularly links. Although this is ultimately an esthetic decision, contrast can really help ease the use of a website.

10) Graphics

If additional graphics are to be provided it’s important to consider file size, we try to compress all graphics as much as possible when posting to the web. For example JPG’s are typically compressed to 60% (good balance of size/quality), but Gif’s are used in places where not a lot of colors are important, and PNGs are used when transparency in an image is necessary. Because the design is to be provided as a PSD this is a moot issue unless other graphics/images are to be sent or uploaded to the site later on.

11) Goals

For each page being designed it’s helpful to sit down and come up with 3 goals (with a major goal on top) for a single page and then design so that you feel those goals are met easily and simply conveyed to a new visitor.

Then test – have a friend come over (perhaps your grandma) and see what the design communicates to them. Remember everyone is different and will have an opinion so although use cases and surveys like this are helpful – stick to your own gut. And seriously, old people make perfect test cases – they are rarely extremely computer savvy and typically get angry quickly so you’ll be able to tell if your design is not “up to snuff” (that’s an old person saying right?) by the fact that there’s now a keyboard lodged in your monitor.

JK – I love old people.

12) Consistency

Be consistent in the overall design, particularly the navigation, title, and page elements. Although typically a homepage will look much different than internal pages consistency is important in communicate the flow of the website.

iNoobs: Top 12 Web Design Guidelines (For Print Designers)

Go to Source

iNoobs: Top 12 Web Design Guidelines (For Print Designers)

Facebook-Web-Design — Thu, 28 Jul 2011 23:20:54 +0000

Advertise here with BSA

"Ohhhh God!! I love web design."

Comic book geeky-ness aside I was asked the other day to help a friend get into web design…

“Holy f$%k,” I cursed at my grandmother… “I can combine two loves, kill two birds if you will. I can help my friend (aka my grams) and write a great post for the iNoobs series…”

(Is he already calling this a “great post”, sometimes I like his cocky writing style… sometimes it’s just too much. And is his “friend” his grandma?)

Yes… and… the parenthesis means YOU’RE thinking it…

On to the design juice…

Top 12 Web Design Guidelines (For Print Designers)

I know a lot of you out there are fantastic designers.

You can mouse through photoshop, clickety-clicking like there’s no tomorrow.

You can draw vectors in Illustrator like a boss (sometimes spelled BAWSE for effect).

You can layout stuff out in InDesign that would give any typophile a Times New Roman Orgasm. (Is that a font joke…?)

“I’m not sure, just stay with me.”

But you want to know more about web design.

Unfortunately, I’ve tried simply telling designers to “open your eyes” but that never seems to work – but let’s start there anyway. Before we get to our bulleted list goodness:

OPEN YOUR EYES (BTW I’m saying this in a sultry Penelope Cruz voice)

But, if you must have a complete break down here are my… Top 12 Web Design Guidelines (for Print Designers)

1) Photoshop

Preferably work/design in Photoshop (or export final design to a photoshop friendly format).

We coders like this because of layers. Layers rock for design, and for cutting up HTML/CSS.

2) Design Resolution/Image Size

Additional Resources – http://960.gs/

3) Background

It’s important to illustrate in the design how the background will be handled so that it can be coded properly. There’s a number of different options here:

Static Background (simple color or image)
Tiled Background (vertically or horizontally)
Static Background (an image that stays in place despite scrolling)

Additional Resources – http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/

4) Navigation

5) Fonts

Additionally, when converting the design into HTML, we’ll need to make sure we have the same fonts (in the cases where fonts are to be implemented exactly) should you want to use a custom font.

Web safe fonts (render the quickest/easiest) – http://www.fonttester.com/help/list_of_web_safe_fonts.html
Google Font Library – all fonts can be quickly and easily implemented (and SEO friendly) but will slow down end user computer http://www.google.com/webfonts#ChoosePlace:select

6) Headers/Titles

7) Content

Details

9) Colors/Links

10) Graphics

11) Goals

JK – I love old people.

12) Consistency

iNoobs: Top 12 Web Design Guidelines (For Print Designers)

Go to Source

How to: Create a Dashboard Feed Reader for Your WordPress Theme or Plugin

Facebook-Web-Design — Thu, 28 Jul 2011 23:20:18 +0000

Advertise here with BSA

This is a guest post by Konstantin Kovshenin — a WordPress core contributor, developer and consultant. Editor in chief of Theme.fm — tutorials, tips and tricks on WordPress themes and plugins, setup, security and performance, as well as WordPress consulting. Follow Konstantin on Twitter and don’t hesitate to poke him should you need any help.

WordPress themes (both free and paid) nowadays come bundled with a lot of different kind of options — color schemes, custom post types, portfolio pages, contact forms, custom shortcodes and much more. These are the kind of things developers usually offer to their users, but what do they get in return? Well if it’s a paid theme they obviously get some money and if it’s a free one, donations are more common. But there’s one thing you always get in return as a WordPress theme (or plugin) author, and that’s awareness.

Whether it’s yours, or your brand’s, awareness is what gets people to know you in the community, therefore building trust. Trust brings you more visitors to your website or blog, more chances of getting hired for a project and of course a little bit of fame and respect.

Today’s topic is a Dashboard Feed Reader, which is quite a simple widget hanging in your admin dashboard screen, showing the latest stories from your blog. Such widgets often drive more traffic to your website and gets people to read (at least) your headlines directly from their WordPress admin panel. A dashboard reader is a great way to announce new versions of your themes or plugins, as well as promote your new products.

People often think that dashboard readers are distracting or annoying, but the good thing about WordPress is that the Dashboard is actually configurable. In only a couple of clicks, any user can enable or disable any of their dashboard widgets, leaving on screen only the stuff that’s important to them. It’s done via the Screen Options button at the top right of the Dashboard page. So dashboard readers are way more loyal and user friendly than hard-coded links or banners on the front end of your theme or plugin.

Understanding Dashboard Widgets

Dashboard widgets in WordPress are actually meta boxes. They’re used in other places too, like the Edit Post or Page screen. They can be dragged around, shown or hidden from the Screen Options menu, collapsed and expanded by hitting the tiny arrow on the right side of the box titles. But hey, you should probably know that already!

Meta boxes are registered with the add_meta_box function but the ones on the Dashboard screen have a function of their own called wp_add_dashboard_widget which should be used during the wp_dashboard_setup WordPress action. So with that in mind, let’s go ahead and write some code.

Creating a New Dashboard Widget

In this tutorial I’ll be creating a dashboard feed reader for Theme.fm. The reader can then be bundled in a theme or plugin and the implementation doesn’t differ at all. So in your plugin file or the functions.php file of your theme, type in the following snippet.

It’s quite simple to understand what it does. I’ve got two functions, one for the dashboard setup and another one for the actual content. The content function is used as a callback during the setup of the widget, while the setup function is used in an action as I mentioned earlier. You can furthermore nest this into an admin_init action, since the dashboard is not available elsewhere, but that won’t have any noticeable impact on your site’s performance.

If you browse to your Dashboard at this stage, you’ll see a new widget called Latest from Theme.fm with the contents that we wrote in the second function. Guess what? You’re done! With the widget, that is… That’s all there is to it adding new dashboard widgets, you can move it around, expand or collapse it, and even turn it off and back on from the Screen Options panel.

Now, before you start shipping this piece of code with all your new themes and plugins, let’s fill it in with some actual content. You can go ahead with “lorem ipsum” but I suggest getting the content from your RSS feed, so that’s what we’ll do next.

Gathering Content From Your RSS Feed

WordPress itself comes bundled with SimplePie and FeedCache to work with the internal stuff, which means that we can use the exact same functions for our own functions. SimplePie is quite easy to work with as you’ll see in a second. WordPress allows a neat function called fetch_feed which could be used out of the box, provides feed parsing and caching and all that for free, without any extra coding. Go ahead and try it out in that content area where you were about to stick “lorem ipsum”

This will print all the feed contents (if there was no error retrieving them) in a nicely structured object. Get familiar with the structure, see what content is available and what’s not. There are neat SimplePie functions that we can use against that object to retrieve the data in the format we want, like dates for instance.

To spare you the hassle, here’s what my content function looks like after implementing the feed contents:

So double check the $feed variable in case it returned an error. Set the maximum number of items to yield to 5 and then, with a simple foreach loop, walk through all the items and print them out in a nice looking way — with permalinks, dates and descriptions.

That’s about it, that’s how easy it is to use SimplePie inside WordPress and again, caching is given to you for free, without even having to activate it or whatsoever, so if you refresh the dashboard screen you won’t notice any lags at all! Here’s what your new dashboard screen should look like, now with the new feed reader:

Congratulations, you’ve just built yourself a feed reader, which you can bundle in your themes and plugins, free and paid ones. You just got your users to read your blog directly from their admin panels, unless the deactivate you of course

Conclusion

So in this tutorial you’ve seen how to create your very own dashboard feed reader, getting more readers to your blog and awareness to you or your brand. In only a few lines of code, we’ve registered a new dashboard widget, then used SimplePie to fetch an RSS feed and display the content, with built-in caching.

A word of caution is that if you’re planning to bundle the reader in numerous themes and plugins, think about what will happen if somebody activates one of your theme, together with three of your plugins? You don’t want your users to end up with four dashboard readers, right? There are numerous techniques to avoid this, my favorite one is constants. I basically wrapped up the whole widget code into a class which I initialize during admin_init. I then wrapped the code into a simple if statement, like this:

Including the same constant in every theme and plugin you ship, you’ll make sure that only one instance of the feed reader is created. You might also want to use the class_exists PHP function if you’re planning to use the same class names for your reader in all the themes and plugins.

Well, that’s about it! Hope you enjoyed this tutorial and make sure you use it with caution, plus test before shipping. Thank you so much for reading and hope to see you again soon!

How to: Create a Dashboard Feed Reader for Your WordPress Theme or Plugin

Go to Source

How to: Create a Dashboard Feed Reader for Your WordPress Theme or Plugin

Facebook-Web-Design — Thu, 28 Jul 2011 23:20:13 +0000

Advertise here with BSA

Understanding Dashboard Widgets

Creating a New Dashboard Widget

Gathering Content From Your RSS Feed

To spare you the hassle, here’s what my content function looks like after implementing the feed contents:

Conclusion

Well, that’s about it! Hope you enjoyed this tutorial and make sure you use it with caution, plus test before shipping. Thank you so much for reading and hope to see you again soon!

How to: Create a Dashboard Feed Reader for Your WordPress Theme or Plugin

Go to Source

10 Colour-Inspired Buildings to Light up Your Day

Facebook-Web-Design — Thu, 28 Jul 2011 23:17:52 +0000

Advertise here with BSA

This is a guest post from Antonina of OpenBuildings – a community-driven and openly editable encyclopaedia of buildings from around the world. It’s a database of historic, contemporary and conceptual architecture that exists as a website and application for iPhone (and any moment now – Android) which enable users to find, learn about and share nearby buildings of architectural merit.

Until recently, the furthest architects would habitually take colour exploration would be seen in children-oriented buildings, while “serious” and “representative” edifices would stick to the proven elegance of black & white aesthetics and thoughtful use of natural materials. The reasons for the above-mentioned phenomenon could perhaps be attributed to the modernist legacy of subtly despising decoration. However, colour and light are inseparable and both possess an impressive potential to influence mood, behaviour and perception. La Defense Offices: a 23.000 m² ode to iridescence, whose colours and brilliance depend strongly on weather and light conditions was ‘designed with the office tenants in mind’ and sets a wonderful example of how architecture – armed with understanding and appreciation of colour – can create a refreshing and surprising environment for routine activities. Hopefully, today’s pick of colour-inspired buildings will be able to light up your day too!

Jean Nouvel: Hotel Puerta America in Madrid, Spain

MVRDV: Didden Village in Rotterdam, Netherlands

UN Studio: La Defense Offices in Almere, Netherlands

Rojkind Arquitectos: Nestlé Application Group Building in Querétaro, Mexico

Rudanko + Kankkunen: Sra Pou Vocational School in Sra Pou village, Cambodia

Asymptote Architecture: The Yas Hotel in Abu Dhabi, UAE

Neutelings Riedijk: Netherlands Institute for Sound and Vision in Hilversum, The Netherlands

Luis Barragán: Cuadra San Cristóbal near Mexico City, Mexico

D. Villanueva Arquitectos: Rioglass Solar Production Plant in Pola de Lena, Spain

Kengo Kuma & Associates: The Opposite House in Beijing, China

10 Colour-Inspired Buildings to Light up Your Day

Go to Source

iNoobs: The DNS Trick EVERY Developer Must Know

Facebook-Web-Design — Thu, 28 Jul 2011 23:16:45 +0000

Advertise here with BSA

This is a guest post by Zach Katkin – entrepreneur, web developer, designer and writer – co-founder of Florida Web Design Company Atilus. Additionally Zach also owns a number of web properties including Promana.net, a resource for Small Business Software News including Basecamp Project Management.

So in the Inspired Noob series we’ve been talking a lot about DNS. With that said there was a trick I learned a few years ago (I think it was thanks to my hosting company support). This trick does a number of things:

Saves countless hours on development
Removes client intervention/help from the development process
Allows you to secretly work on ANY website, view the results live and in real time, while the rest of the world is none-the-wiser

So what is this DNS panacea? What simple trick can solve all these problems?

Adjusting Your Local DNS File

For a quick refresher on how DNS works you can review our post on How Does DNS Work? But one thing I purposely left out was that – as a last resort – your computer’s OS stores a DNS file that it uses to resolve (match) domain names to IP addresses. Because it’s local and manually updated, changing or adjusting this file means you can FORCE your computer to look at ANOTHER IP ADDRESS for ANY DOMAIN.

Example in Action

Lets say you’re working on your client’s site at HorseMagnet.com – they want a completely new design AND they want you to host it. But, they’re hosted somewhere else currently. You don’t yet have the information (or the time/desire) to transfer their hosting over. You want to just setup their site on your server and type in HorseMagnet.com and begin working and finalize your design.

By modifying your local host file, this is possible – and easy. You’ll be forcing (in a total violent sexual way) your browser/computer to view your own hosting when typing in HorseMagnet.com.

How to Modify Your Local Host/DNS File

Open Up Notepad – If you’re on a fancy version of Windows – Vista/7 - you may need to run notepad as an administrator. You can do this by right clicking Notepad’s icon and selecting “run as administrator.”
Open up the host file in windows – C:\Windows\System32\drivers\etc\hosts
Edit the file based on what changes you want to enforce. Start with the IP address of the area you’re forcing your browser/computer to look at (probably the IP Address of your server) then *tab* and the domain name you’ll be forcing. Now it’s important to remember that you’ll need to include BOTH www. and non-www versions as each is considered a different location.
Save the file
Now there’s two things you can do – either restart your computer – or if you don’t want to waste time…
Close your browser
Open up command prompt (CMD in “run”/”search” box)
type “ipconfig /flushdns” (without quotes)
Relaunch browser and visit your website
You’ll now see your server instead of the live site

That’s it… now you can edit and play with your new site to your heart’s content and see the changes immediately. And the rest of the world has NO idea! It looks live, and in a way it is, but because of the way DNS works, nobody can see these changes yet. And when your HorseMagnet.com is just the way you and your client want it you can change the DNS settings for real for the domain and voila! The site is now live to the world!

iNoobs: The DNS Trick EVERY Developer Must Know

Go to Source

10 Best Flickr Groups Featuring Original Toy Photography

Facebook-Web-Design — Thu, 28 Jul 2011 23:16:25 +0000

Advertise here with BSA

Love toys? Love photography? Have you ever considered combining the two? Toy photography has been a major source of photo inspiration for years. The look of a doll or stuffed animal captured in a certain way can have a major emotional influence, and we have seen examples of that in the prevalence of abandoned or damaged toys used to set the tone for tragedy in various medias.

But what is great about toy photography is the versatility. You can create any feeling from a shot of a toy, and there are endless possibilities for creating scenes or just having fun. Flickr has a whole lot of groups that are dedicated to this purpose. Below are a collection of what I think are the ten best of the lot.

1. Toys

This is perhaps the largest toy-centric photo pool group on Flickr. It is dedicated to pictures about any kind of toy, from stuffed animals to retro wind-up numbers. There are more than 243,000 pictures already posted by the astonishing 18,000-plus members. But what makes it so great is the quality of most of the photos.

You would expect that a large number would result in a less concentrated level of quality. But there are very few bad pics there, and some that really some true ingenuity.

2. Toy Tuesday and Thursday

This is a really interesting photo challenge. It works by daring toy photographers to take a picture every Tuesday and Thursday for a year. In addition to this, there is a second challenge every two weeks where you take a photo starting with a different letter of the alphabet for that week.

The end result is an impressive set of 104 photos at the end of the year. This used to be a once a year challenge that has now been opened up to anyone year-long. Don’t worry if you are late joining…you can go from the date you start.

3. Excellent Photography Toy Awards

This is one of the biggest official award groups for toy photography. It works by either submitting your work or anything it invited by an existing member. It is then put into the photo pull and voted on. Since they refuse to take anything but the very best you are looking at some very stiff competition. They are also a group that has been voted sweeper active, which means for every photo you submit or accept an invite for you have to vote on thre.

4. Toys Take Over

A basic but well-populated group where anyone who likes photographing any kind of toy can join. They have more than 36,000 pictures already, and it is a good place for beginners to show off their work and watch the progression of other photographers.

5. Toys On Black

I have always liked the look of simple shots on black backgrounds more than any other. Between the shadows it creates and the dramatic but subtle tone, it is a great way to enhance a picture before you even take it. Toys On Black agree, and they have an entire group dedicated to the principle. They have a current three per day posting limit, though sometimes this is more or less, depending on how much activity they have had in recent weeks.

6. The Other Side

I personally love this group. Unlike other toy photo pools on Flickr, this one has a specific purpose related to the shots themselves, not the subject. While all photos should be of toys, the objective is for them not to look like toys. Or, at least, to have something in the shots that give them a sense of realism, movement or life. The members have done some incredible work, and you will see what I mean by that description if you check them out.

7. Toy Shooter Assignments

This is a directive specific group. When you join you will be able to see the current assignments that have been decided on through member voting. From there you can participate in photo opportunities that involve toys.

They might be to shoot something starting with a letter of the alphabet or from a specific time period. Maybe the toys will have come from a second hand shop or flea market, or be related to a film or television show. They have regular group directives to choose from.

8. Comic Book Toys

This group has been subject to a bit of confusion lately. It is not a group for comic book pictures or photos. It is for toys relating to comic books or characters from graphic novels. While a comic book can be present in the photo, it has to be toy specific.

Otherwise it will be deleted and you will receive a warning. However, if you are a comic book toy or action figure lover, then this is the place for you. Their open gallery has some amazing scene shots created with action figures, as well. My personal favorite so far is one of Doctor Who (Christopher Eccleston).

9. Secondhand Toys

I have found some amazing items there, including some fantastic art and toys at the thrift store. This group is for taking pictures of toy items that have come from secondhand shops from anywhere in the world. Flea markets, swap meets and other similar sources are also welcome. Considering some of the odd things you can find at thrift shops, this can be a fun little exercise. I know I have seen some horrifying – but fascinating – little treats there in my time.

10. Plastic Toy Soldiers

Another great little group, this one centers on those old plastic soldiers, the ones that come with a stiff base and poses. The pictures are scenes that have been created using this retro toys, and there are some really cool ones. If you were a kid who liked to play toy soldiers back in the day, this might be just the place you want to be.

10 Best Flickr Groups Featuring Original Toy Photography

Go to Source

HOW TO: Organize Web Development Projects Like a Pro

Facebook-Web-Design — Thu, 28 Jul 2011 23:16:00 +0000

Advertise here with BSA

This is a guest post from Jay Melone, founder @ DigitalXBridge, which provides web and mobile design + development, SEO, eMail Marketing and hosting services out of the NYC area.

While web designers and developers are touted as being the tech-savvy and brilliantly creative types, they also have the unfortunate rap of being some of the most disorganized individuals on the planet. Luckily, most design shops come equipped with overly attentive, detail-oriented project managers. For those freelance designers working solo, or small web shops still operating in cowboy-code-slinging mode, this post is especially for you. Take some notes on the process employed below and begin pitching your services as Grade-A Professional. These process tips and tools will help you stay on top of your deliverables, submit dates to your clients you can reasonably hit, track changes requests along the way and, in the end, deliver a quality product. Do all of this well and expect your customers to become your word-of-mouth marketing evangelists, overnight.

Note: I’ll be speaking to traditional desktop browser web design and development (PHP).

Phase 1: Research & Analysis

If you’ve ever heard the expression “measure twice cut once”, this the measuring phase. During R&A you’re familiarizing yourself with the client, their project, their business and their industry. Before you can spend a minute on actual design and development, you should immerse yourself in the client’s vision. This is not only important in nailing the proposal/estimate, but helps ensure you build what the client asked for and avoid costly changes to scope and aesthetics at the 11th hour.

Before any exchange of information takes place, be upfront and ask the lead/client if they’d like you to sign an NDA. This will show you’re considering their IP (intellectual property) in their best interest and help avoid any awkward feelings some clients may have about asking you to sign one in the first place.
Project intro questionnaire — At DigitalXBridge we have a tailor-made questionnaire we ask all of our new leads/clients to fill out. It’s a 1-pager, so it’s short enough not to overwhelm the client with homework on day one, but insightful enough to provide the answers to 90% of the introductory Q&A that takes place at the outset of a new engagement.
Follow-up discussion — Once the client submits the questionnaire, give them a call and go through each answer provided to make sure you’re both on the same page. It’s also a good idea to take notes for both you and the client during this discussion. Later, the client can review the notes again in writing. Measure twice.
Proposal (aka Estimate or Quote) — Now that you and the client are speaking the same language, it’s time to take those line items and start applying effort and costs to each. We use FreshBooks for all of our accounting, including estimate-writing. The more detailed a proposal, the less questions you’ll have to field and the more the client will understand how you arrived at the numbers you did. If you send them a 1-liner with one big number at the bottom, expect your phone to ring with a confused and frustrated client, at best. At worst they walk away without giving you the chance to explain yourself. Ride the transparency train as often as you can.
Review the Proposal with your client and discuss next steps — If the project is approved, now is when you should gather up 3rd party credentials such as registrars, hosting accounts, payment gateways, SSL certs, etc. If you use any project management software (we use Basecamp), this is also a good time to officially kick off the project whereby all previously gathered notes are dumped in the project workspace and some early to-dos and milestones established.
Site Plan — The final step of the R&A phase, and only once the project is approved, is the site plan. The site plan can come in a variety of forms (from hand-written sketches to outputs from the plethora of online tools), but the premise is that you’re asking your client to convey to you the basis structure of the site; i.e. the top-level navigation and transitions from page to page. 9 out of 10 clients will struggle to pull this all together so it’s important to use your skills as a designer to coach them through this so you have enough to get started on Phase 2: Design.

Phase 2: Design

While you were busy measuring repeatedly during phase 1 you had the opportunity to gather up all of your client comments, project specs and meeting notes. Now during phase 2 it’s time to turn all of that scribbling into eye-popping visuals.

Client Content — Before any designer can really dig in, they need some direction on content (copy, images, colors, product/customer data) from the client. Keep the requests light as you just need a nudge.. you’re still the designer and they’re still the client. This input should simply feed the Creative Concept step below, of which the client can focus on their most important page (e.g. Home Page) and supply all relavent content. Then they can move on to the rest of the site as the designer completes the Creative Concept. This job is almost always heavily underestimated by the client and once they realize they need to supply things like Policies and Terms, they hit a wall. Make sure you prep them for this assignment and give them adequate time and support. If you have copy writers available, make sure you make them available.
Creative Concept — This is your first design draft (images only; e.g. PSDs, no HTML just yet) of whichever page the client cited as most central to the theme and vision of the entire business and website, to which they provided content for in the previous step. The designer set of tools we use most for all web-related design work is Adobe Creative Suite.
Creative Walkthrough — Considering this is the client’s first encounter with not only your creative work but in seeing their idea come to life, you’ll want to discuss your first draft of the creative over the phone (in-person is even better). Explain the theme, where you drew your inspiration for colors, layout, fonts, etc and then hear them out on any tweaks they’d like made for the next version. Once you nail the general aesthetic of the site based on the initial page creative, you can get started on the remaining (“inner”) pages. To make the process of submitting designs and gathering client changes/feedback more efficient, you could take advantage of tools like ConceptShare (which recently launched an entire new v3 product). We’ve found it to streamline all of the countless emails and phone calls with a simple, visual interface.
Design sign-off — Before you move onto Phase 3: Implementation, you want to have creative sign-off from your client. Going back and changing design after coding begins can be costly to the budget so don’t underestimate the importance of this step.

Phase 3: Implementation & QA

Implementation is a fancy word for coding. Hand those beautiful PSDs off to your engineers to develop.. the site is ready to come to life. And because we encourage working iteratively, QA comes along for the ride during this heavy development period. That said, testing, as a whole, is a post in itself (to be covered later), so we’ll keep the view at 30k feet for now.

Client-side Coding — Start with HTML and CSS, then move onto any JavaScript, AJAX, Flash, etc, wherever applicable. If you have separate people handling design and development, communication between the two needs to be fluid so as to maintain the visual concepts born during phase 2. In fact it’s best if the designer can hand the page off to developer once client approval is received so that everything regarding that page is top-of-mind.
Client-side QA – Again, each of these points can be expanded upon but the general testing routines you want to validate here include: (1) typography/formatting, (2) accessibility, (3) and browser/OS compatibility.
User Guide – Well-written documentation not only conveys how things were built, but how to use the site and any administrative functionality (e.g. an admin panel or CMS). It also serves as a training manual and cut down on subsequent support calls post-launch. Finally, this document will serve as a guideline during client testing (UAT) within phase 4.
Site Demo – As pages get layered with client-side coding, it’s a good idea to share links with clients. The images produced during phase 2 are pretty to look at, but often you won’t begin to receive true client feedback until they can point and click.
Server-side Coding – Time to hook the client up to the server with PHP coding.
Hosting Account Setup – Whether or not you’ll be hosting the site, now’s the time to make sure the hosting account is established, email accounts exits, DNS entries are accurate, SSL certs are in place and implemented wherever necessary on-site and any other IT administrative steps have been carried out.
Functional QA: Includes testing (1) features/forms/fields, (2) cookie settings, (3) performance, (4) server-side communication and (5) security/penetration checks. Once all of the internal (i.e. completed in-house by you/your team) QA has been completed you can prepare to officially hand the site over to the client for testing and approval in Phase 4.

Phase 4: UAT & Training

While you’ve been keen at keeping the client informed of your progress along the way and asking for regular feedback, it’s been light in terms of formal client testing to this point. Now it’s time to really hand the reigns to your paying customer and iterate through a cycle (or two, or three) of UAT – User Acceptance Testing.

Training – One of the biggest mistakes we used to make when we started building client sites was to build something, turn it over to the client and say “good luck, let us know if you find anything wrong.” No good. For one, most of your clients will not understand technology like you do – some may need to understand the basics of website protocol; others may even be a bit more advanced but still need a primer on how to, say, upload catalog merchandise via FTP. Hold their hand. Send them the User Guide crafted during phase 3 and then take them step-by-step through each page and process. We like to use GoTo Meeting for client demos, where we’ll often run a scenario and then give keyboard and mouse control to the client and ask them to give it a shot. It works well and pays huge dividends to do it in a simulated training environment now and while you’re moderating vs. later in production when the boss is standing over their shoulder and you’re not around to lean on.
UAT – Now that your client is a pro with what’s under the hood of their site, UAT begins. But before they begin, coach them on best practices for reporting issues; e.g. trace their steps, break out expected vs. actual outcomes and provide screenshots whenever possible (with annotations on the screenshot.. even better!). If you use a PM tool you’ll probably want to capture all discussions and issues/changes found during this process there so that as you apply fixes, the entire process is tracked and documented. The more you guide them on the testing approach that works best for you and your team, the more streamlined the entire process will remain. Even though the client is testing on their end, the responsibility to deliver a high-quality product remains on your shoulders. Make sure you own this process, just as you have the previous steps.
Sign-Off – As UAT comes to a wrap, you want to somehow have your client both acknowledge that they’re approving of the work produced as well as give you permission to publish it to the world. Some shops use very formal documentation, others use email or even IM. Whatever works for you, both semantically and legally; but I’m sure most would recommend having it in writing. Whatever your approach, once you have their blessing it’s time for Phase 5: Go-Live.

Phase 5: Go-Live

You’ve made it. Blood, sweat and tears have been shed by you and your client (hopefully not too many tears) and now it’s time for publishing to the live, production hosting account.

Planning – Before you actually release the site into the wild, sit down with your client and explain the release process. We typically put client sites live during off-peak (local) hours. So say we’re launching a site in NY, we would typically plan to begin this process at 3am EST so as to give ourselves plenty of time to run the release procedures, or worst case, take the site offline and notify the client of problems/delays.
Private URL Launch – Upload the site to their production environment with a private URL (e.g. just an IP or http://test.domainname.com) and then..
Smoke Testing – Immediately upon launch you want to make sure everything is stable. Run through all pages and perform a basic level of functional QA to ensure the site is still standing. If the site is transactional (e.g. eCommerce) place a couple test orders and validate the workflow on the back-end and database, as well verify email notifications. If we’re good to go..
Go-Live – Flip over to the public domain and notify your client that their site is officially live.
Check-In – Don’t forget to keep an eye on things over the coming days and weeks. You want to make extra sure that if there are problems, you’re the first to find them. There’s nothing worse than a client calling to tell you the site is down.. it will erase all those hours of hard work as well as the trust you’ve built with your client.

Summary

Designing and building websites includes lots of moving parts however the most important element throughout is communication. Whether things are going smoothly or falling apart, keep your client in the loop and work through things together. The process above is not a one-size-fits-all, but, at its core, contains a good guide to keep you and your web projects on track.

HOW TO: Organize Web Development Projects Like a Pro

Web :: http://digitalxbridge.com

Skype :: jaymelone | Yahoo IM :: digitalxbridge

Social :: Facebook | Twitter

Go to Source

Infographics of The Week #4

Facebook-Web-Design — Thu, 28 Jul 2011 23:15:22 +0000

Advertise here with BSA

This is a guest post from Tony Shin – with a double major in Economics and Management from the University of Washington, this Seattle native regularly contributes his work to several other publications. He has moved into social media and creative design in hopes to help lead and innovate the future of information with others. Follow him on Twitter and Facebook!

I enjoyed seeing a lot of great infographics this week, a majority of which focused on one theme: Social. Coincidence or not, as I sat there looking at each graphic, a few thoughts continuously popped in my head. “Has social media taken over my life? This can’t be right. Wait, why do I care so much? Without Facebook, Google+ and Twitter, how bored would I be?”

It’s refreshing to see another perspective of the virtual lives we’ve created for ourselves. Personally, I’m a lost cause. I’m in way too deep. So save yourself while you still can! Okay, just kidding. Just take the few minutes out of your day to really think about where we’ve come so far. Yes, it is exciting. Yes, it has made communication much easier. The question isn’t what has it done, but what will it do?

1. The State of the Internet

Every so often, when the update data is accessible, someone makes a state of the Internet infographic, highlighting some major points about the evolution of the Internet and what it has in store. After seeing this interactive piece by Online Schools, I realized they just upped the ante on any one who desires to create a ‘State of the Internet’ infographic. With that said, I’d imagine it’ll be some time before we see anything like this. Press play to be blown away.

Created by: Online Schools

2. Do You Need a Social Media Detox?

This one brought me the fresh perspective I was talking about earlier. I found this infographic on Visual.ly that Column Five Media put together, which illustrates the symptoms of one who needs that detox. I don’t want to believe it, but maybe I need one. I’m quite positive I have 8 of the 10 symptoms.

3. Where Twitter’s Town Hall Left Us Hangin

I have nothing against Obama. I’m sure he’s a great guy. Ask Zuck and Jobs, they had dinner with the guy! But seriously, you’re going to chew him out because he didn’t answer your tweet? I’m sure along with the 500 million tweets he probably gets a day, he checks each and every last one of them. Ha. Right. Imagine his phone constantly alerting him of new tweets. Umm, no.

Regardless, InboxQ designed this infographic, highlighting all the data and stats about President Obama’s tweets, which really shows the kind of effort and dedication out there to record all that. Oh, the eagle/twitter bird comparison was cute, too…

Infographics of The Week #4

Go to Source

High-Quality and Free Design Resource Websites

Facebook-Web-Design — Tue, 26 Jul 2011 09:05:36 +0000

Design Informer is here to inform you of some great high-quality websites that offer some really good design resources. Best of all, these resources are free. Whether you are looking for a button, textures, or other web design elements for your next design, you are sure to find it in one of these websites.
Go to Source

Design Mistakes

Facebook-Web-Design — Tue, 26 Jul 2011 09:05:29 +0000

I was chatting with my friend Nate Winn last night and he mentioned that the new MacBook Air was awesome. So earlier, I decided to go to the Apple website and check out the laptop, view the specs, etc. As I was looking at the page, I couldn’t help but notice the reflection of the “i7″ graphic. It had the wrong reflection.
Go to Source

The Best Free Fonts for Designers

Facebook-Web-Design — Tue, 26 Jul 2011 09:05:27 +0000

I’ve been meaning to write this post but just haven’t had the time to do so. I’ve received several messages and emails asking me about fonts that I use on some of my design projects. I have a pretty large font collection. Some of them are paid, but a lot of them are free! First of all, I suggest investing in some of the best typefaces out there but I also suggest that you take advantage of the free resources that can be found online.
Go to Source

FYI Monday: Vibrant & Colourful Illustrations by Bram Vanhaeren

Facebook-Web-Design — Thu, 21 Jul 2011 08:40:26 +0000

This post is part of the For Your Inspiration Monday Series showcasing the most inspiring designs out there. Each week a new artist or design style will be presented in order to get your creative juices flowing for the upcoming week. I hope you enjoy the series.

Bram Vanhaeren is a 20-year old digital artist and illustrator based in Antwerp, Belgium. I came across Bram’s work a while back and only just now managed to feature him. His work is vibrant, powerful and makes use of the full spectrum of colours. Whether it is typography, portrait illustrations or photo manipulations Bram’s done it and it always looks amazing. No wonder his designs have been featured in many of the best design magazines. For more inspiration, case studies and tutorials make sure to visit www.bramvanhaeren.com.

Go to Source

Feebie Friday: Win a Premium Invoicing Plan from Invoicera

Facebook-Web-Design — Sat, 16 Jul 2011 02:06:04 +0000

Advertise here with BSA

Ladies and gentlemen Freebie Friday is here! With a very special edition, of course: we teamed up again with our friends from Invoicera (our invoicing weapon of choice) to give away 6 months Preferred plans to 5 lucky readers! Scroll down to see the rules and enter the giveaway!

What is Invoicera

Invoicera specializes in providing state of the art online invoicing and billing, project time tracking and expense solutions. It allows small & medium enterprises, freelancers, service providers, etc to create and send customized invoices/estimates online, without having to keep a track of invoices/estimates manually.

Features

Time Tracking
Expense Tracking
Invoice customization
Report Generation
Auto billing for Recurring Invoicing
Multiple Language Invoicing
Multiple Payment Gateways
Staff Management
Create Professional Quotes and Estimates
Multiple Currency Support
Alerts and Reminders
Invoice Scheduling
Late Fees Payment
Send Invoice/Estimate as an Attachment
Export Invoice/Estimate as PDF
Option to Send Account Statements to your Clients

And many more!

The Prize for 5 lucky winners

Invoicera has generously decided to offer the winners a subscription of their Preffered plan for six months absolutely free!

How to participate?

tweet this: win a Premium Invoicing Plan from @Invoicera & @InspiredMag RT to enter!
leave a comment telling us what you’ll do with the $120 you’ll save by winning this

We’ll randomly pick a winner next Friday and make the announce here. Good luck folks!!

Feebie Friday: Win a Premium Invoicing Plan from Invoicera

Go to Source

TechCrunch Redesign

Facebook-Web-Design — Fri, 15 Jul 2011 11:57:04 +0000

Here’s just some of the comments on their redesign.

AOL obviously has some bad marketing execs if they switched from the old TC look to this crayola crayon design. This is about as bad as TC adopting FB Commenting over Disqus.
I can’t even see the search bar at the top. Am I supposed to guess where it is? GREAT design bro! ALL CAPS ON THAT TOP BAR AND EVERY TITLE FOR NO REASON. And worst of all, everything is in a “sans serif.” Who decided that would be a good idea? there’s a reason books, news papers, and anything with articles is written in serifs.
This has to be the worst “redesign” of all time.

What’s interesting about the redesign is that TechCrunch seems to have expected this outrage in the community. They have already published two articles that defend the redesign. One says they chose this logo just to annoy those complainers. And the other one is a straight out challenge to send them a redesign hatemail.

Hate the site? Hate the change?

The fact is that large websites like TechCrunch don’t just redesign without much planning and preparation. Most people are so quick to judge the design without taking the time to even use the site and try it out for a few days.

The reason most people hate the site is not because of the new design, but because they hate change. They were comfortable with seeing the old design and using it so when the site got a drastic redesign, they suddenly became unfamiliar with everything so they automatically said that they hate the new design. Don’t get me wrong, I’m not saying that their website is perfect, I’m sure there are still a ton of bugs that will pop-up over the next few weeks that they will have to address and fix.

But my point is that so many people are already hating the site without knowing the reason and background behind every design decision that was made. They don’t know the data, the analytics, the thoughts, the studies and the tests that went behind this new design.

Do I like it?

Yes, actually. I like the new site. I like how the homepage does not have the carousel up top like most other news sites. These in my opinion just clutter the page if not done correctly. I like the use of whitespace throughout the site. I also like the implementation of the share buttons on the homepage. It attracts my attention enough, but it’s not distracting or annoying Someone mentioned that they should have used a serif typeface. I don’t think so. I think the sans-serif is readable. I use a sans-serif as well on this site and many people have told me that Design Informer is very easy to read. There’s also the large headlines that attract my attention which is good.

Side Note: It’s interesting that a site this large is actually using WordPress. Go WordPress!

The Logo

One of the things about the site that have people raving is the logo. Most people hate it and say it was made in Microsoft Paint. It’s funny because Dave Feldman, the project manager for the redesign, was able to poke fun at their own logo.

The new logo is our most controversial change. I love it, though that’s no accident: we went through many, many options with Code & Theory before finding one we liked. It’s bold, simple, and versatile. It works in any context — from a tiny monochrome icon to a mosaic on a poster. It fits the TechCrunch brand perfectly. And no, we didn’t build it in Minecraft. We used AOL Paint, which comes free on the AOL CD and has this sweet UltraLogoMatic2000 feature.

I personally like the new logo. I think it works for their site and their brand. I also like the execution of it. It’s a surprise to see it reveal the words TechCrunch when you scroll down. They didn’t change their colors which is good, because it’s about the only thing connecting this design to the previous one.

What do you think?

The site isn’t without design flaws in my eyes. There are still definitely some areas of the site where I think it can use some refining and tweaking. But overall, the experience was great when browsing the new site.

It was a lot faster than the previous site and I enjoy the new design of it. I don’t know, maybe like I said, it’s too early to tell if I’ll still like this design tomorrow or a few weeks from now.

But what about you? What do you think of the redesign? Do you like it? Do you hate it? What do you think are some things that they did right or wrong? Don’t be shy, leave your comments below. I want to hear from you!

Go to Source

Pushing the Envelope in Web Design

Facebook-Web-Design — Fri, 15 Jul 2011 11:56:52 +0000

It was on May 6, 1954 that Roger Bannister finally broke the record when he ran his mile in 3 minutes and 59.4 seconds. When no one thought it was possible and everyone had engraved in their minds that it was never going to happen, Sir Roger pushed the envelope. But it all started in his mind. He had to determine that he was going to break the record and eventually, he did!

The web design community is in a wonderful time right now. Over the last few years, we’ve seen many web designers who like Roger Bannister, want to continue to push the envelope and see how much they can do on the web. And more and more web designers are following suit and seeing what they themselves can do with CSS3 and HTML5. When I see guys like Anthony Calzadilla and what he’s doing with CSS3 and how he’s taking it to the next level, I’m reminded of that story of the four-minute mile. Websites are popping up every month that are just incredible and mind-blowing. Here’s just a few that I discovered from my Twitter stream recently that are just impressive!

I’m sure there are a lot more websites that have been built these past few months that have completely pushed the envelope. It seems like every few days, someone does something incredible and new with CSS3. Unique, responsive designs are popping up everywhere. Designers are moving beyond the limit of what has usually been done or was the accepted standard. And all this inspires me. It motivates me. It makes me want to get better at what I do.

I was talking about these sites the other day with my good friend, Soh Tanaka and this is what he said.

People are pushin’ the limits man! No time to sleep!

Go to Source

50 Things Every Creative Should Know

Facebook-Web-Design — Fri, 15 Jul 2011 11:56:50 +0000

Jamie Wieck had this to say about the project.

From speaking to friends, colleagues and recalling my own experiences I’ve complied The 50, a list of 50 things I believe every graphic design student should know on leaving college. Some of these points are obvious, others less so – but all are brief, digestible nuggets of wisdom that will hopefully go some way to making the transition from graduate to designer a little bit smoother.

What’s great is that Jamie plans to add 50 more for a total of 100 points. A lot of the points on this list are things that are simple and obvious, and a lot of them are things that I’ve learned the hard way (through experience).

Here are just the first five points that he mentions.

You are not the first.
There is always someone better.
Success is not a finite resource.
You cannot score without a goal.
Starting anything requires energy.

Go ahead and check out his project by clicking the link below.
#The50 Things Every Creative Should Know

What do you think of this project? What are some of the things you would add to this list if you can? I’d like to hear your thought below so let me know!

Go to Source

Why Can’t We(bbies) Be Friends?

Facebook-Web-Design — Fri, 15 Jul 2011 11:56:33 +0000

These are widespread stereotypes, chiefly shaped within the industry. But what’s the true culprit that hinders teamwork in the Web industry? The famous line from Cool Hand Luke says it best: “What we’ve got here is failure to communicate.”

Communication Is Key

Good communication is one of the keys to successfully planning, building, launching and maintaining a project, especially on the Web, where people could be scattered across continents. Yet, we’re all guilty of taking communication for granted, thinking: “Talking to people isn’t that hard.”

Whether you’re conversing in a cubicle, updating in BaseCamp or Skyping across the ocean, certain communication essentials will help you:

Increase productivity,
Avoid and solve problems,
Enhance working relationships,
Promote personal satisfaction,
Complete projects on time and on budget,
Create better results and happier clients.

Build Mutual Respect

Whether you’re a designer, developer, copywriter, information architect or SEO specialist, a little knowledge and appreciation of what others bring to the table goes a long way to fostering productive group efforts.

The following are some common Web trades and their usual roles:

Web designers solve problems and create online experiences through the thoughtful, deliberate application of design. Tapping into the right side of the brain, they take into consideration how a website will look and be used.

Web developers program a website’s functionality. These left-brain analytical thinkers consider what a website has to do and how it will do it, and then they choose software and write the necessary code.

Web copywriters craft copy to convey key messages, attract and engage visitors and entice them to take action.

Information architects analyze and organize functionality and content into a structure that allows users to navigate and find relevant information quickly and intuitively.

SEO specialists arrange and manipulate on- and off-site elements—from servers to software to content, and including keywords and links—to help a website get high search engine rankings.

Recognize Break-Down Points

Mutual respect fosters mutual benefit. Lack of knowledge of or consideration for others’ roles, objectives and requirements, on the other hand, can lead to significant frustration, delays and even clashes.

For example, a traditionally trained graphic artist might not take the basic usability or navigation of the website they are designing into consideration, which can cause grief for the developer and subpar results.

A developer who isn’t aware of the importance of design might overlook certain visual details, thus breaking the design’s integrity.

Likewise, a traditional copywriter who has limited knowledge of information architecture, navigation, link strategies or the Web in general could hinder search engine ranking, usability and conversions.

Learn to Listen

When discussing a project with colleagues, are you really listening? Coincidentally, Are You Really Listening? is the title of a book by Dr. Paul Donoghue and Dr. Mary Siegel, in which they note, “We hear not what is important to the speaker, but what matters most to us.”

They go on to explain that we become effective listeners only when we acknowledge that we have a lot to learn. This is valuable, practical advice, especially when you’re collaborating with specialists who could give you a wealth of insight into different views, trends and technologies.

What else can one do to become a good listener? Health Resource Network’s Dr. Morton Orman suggests that we need to listen without thinking about how we’re going to respond:

Much of the time when people are speaking to us, our heads become filled with our own personal thoughts and agendas… [we’re] thinking how we’re going to respond. But to listen well, you must put these thoughts aside and “be with” the other person. You’ve got to fully attend to their words and inner emotions. You’ve got to actively work to “put yourself in their shoes” and listen to them speak. And you’ve got to keep your mind open to discover the value or merit in whatever the other person says.

Intel Corporation CEO Andrew Grove sums it up well: “How well we communicate is determined not by how well we say things, but by how well we understand.” This understanding can give us a deeper appreciation for how co-workers approach issues—whether they’re right- or left-brain dominant—and for how our decisions and actions might affect them.

Put Goals And Expectations On The Table

Never assume that your expectations are self-evident or that they’re clearly understood and shared by your colleagues. Doing so could come back to bite you, your team and your project. Whatever the level of expertise among your co-workers, defining, stating and managing expectations is important. This way, everyone begins on the same page and understands where the project is going. So, from the start:

Articulate points clearly,
Find common ground,
Agree on goals.

These steps will help identify technological and personal limitations, allowing you to make special arrangements if necessary. To achieve your objectives, for example, you might find that you need to bring in a JavaScript specialist for part of the project, or a copywriter with advanced SEO knowledge.

Define Roles and Responsibilities

Web projects run best when everyone clearly understands their duties. To help individuals focus on their roles and secure commitments, ensure that each player has a clear-cut definition of their responsibilities, both individually and relative to the rest of the group.

When employees feel a sense of responsibility and ownership, they recognize that they’re making a valuable contribution to the team, and productivity soars. By contrast, failing to define roles and responsibilities creates confusion over who is accountable for what, in turn killing coordination and leading to turmoil and delays.

For example, you, your developer and your copywriter might each have sufficient knowledge to plan and build the website’s information architecture, but that responsibility must be clearly assigned. Otherwise, you could waste valuable time and resources duplicating work or waiting for a ball that dropped a week ago.

Mind Details and Keep Commitments

Teamwork is often seen as a warm, blissful, abstract concept. But it’s actually a bunch of concrete individual actions that are carried out for the greater good of the project.

When team players don’t hold themselves accountable, the outcome is usually sloppy work and late product deliveries, which means angry clients and lost profit. When each player instead pays careful attention to and acts on details of the project, deadlines are met and the outcome is almost always satisfying.

“A strong and balanced performance ethic spells the difference between widespread team performance versus random team success,” note Jon Katzenbach and Douglas Smith in The Wisdom of Teams: Creating the High-Performance Organization.

They suggest that high-performance teams are deeply committed to their purpose, goals and approach. Team members are also highly committed to one another and demonstrate this through disciplined action.

Accordingly, you must set and maintain schedules and high performance standards and encourage team members to hold each other accountable. Peer pressure can be a greater motivator than policies and systems.

Build Trust

Build an “emotional bank account” with your peers to bring up the trust level and avoid conflict. This doesn’t (necessarily) mean giving the programmer morning hugs or Valentine’s cards, but rather “deposits” of courtesy, kindness, honesty and keeping commitments. This creates a “reserve,” says best-selling author Stephen Covey, that promotes “easy, instant and effective communication.”

If you have a habit of being discourteous, showing disrespect, cutting people off, overreacting, ignoring others or betraying trust, Covey says the emotional bank account will overdraw and trust will run very low. At this point, he explains, “I’m walking on mine fields. I have to be very careful of everything I say. I measure every word. It’s tension city… protecting my backside, politicking.”

Building trust and rapport creates room to challenge yourself and others, to help produce good answers, fast. When you allow everyone to openly debate and disagree on important ideas, you’re more likely to establish sound solutions and deter backstabbing and dissatisfaction. If someone feels that a wireframe is flawed or that Web copy misses the mark on a certain page, they should state their case in a specific, constructive and civil manner. You’ll help your team uncover and resolve issues and become stronger overall.

Whenever possible, involve team players in the decision-making process, particularly when their roles are affected. If you have to make decisions that don’t jive with their points of view, take time to explain your rationale.

When you have to criticize someone, balance it with praise. Share your concerns, noting the individual’s successes or strengths as well as the areas that need attention. Be direct and honest, and do it privately.

In the event that you screw up, simply acknowledge it, say sorry and move on. Chances are the others will, too.

Keep Meetings Productive

When an email just won’t do, a well-planned and executed online or face-to-face meeting can yield exceptional results. Whether the meeting includes the client, the following rules (courtesy of Canadian business advisor and author Mark Wardell) invariably apply:

Begin with the end in mind. Your meeting’s purpose will determine the meeting’s focus, agenda and participants.
Distribute the agenda and any relevant information in advance of a meeting to foster more in-depth discussion and swifter decisions.
Start and finish on time. Don’t wait for late-comers. And if you absolutely must go into OT, at least acknowledge it, so that you can wrap it up more quickly.
Conclude the meeting with a brief recap of key points, decisions and assignments, and ask participants, “Did we achieve our purpose?” This fosters commitment to what was discussed.
If another meeting is required, quickly outline the topics for it. Planning ahead while the information is fresh makes preparing the agenda easier. You can even take the opportunity to schedule the meeting.

Remember, meetings usually require lively discussion, with diverse perspectives, to be productive and for participants to reach consensus. So, to motivate people to contribute, treat everyone’s ideas and concerns equally, regardless of position or status.

Show Gratitude

When your project reaches a milestone or concludes successfully, you don’t have to throw rose petals at your teammates, but do recognize their efforts and achievements. Kudos, thank you’s and high fives take little effort and cost nothing, but they can make a world of difference to someone’s day.

Research shows that caring, supportive words increase chemicals such as serotonin in the brain, which calms and soothes people and generates a feeling of contentment. Just keep it real. The more genuinely positive the message, the more neurochemicals are released, creating that tranquility. A forced “Awesome!” or “You’re the best!” doesn’t have the same effect.

Rest assured, when you make people feel special, you get in their good books and, if you’re a freelancer, remain top of mind for any future projects.

Start Making Your World a Better Place Today

With every project and opportunity, do what you can to encourage a team-oriented atmosphere, so that you can achieve more as a cohesive unit, capitalizing on each player’s skills, experience and strengths.

And always lead by example. In the words of Stephen Covey (in The 7 Habits of Highly Effective People), “Be a light, not a judge. Be a model, not a critic. Be part of the solution, not part of the problem.”

You’ll attract a higher caliber of colleagues, clients and projects, and you’ll make your world a better, happier, more rewarding place.

Further Resources

(al)

Go to Source

The Design Community Offers Its Favorite Bits of Advice

Facebook-Web-Design — Fri, 15 Jul 2011 11:51:42 +0000

That’s what brings us to this post. We recently turned to our followers on Twitter—as we like to do from time to time—to help us demonstrate one of the greatest things about the online design community: its willingness and eagerness to pay knowledge forward. We asked our friends in the community to share their favorite design tip with us, and they responded en masse. There were so many fantastic responses that we felt it would have been a wasted opportunity if we didn’t compile them for our readers and discuss them with the community at large.

There was such a variety of fine responses that distilling them into a single comprehensive post was difficult, but we managed to do just that (for the most part). So, take a look at some of the best advice the design community has to offer to all those who file within its ranks.

The online community is all about sharing advice, and word certainly gets around the design field. (Image: Marc Smith)

Getting Started

The best place to start is the beginning, especially because getting off on the wrong foot with a new design project is easy if you over-eagerly dive in and let excitement outmuscle an organized and steady approach. Falling into this trap is easy when you’re new. Getting started the right way often proves vital to the success of a design project. There are many things to consider as you begin.

Just Do It

Remember, above all, to actually begin. So often we get hung up on the preliminary steps and considerations and linger there, seemingly on “Pause.” Whether because we don’t know where or how to begin or are overwhelmed by the number of steps involved in the beginning, we wait. We try to cover everything before stepping forward, to test the waters. But the community agrees: just go for it!

Whatever it is, do it now.

Stop reading #smtips, and go create something that delivers a message.

Stop procrastinating and start already!

The scariest moment always comes just before you start.

Be afraid, do it anyway, fail, repeat.

Stop messing around; just start.

Don’t over-think it.

Begin With Pencil and Paper

Another popular bit of advice, shared multiple times in the answers we received, is not so much about whether to begin but how to begin. For many in the design community, the only way to start a project is to unplug from the computer and go analog.

Pen and paper is a popular approach in the early stages of a project, and it provides a refreshing, focused perspective right off the bat. If the computer apps come out too early, you might become confused about where to begin or even be overwhelmed by the sheer amount of possibilities. Suddenly, instead of focusing on the imagery you want to use to sell the idea, you are negotiating techniques and tweaks, and imagery gets relegated to a secondary role.

Start with pen and paper, not a mouse and keyboard.

The best ideas are born on paper.

Always start with a pencil and a blank piece of paper. That’s the best way to get the best designs.

My best design tip: forget your Mac, PC and apps, and start on paper with a nice sharp pencil.

Use a pencil and paper to create a concept before you use a computer.

Always start designs on paper. There’s power in sketching.

Sketching out your ideas at the beginning of a project can really help form a good design.

Always start with paper.

Do sketches on paper, not in design software, so that you don’t limit your ideas to your current technological capabilities.

When designing for the Web, go old school; plan and prototype your user interface and functionality on paper first.

Turn off your computer and go back to basics; you can’t beat initial sketches done with good old-fashioned pen and paper.

Design tip: start with pen and paper, and only turn to the software when you know exactly what you’re going to do.

When I design, I like to draw ideas out on a big piece of paper and write out the functionality of what I’m trying to build.

Deadlines

As you begin your project, pay special attention to deadlines. Many in the industry admit that, for whatever reason, they pay little or no attention to deadlines that have been established—usually by the client and based on specific needs. Unfortunately, this reflects poorly on the field as a whole, not just on the individuals who choose to ignore deadlines. So, honoring an agreement has importance beyond the project itself.

Of course, we designers shouldn’t unnecessarily stress out by letting deadlines linger in the forefront of our minds, but neither should we ignore requested timeframes. Deadlines should hover in the back of our minds, not actively interfering, merely acting as a subtle reminder that we have a schedule to stick to. A deadline is a motivator for some and merely represents the end point for others. Some designers would keep going and redesign indefinitely if they didn’t have a deadline to meet.

Great design takes time; set realistic deadlines (then multiply by two).

Aim to have not quite enough time to finish your design work.

Listen to your clients so that you truly know what they need and when they need it.

K.I.S.S.

The most common response we received from our Twitter followers by far was the age-old piece of advice to “keep it simple, stupid.” KISS is suggested in so many industries, and in the design field it rings truer than ever. Design is a dynamic and communicative field in which countless elements come together to convey the intended message. Yet the more you add to a design, the more cluttered it becomes and the more likely the message will be muddled. So, strive to create the simplest presentation possible that communicates effectively.

Keep it simple, stupid.

Simple is always better. Make it visible, not visual.

A designer’s job is to communicate in the simplest way possible.

The rule of threes is a favorite of mine for uncluttered designs: use three fonts (max), three images and three colors.

My favorite design tip is to follow the KISS principle: keep it simple, stupid!

Clean, clear and concise is more useful than flashy and cluttered! Clear the clutter, and make it awesome.

Keep your designs simple so that people focus on content.

Simple and clean!

For a good design, I suggest using a maximum of two fonts and few colors to keep it simple and avoid confusion.

Don’t overcomplicate a design. Occam’s razor says that the simplest explanation is most likely the correct one.

Making the simple complicated is commonplace. Making the complicated simple—awesomely simple—that’s creativity. That’s design.

If it’s not serving a purpose, take it away. In the end, extra graphics serve only as a distraction.

White Space

Another popular response we received—and it falls under the K.I.S.S. umbrella—was about white space. White space is important indeed and seems to elude so many designers who feel the need to fill every available inch with something. Much is to be said, though, for using white space and not committing the design sin of unnecessary clutter. White space gives page elements—and by extension those viewing the page—room to breathe. Cluttered designs feel uncomfortable, so add white space to relieve that tension.

Empty space can be just as (or more) effective than images. Make good use of empty space.

“Good design is as little design as possible.” (Dieter Rams)

Less is more.

The best design tip I ever heard was “reduce, reduce, reduce.” When you have nothing else to take away, that’s when you know you’re done.

Use white space and deep harmonious colors.

Don’t be afraid of white space.

Don’t forget the white space, and follow directions.

White space is just as much a design element as actual content.

Try not to clutter up your page with too many images, backgrounds and colorful fonts. Keep it simple.

White space is not lost space.

Don’t think you have to fill all the available space; cramming in every form of media, full of useless facts, won’t do you any favors.

White space is your friend, not your enemy.

Color

Another area to consider is color. There are numerous color considerations with every design, not the least of which has to do with the intended message. Color plays a powerful part in communication, and several of the tips that came in emphasized its importance. Understanding at least something about color theory and how to apply color to a website is vital for designers. Many believe that too many colors will unnecessarily complicate and thus detract from the effectiveness of a design.

Use less color, please.

Here’s an instant color scheme for a non-designer to use: start with a basic color, then choose darker and lighter variants, and adjust saturation but not hue.

Don’t be afraid of color.

When choosing colors for a client, do it near a window; the sun is the same for everyone, but indoor lights aren’t.

Simplicity is paramount in a color palette; work within shades for more variations. 2011 is the year of less is more.

When choosing a color scheme, make adjoining elements contrast, not match (e.g. white walls and black curtains).

The Learning Curve

Another issue that came up time and again was the learning curve that comes with the territory. Basically, we designers should never stop learning. In order to remain relevant in this ever-advancing field, we must constantly seek out knowledge and find ways to improve our skills and techniques. With the amount of material the community generates to help us sustain that knowledge base, we have little reason to fall behind.

Never stop the learning.

Learning is like the horizon: it has no limits (a Chinese proverb). This applies to design, I feel.

Never stop learning.

Nurture your passion for learning.

Strive to learn something new, and push your boundaries with every new project.

Focus on the User

Bear the user in mind at all times. This came up a lot. Usability is the be all and end all of project requirements. Form and flare are fantastic, but if they compromise the usability of the design in any way, they should be reconsidered. Most websites are interactive in some way, so functionality and the user must take precedence over aesthetics, or else the project will fail (to some degree, at least).

You also have to focus on the user so that you know what to design in the first place. Without knowing who you’re designing for, building a usable website will be a challenge. As you design, keep a feel for that intuitive interactivity, so that any user would immediately be able to navigate the website with ease.

Make aesthetically pleasing designs, but not at the expense of usability.

It doesn’t matter how great the design is; if it’s not functional and cannot be found, it’s pretty useless.

Think like the target user.

Function before form!

All designs begin with an audience analysis. If you don’t know who you’re designing for, how can you know they’ll get it?

Don’t underestimate the users.

Design with the client in mind but for the end user. In the end, everyone will be happy.

It may be dull, but here’s my tip: form follows function! It’s good design if the user can achieve what they want, the way they want to.

Think about the user first, then design accordingly.

User experience trumps everything. If it’s not usable, it’s not useful.

Understanding is the key to creating simple, usable designs. Understand the users, the why of the design and the business goals.

Save… Often!

If we were ranking the tips we received in order of importance, this next bit of advice would sit near the top. The tip is simple but vital: save your work. Save often. When you’re caught up in the excitement of a project, and the flow has you in its grip and is carrying you forward with hardly a moment for you to come up for air, forgetting this tidbit is natural. If you do, though, it’ll come back to bite you. Losing hours from being lost in work is easy, as is forgetting to save as you go. It takes only an instant and a hiccup in your system or app to lose hours of progress. When it happens to you, you’ll feel the importance of this advice.

Use Command + S often.

SOS: save often, stupid.

Design with simplicity, and remember to save your work frequently.

Remember to save your work often.

Save files early and often.

Never forget to save. It’s the simplest and most useful tip I can give.

Your design talent is no match for a system failure or computer crash. Always save and back up your digital masterpieces… often!

Inspiration

Another popular tip for anyone working in a field where a fresh and creative voice goes far is to keep the flame of inspiration burning. Design is no different. Inspiration is key, and the design community puts a lot of effort into keeping its wellsprings flowing uninterrupted. Designers spend countless hours seeking out sources of inspiration, both general and project-specific, to maintain their creative edge. Remember, inspiration can strike at any time, so be prepared to capture it.

Remember, design inspiration can come any time, even when you’re in the shower or on the toilet, so don’t fret if you get struck.

Don’t design in a vacuum. Draw inspiration from others, both online and in person.

Carry a notebook with you everywhere; you never know when inspiration will come.

Inspiration comes from what you least expect will give it, so keep your eyes open.

Eat the world with your eyes.

Do not steal or copy the creativity of others, but do get inspired by it.

Take your notebook everywhere (bed, bath, washroom…).

Get Out!

Several of our followers suggested getting an inspirational recharge by getting away from the computer. Unplugging and getting some fresh air could renew your perspective and state of mind. As you reconnect with nature, your mind removes itself from the environment that it normally grinds away in. By freeing your mind from stress and creative roadblocks, you might make great progress upon your return to work.

Step away from work and have some fun in order to bring back energy and inspiration.

Inspiration is rarely found at your desk.

Don’t limit your inspiration to the Web. Go to the library, on a photo walk outside or people-watching with a notepad and a pen.

Inspiration comes from nature, not Google Image search.

Don’t Force It

You want your designs to feel organic and natural, not like some sort of paint-by-numbers construction that you mechanically churned out. If you aren’t inspired, your work will show that. Of course, we don’t always have the luxury of waiting for inspiration to strike (what with deadlines and all), and there are times when we must work regardless. For the most part, though, we should nurture creativity so that we don’t have to force inspiration.

Let it flow; don’t try to hard or it will look fussy.

Don’t try so hard. It will just come to you and look that much better for it.

When you’re stuck, just walk away from the project for a while, then get back to work with new thoughts and fresh eyes.

If you are finding it difficult to develop ideas, take a break, then browse @smashingmag and let inspiration take hold.

Layout

The importance of layout was touched on in a lot of responses. Given everything that a design has to accomplish visually, layout is crucial. Functional design goes far beyond clickable elements and navigable depths. The bulk of it comes down to visuals and interactivity, both of which contribute to the function of the design.

Keep the main thing as the main thing.

Make your copy layout the backbone of the design as much as possible. The message won’t matter if it’s illegible.

Produce comps in black and white and in color so that clients can see the difference between the layout and the color and design.

Here’s a simple rule for good layout and positioning: make sure everything can be divided by four.

Use the “squint test” to evaluate a graphical layout: structure, contrast, spatial relationships, usability.

The Grid

When it comes to layout, there is a guiding force that most designers adhere to and recommend: the grid. The grid allows for a calculated and measured approach to laying out elements and making them work together so that the design is complete and functional. For many designers, the grid has no substitute for clean, professional design. Others use the grid to construct the initial layout but do not hold fast to it; they free themselves to break the grid if they feel the design would benefit.

Always design in a grid format; it never fails. Stay organized.

Build a solid foundation by harnessing the power of the modular grid before expanding into free-form design. It’s more intuitive!

The invisible grid: what you don’t see is as important as what you do.

Always use a grid. Then be sure to break it.

Your designs won’t look right until you truly understand the grid.

My fave design tip is: when doing page layout, don’t leave things to chance. Always use a grid.

Use the 960 Grid System as a design framework.

Use a grid. It doesn’t limit you; it helps you make decisions.

Mind the grid.

Visual Hierarchy

As you lay out a design and place various elements, craft a visual hierarchy within the piece. This is an important facet of every design; it is the communication with users. Ensure that a hierarchy is in place to guide the user and to highlight interactive and navigable elements. Without clues and attention grabbers, users will feel left behind, lost or overwhelmed. Some users may need just a moment or two to figure it out, but they are making up for the designer’s shortcomings.

Every page needs a visual anchor, something that draws the user in and dominates the design.

Establish a clear hierarchy of elements. It should be clear what to look at first, second and third.

Maximize the effectiveness of the experience, put controls and content in relevant spots, and create focus where it’s most important.

Be sure to look at your design in grayscale. You’ll see true contrast and get a sense of hierarchy.

Trust your eyes. If they aren’t naturally pulled toward the important parts of the layout, you bettah move ’em.

Advice From Outsiders

Don’t underestimate or forgo the advice of outsiders—those useful people who are not necessarily associated with the project (or even the field) but could provide invaluable insight and suggestions for improvement. An outsider’s perspective won’t be mired in all the details we designers get caught up in. Feedback from the community and from potential users usually helps the design process, so don’t skip it.

Don’t be afraid to ask for others’ opinions.

You can’t proofread too many times. Get other people to check your work, too.

Consider criticism from people outside of your creative circle; users and consumers are important.

Describe to a friend your new design project, and ask for their opinion. Write the feedback down.

Typography

Another focal point in design, according to our followers, is typography. No element should appear like an afterthought, but all too often typography comes out this way. Whether the sizing or color is ill-fitting or the text is simply illegible, improperly implemented type detracts from a design.

White text on a dark background looks cool, but you can’t read it.

Always use a good font like Helvetica, and don’t use Arial. If you are a designer, invest in some killer fonts.

Never underline text.

The right font will make your design stand out.

Make sure your website still works when users enlarge fonts. This is a huge (and often overlooked) problem that breaks websites.

Get really good at typography. It differentiates the amateurs from the pros.

Your type can and will be resized and mutilated by browsers, poor monitors and search engines. Plan for it.

Originality

Originality is the key to making a website stand out. One way to create original work is to know the rules that govern design so that you can purposefully break them. Without knowing the basic rules, how will you know you’re being original and not just treading well-worn paths?

Don’t limit yourself to what’s trendy. Originality means breaking from everyone’s comfort zones.

Try to find your own style! Be original.

Looking around for inspiration is good, but learn to incorporate more and more of your own ideas. It will make you a real designer.

Design is all about knowing when to follow the rules and when to break them.

Use others for inspiration, but don’t become them. Developing your own style is important.

Be original.

Intimately learn the fundamentals of your craft so that you’ll know later when to cast them aside.

Rules, tips and tricks are great, but rules are meant to be broken. Be different, but do what feels right and looks right.

Never be afraid to ignore trends; trends are defined by like-minded visionaries.

Trust Your Instincts

Your voice is the most distinctive aspect of your designs, so you use it. More importantly, learn to trust it. Your skills and design prowess got you the job, and you need to have faith that your instincts will make the project a success.

When put together, design tips look like mantras. This is counterproductive if you are as cynical as I am. Trust your instincts. Rebel.

Stop looking at it. It’s fine!

Trust your instincts.

When learning a new technique, try it before searching for a tutorial. You’ll often learn more that way.

Trust yourself, but always sleep on it.

Trust your gut.

Take A Break

Taking breaks is crucial in every project. Deadlines are important, but so is the fresh state of mind (mentioned earlier) that comes from being rested. If you’ve been racing for hours with your nose to the grindstone, then you owe it to your clients, yourself and the project to walk away and refresh your perspective. Let the design sit for a day or so, and then assess its appeal and effectiveness. (This is especially important when you feel you’ve come to the end of a project.)

Sleep on it, and re-evaluate it the next day.

As soon as you think you’re done, stop. Take a break of at least four hours. Come back and re-evaluate.

The design is never finished. Keep trying to improve what you have created. It will go from good to better to excellent.

Walk away from a project, simmer, and come back in a day or two to edit. Even when working with tight deadlines, it’s crucial.

Once you’ve “finished” your design, take a break, then go back to it and see what bits don’t need to be there.

Sleep Well

Get your rest. We designers must be alert and have sharp minds. Being well rested enables us to deliver the fresh and cutting-edge work that our clients expect. And no matter how many energy drinks we pour into our systems, one of the best recipes for clarity of mind is simple restful sleep. Tossing and turning for hours because you’re dwelling on the work that awaits you won’t revitalize you. Let go, and turn off the project for the night (or whenever it is that you sleep).

Sleep more.

Get enough sleep.

If you have the luxury of taking counsel with your pillow, do it! The morning is wiser than the evening.

A Few More For The Road

We got so many other fantastic bits of advice, and we wanted to pass them on to you without delving too deeply into them. So, here are a few more from the Web design community to take with you. Thanks to all our Twitter followers who shared their favorite advice, and thanks to you for reading through this long compilation post.

Stop thinking “campaign,” and start thinking “conversation.”

Optimize your workflow for elements that you reuse: presets, actions, customized panels and grid layouts save hours of time.

A design has 56 seconds to capture someone’s attention. A slideshow with call-to-action buttons solves this problem.

Design to meet the client’s needs, not to stay in your comfort zone.

Even a one-pixel line can change the feel of a design.

Creativity means allowing yourself to make mistakes. Design means knowing which mistakes to keep.

Literature can help your design. Invest in great books, like The Non-Designer’s Design Book and The Smashing Book.

Ask the right questions.

There is no fold.

Design, like love, is in the details. Paying attention to details can take a design from OK to awesome.

Be passionate about every design you create. That passion will make all the difference

If you make everything bold, nothing is bold.

Spend half your time learning, half your time doing and half your time teaching. Then rest.

Identity is consistency. Remember to align your imagery, message, colors and fonts across all design media.

No matter how long your website took to create, design and produce, if there is any doubt that it will work, start over or don’t deliver.

Think before you start. If you don’t, you’ve already failed.

word-wrap is the most useful CSS property that designers ignore: word-wrap: break-word;.

“Be consistent”: the mother of all design tips.

Design with code in mind. Know the capabilities and limitations of XHTML, Flash, JavaScript and CSS.

Always follow the four basic principles of CRAP: contrast, repetition, alignment, proximity.

Educate your client, educate them some more, and then educate them even further! An uninformed client is a huge obstacle in your design path.

Don’t stop at asking a question. Answer it.

Your best tools are analog: pen, paper, eraser, ruler, coffee, end users and other people’s perspectives.

The goal is not to live forever but to create something that will.

Failure isn’t the end point. It’s actually the starting point.

Links and the Like

Interestingly, when we called for design tips, many of them came in the form of links and basic theories of art and design. Our followers felt that designers should have a firm grasp of such knowledge, so we’re dropping them in here at the end so that they don’t slip under your radar.

Gestalt and principles of universal design are first and foremost.
Dieter Rams’ 10 principles of good design
“Useful Web Services, Tools and Resources For Web Designers”
“5 Pitfalls to Avoid for New Web Designers”
NASA design methods, color science and guidelines (very handy)
Must-have list: 35 Web Design Mistakes You Should Avoid
Eric Meyer’s CSS Reset, recently updated to version 2.0
More than just a tip: Michael Bierut’s 5 Secrets from 86 Notebooks

(al)

Go to Source

How To Become a Better Reader

Facebook-Web-Design — Fri, 15 Jul 2011 11:51:30 +0000

Don’t Take Things at Face Value

Blogs and online articles are an incredible resource. Whether you’re a Web newbie or a seasoned pro, there’s always something new to read and learn — whether it’s about an emerging design trend, usability best practice or a new property of CSS3.

However, every article ever written has something in common: they were all written by a person, and as much as we’d all like to be perfect, sometimes we get things wrong.

I’m not suggesting that a writer would intentionally publish something that was incorrect or misleading; that would be silly. What I’m saying is: don’t immediately assume that something you’ve read is correct, even if the author is someone whose opinion you respect and trust. Try doing a little extended research of your own afterward.

By using your own effort to dig deeper into what you’ve just read, you’ll be able to discover not only its validity, but also new information on the subject that you might not have otherwise come across.

Comments Make the World Go Round

Nowadays, pretty much every article you read will have the facility to leave comments at the end. Yet even on websites that get massive traffic, you’ll often see posts with barely any comments at all. Did no-one like the post, or did they simply feel it wasn’t worth commenting on?

A comment is more than just a simple “Thanks,” or “Good job.” Comments tell the author that you enjoyed the content they worked hard to produce, and encourages them to continue doing so in future — which means there’ll be even more for you to read!

Comments are a valuable and integral part of an online article, not a distinct entity that appears as an afterthought. Your comment doesn’t even need to be positive. If a post sucked, or was inaccurate, say so rather than ignore it. Even negative feedback has a part to play — just make sure your comments are polite.

Interact and Get Social

Comments aren’t always about you, the article or the writer. Often a conversation thread will develop between two or more commentators which diverges so much, it has little to do with the original topic. Occasionally a heated argument will form, which is always fun to read.

If you have your own opinion on what’s being discussed, become part of the discussion. By leaving comments that are more than just a quick “Thanks,” you’ll be contributing to both the article and the wider community.

There’s a good example of this in a recent Smashing Magazine article about transparent CSS sprites — the comments immediately descended into a discussion/argument about IE6′s handling of PNG files, which lead to lots of information-sharing and links to useful resources.

Don’t forget to make use of social networking buttons, if you can; the more people you tell about a good post, the more people will read it, which in the long run means more comments, more articles and more information sharing.

Take Your Time

Image credit: kekremsi

Jakob Nielsen in “How Little Do Users Read?” notes that visitors to a website will generally read (or skim) about 20% of the content. This is fine for the average e-commerce website, but it should not be the case when reading an article.

Articles are meant to be read, and read well. A 1,000-word article wasn’t written to be merely skimmed. A lot of thought, time and effort went into its creation.

To get the most from a longer piece of writing, you need to take your time; absorb the information; and appreciate it. In a long article, observations made early in the text may echo important points made later on. Longer or more complicated articles can seem quite daunting and may increase the temptation to skim, but trust me: take your time, persevere and you’ll get much more out of reading it than you thought you would.

Learn By Doing

There’s a tutorial for pretty much everything these days, so if you’ve read one that you think will be useful to you in future, make sure you set up a quick test page on your local machine and try it out — that’s the only way the lessons learned will really stick in your mind.

Even better, if it’s a front-end tutorial, fire up Firebug and play with the demo page instead! Simply trying to remember what you’ve read won’t work; a mere 30 seconds after you’ve finished, your short-term memory will have been overwritten with something else.

By looking at, writing and tweaking code, you’ll be making lasting imprints on your brain that will be invaluable for remembering function names, special libraries and reference resources when you need to reference and rewrite the code later on. You could use browser bookmarks to save things for later, but be honest: who hasn’t got a bookmark list a mile long that they’ve been meaning to go through for months, and probably never will?

Take Care When Dealing With Analogies

Analogies are a great way to explain complicated concepts to anyone, whatever their expertise level, because they use real-world metaphors to translate the details into something everyone is familiar with. However, analogies can only go so far; as the reader, you need to be careful not to take analogies too literally.

For example, if you were explaining Web browsers to someone unfamiliar with the Web and bring up the subject of browser speed, you might say that Google Chrome is like a Ferrari, whereas IE8 is like a pickup truck.

Even if they have never heard of Chrome, they’ll understand that it’s much faster than IE8 because everyone knows a Ferrari can go faster than a pickup truck.

The catch is that our non-techie friend may incorrectly reference that analogy when comparing other aspects of Web browsers — a pickup can, for example, carry more than a Ferrari — and may infer that IE8 can handle more open tabs, and crashes less, than Chrome (I don’t think so). Also, it’s often all too easy for a writer to find an analogy that supports their argument even if it’s incorrect — because the analogy may make sense even if it doesn’t accurately model the situation.

In Conclusion

Remember that as a reader, you’re at least half of the equation when it comes to appreciating Web content. I hope you’ve found these points informative and will put them to good use in getting more from what you read online.

Image credits: gfpeck

Go to Source

30 Blog Designs and Designers You Must Check Out

Facebook-Web-Design — Fri, 15 Jul 2011 08:40:59 +0000

Advertise here with BSA

Designing a blog can be a little more complicated than designing any other website: there are constraints you have to work in, limitations that can be frustrating and rules that can’t be broken without a whole lot of programming. The designs below, however, rise to the challenge.

Notes from Mountain View is a blog designed by Luke Beard, for Luke’s Beard

Seventeen WordPress Personal Blog Theme is a blog designed by Alex Pascal

Vivid Ways is a blog designed by Chris Spooner, for VividWays com

Glitch is a blog designed by Daniel Burka, for Glitch com

Dann Petty is a blog designed by Dann Petty

Nerduo is a blog designed by Mike Essl, for Nerduo

Vanilla is a blog designed by Lee Grant

Bric is a blog designed by Adam Parks

Bocan Andrei, for The Feed

Blog Redesign V2 is a blog designed by Brian Casel

Skylar Hartman is a blog designed by Ryan Rushing, for Ryan-Rushing com

Fran Melo’s blog is a blog designed byFran Melo, for FranVMelo com

Kissmetrics is a blog designed by Ian Main

Kayla Brown

Mmminimal is a blog designed by d_e, for Mmminimal com

Brite Revolution is a blog designed by Nick Sigler, for Brite Revolution

Dirty Old Town is a blog designed by Richard Winston Windsor

Warm Music Header is a blog designed by Rob Loukotka, for LA Music Blog

Design Cuisine is a blog designed by Alex Pineda

Table 37 is a blog designed by Nick Snyder, for Table 37

Tom Siodlak, for TomSiodlak com

Simon White is a blog designed by Simon White, for SimonWhite co uk

Nucroblog is a blog designed by Orçun İlbeyli, for Nucro org

Amit Jakhu is a blog designed by Amit Jakhu

Alan Horne is a blog designed by Alan Horne

retraktne is a blog designed by Mihael Konjević

Aurélien Loevenbruck is a blog designed by Aurélien Loevenbruck, for AurelienDeuxtrois com

inspiredmark is a blog designed by Mark Collin, for Inspired Mark

Board is a blog designed by Mark Abucayon

Peter Nappi is a blog designed by Nick Sigler, for Peter Nappi

Did we leave any of your favorite blog designs out? Be sure to share them in the comments!

Want to improve your blog design?

Get a custom WordPress blog design or a blog logo design on DesignCrowd today.

30 Blog Designs and Designers You Must Check Out

Go to Source

12 Free Bicycle Silhouette Vectors

Facebook-Web-Design — Fri, 15 Jul 2011 04:10:42 +0000

I’m pleased to release these new freebies: 12 free bicycle silhouette vectors. With the Tour de France in full speed and hitting the first serious mountain stage today there’s no better time to get your hands on these beautiful bike vectors. I’m a huge fan of the TdF and it’s great to see two riders from Luxembourg in the top 5. As you can imagine there aren’t many sport discipline where I can root for someone from my home country, let alone 2.

The set contains vectors of racing bikes, BMX, tandems as well as some bicycle pictograms. While I don’t ride a bike myself, like many designers I’m in love with the shape and geometry of bicycles. There’s something intrinsically beautiful about their clean, minimal lines.

Bicycle Silhouette Vectors Preview

All of these were created by hand in Illustrator and for the first time I could put the variable width tool introduced in CS5 to good use. Each bike is a group of different solid shapes so that you can easily alter the colour of the frame or change the spokes of the wheels. As with all the freebies released on the blog these bicycle silhouette vectors are free to use in both personal and commercial projects. Enjoy!

Download 12 Free Bicycle Silhouette Vectors

Size: 1MB, Format: EPS in zip archive

Go to Source

iNoobs: What is DNS? And How Does DNS Work?

Facebook-Web-Design — Wed, 13 Jul 2011 14:13:02 +0000

Advertise here with BSA

Before we get to What is DNS? How Does DNS Work? I’d like to first welcome to the first article in the Inspired Noob Series. My name is Zach and I’m spearheading this effort at Inspired Magazine. Although I’m a new addition to the team I’ve been working in web development for a while.

What is iNoob aka Inspired Noob?

Inspired Noob will be our weekly series for those new to web design and web development. We’ll answer important questions, and cover topics you MUST know if you’re going to be in the world of web design. Be it what software you should use to edit HTML, or how the process of hosting works, Inspired Noob will cover the gamut of things you should know in web design and web development.

Before we begin I would like to point out something I’ve noticed about web developers and designers – and I’m not sure it’s true of many professions, but I’ve definitely seen it in all of the most successful (technically and professionally) web developers and web designers I’ve had the pleasure of working with…

Web Developers are Jack-of-all-Trades with a passion for technology – specifically the Internet.

So if you’re interested in becoming a web designer ask yourself this:

Do you love to learn? Do you have a passion for the latest and greatest technologies, learning and assimilating all you can?

Although the old saying holds true, “Jack-of-all-Trades master of none” a web designer, freelance – or part of a team may be asked in any given day to help setup a server, create a design, and code some HTML, CSS, and Javascript – all of these somewhat unrelated and requiring different skills (and hemispheres of the brain!).

But, have no fear – if you have a passion for the net, and love to learn (and read our Inspired Noob series) you should do fine!

Who Am I?

How about you back off and not ask too many questions… who am I?! Who are you!

Just kidding, that’s a good question – and besides having a few different personalities while writing – I don’t like extolling advice on subjects I don’t feel 100% confident in my own abilities (although I do feel, because of my passion for learning J that NO topic is out of my reach). With that said I’ve been in the “professional” world of web development for over a decade. I started designing and coding sites back in high school.

My employer at the time knew I was good at computers and asked that I design their website. I read a few books, visited some tutorial sites and “voila” it was created. By then my dreams of setting up servers for small businesses had switched to building websites for small businesses – I was hooked. I read all I could about design, Photoshop, coding, XHTML & CSS (which were brand new at the time). I refined their site and got into marketing it (what made search engines tick and how to attract visitors and turn them into leads and sales).

Then I helped a national marketing agency start their own Internet Marketing department, until finally partnering up with my current business partner and creating Atilus –we’ve been in business for nearly a decade and have helped small and medium businesses get online, and grow all across the world. In that time I’ve had the opportunity to work alongside some amazing developers, designers, and other tech-savvy people and hope I can pass on some of this knowledge to you. I also run my own website with a team of writers where we help coach small businesses on how to best use the Internet and web tools (like Basecamp) to best run their business.

With introductions out of the way I now give you…

What is DNS & How Does it Work?

DNS is really two things – the acronym can stand for two things:

Domain Name Service & Domain Name Server

Two sides of a similar coin that work together in this crazy interweb’ed world to bring us a functioning network for computers (the Internet).

The best real definition for DNS I was able to find is:

The Domain Name System. A networked database primarily used to identify mail handlers and to resolve IP addresses from symbolic names.

But even then… what the HELL does that mean? Technical gobbly gook if you ask me!

Basically DNS works to convert the IP Address for which computers truly sit into pretty domain names – the ones you and I type in to visit sites, or send in email addresses.

Let’s look at an example.

Example of DNS in Action

I want to visit Google.com and do some searching. How do I do this? You guessed it; I launch my browser and type in the domain name Google.com into my browsers address bar. Then I’m taken to Google.com.

But, the whole process is a bit more complicated because my browser doesn’t just “know” where Google.com is. It must stop along the way, checking a number of different resources, before finding its way to Google.com’s home. Ultimately my browser is trying to resolve (a word you’ve probably seen when there’s a problem with your browser being unable to find a domain name) a domain name to its real location – an ip address.

Okay, taking a quick step back from the example, that’s also really important to point out.

What is Everything’s IP Address?

All websites, and stuff on the internet (email) are really located behind IP addresses. These are like the physical addresses of the internet. Don’t believe me… quick visit:

http://74.125.224.144/

That’s right, you just got to Google.

When you visit Google.com the opposite is happening. Your browser needs to “figure out” what IP address Google.com is using and it does this using the DNS system.

Back to the Example

So when you type in the address of the website you want to visit your browser says… “thanks boss, I’ll pull that right up, please hold on while I figure out the location (IP address) of this site.”

Your computer will then check the DNS server of the network you’re on (for example if you use Comcast as your ISP, it will check Comcast’s designated DNS servers in effect saying “Hi comcast, my owner wants to go to some zany site called ‘google.com’ would you happen to know where exactly that is.”

Then the DNS server replies with “F$%* yea I do! Here you go… http://74.125.224.144/” Your browser then shows you the designated stuff for Google.com from the IP Address http://74.125.224.144/.

Take a look at the following graphic courtesy of HowStuffWorks:

There you have it… in an nutshell that’s what DNS is and how it works. But there’s still one more thing you Inspired Noobs should know…

What is a domain server and what role does it play in web design – or how do you setup a domain to appear on a server!

But we’ll save that for the next Inspired Noob post.

iNoobs: What is DNS? And How Does DNS Work?

Go to Source

The Importance of Website Hosting

Facebook-Web-Design — Wed, 13 Jul 2011 14:12:37 +0000

Advertise here with BSA

I was reviewing some old posts here at Inspired, and thought I would rehash a post my fellow author David Murton wrote back in May about How to Choose a Proper Internet Hosting Service. I wanted to quick add my two cents…

Are You Looking for a Website Host?

I’m directing this at you! Why do you want a website host? Are you a small business owner looking to create your own website, or have you already selected a firm and are you trying to brush up on the whole process and learn just enough to be “dangerous?“

I’ve worked with dozens of different hosts over the years and no matter who you are, no matter WHAT your situation, the old adage holds true…

You get what you pay for!

But, let’s take a giant step back…

What is Website Hosting? What is a website host?

Whoa buddy… that’s two questions, are you going to pay me by the hour here… (who is he talking to)?

Those are two GREAT questions. Website hosting is simply the computer and network your website sits on.

Here’s a quick example:

Let’s say you own HorseMilk.com (that is a very weird domain name – and someone ACTUALLY REGISTERED IT!)…

Anyway, when a visitor types in HorseMilk.com into their web browser !bam! through a system of technical bells and whistles they end up making a request to the computer that is hosting YOUR website. That computer sends them the site files and all of a sudden they’re seeing your site (see graphic below).

Basically your website host, is your website’s home, it’s kind of like the plot of land your “building” aka your website sits on… But, it’s more important than that…

Often times you’ll ALSO run email through your website host. Meaning it’s also the means for which your business will communicate.

But, it’s more than that…

You’re putting up a website because you have something to show the world right? Even if it’s a teeny blog, where you can express your thoughts and feelings. But, it’s probably something more like a few pages to describe your business, or perhaps even a full store where you’ll transact BUSINESS. The point is, there’s a point… a point to you setting up shop in some way shape or form on the web. Unfortunately, unlike brick-and-mortar businesses servers fail all the time, and so do networks, and software, and any number of things, taking your website offline. Even if it’s a personal blog, in the moment inspiration sparks and you want to write, you want to know that you’ll be able to access and add to your website right?

Let’s recap

Why Website Hosting Is Important

It’s Your Digital Identity’s Lifeblood – a down host means a down site, means no business, means lost customers
Communication – If you’re running email through your server (@horsemilk.com for example)
Marketing – The better your website host, the better your search engine results

Hosting is interesting though in that, if you have a great host, none of the above are “issues” they just run, and you’re none-the-wiser. However, if there’s a problem, your business can quickly falter.

For more technical information on actually choosing a website host check out the How to Choose a Hosting Service.

The Importance of Website Hosting

Go to Source

A Brief Historical Overview of Typography Trends

Facebook-Web-Design — Wed, 13 Jul 2011 14:12:12 +0000

Advertise here with BSA

Typography has existed for thousands of years in various forms. Before we dive into the historical progression of this art, however, let’s start out with a solid definition.

What is Typography?

Typography is simply the art of letters and arranging type. That is, the evolution of type faces over time and how handwriting transformed into printed type.

Aside from the typeface, the other vital facets that make up the art of typography are known as point size, line length and leading. Further aspects to take into consideration are tracking (space between groups of letters, or words) and kerning (the space between individual letters).

Beginnings of Typography

Credit: oldmantravels

Around 5000 years ago, prior to the printed letters we typically think of that constitute typography today; the ancient Chinese, Sumerian, and Egyptian civilizations were communicating with each other using pictographs; a simplified set of images used to communicate messages to one another. This progressed into ideographs, which used more abstract versions of pictures and symbols respectively to describe objects and happenings. Eventually this progressed to hieroglyphics, which were developed by the Ancient Egyptians and utilized drawings to represent objects, events and even sounds.

Phoenicians to the Romans

The Phoenician alphabet was the first to include letters alone and was developed around 1200 BC The Greeks took this and added vowels. Finally, the Romans created their own alphabet with 23 letters that was a derivation from both Etruscan and Greek languages. Romans also added serifs, or strokes at the ends of letters. By the year 1500, the letters U, V and W were added as were punctuation marks.

The Role of Printing

Credit: NYC Wanderer

The very first system for allowing moveable type was developed in ancient China around 1040 AD by Bi Sheng, who crafted the clay method of printing. Barely any records of Sheng’s life exist, but what is known about him; aside from creating moveable type, is that he had no official stature or occupation. Moveable clay type soon evolved into the wooden form, allowing for printing to be done on a larger scale.

In the 1400′s, Johannes Gutenberg crafted the moveable type using lead, tin and antimony components, making it possible for materials to be printed in mass quantities. Using this revolutionary method, Gutenberg created the signature Gutenberg Bible in 1456. It was the first ever book to be printed and the finished product established the metallic method of moveable type as the definitive form of printing from then on. In fact, it is widely considered to be the most important invention of the second millennium.

The History of Typefaces

Several typefaces or fonts have been prevalent in modern history. Claude Garamond created the Garamond typeface, which was the first font to have the characteristic blocky look we associate with text today, rather than all previous typefaces that looked like handwriting.

John Baskerville was next, creating a Roman-esque typeface that included both thin and thick strokes with incredibly sharp serifs. And then Firmin Didot and Giambattista Bodoni came up with the Modern Romans in 1780, which use vertical stresses and super thin strokes. William Caslon IV created the very first sans serif typeface in 1816 and received harsh criticism for it.

By the time we get into the 20th century, however, there are numerous kinds of typefaces, many of which were developed by Frederic Goudy, who worked on the task full time making fonts like Broadway and Goudy Stout.

Modern Typefaces and Fonts

Credit: ibaldwindesign

One of the most popular typefaces of modern times is Helvetica, which was created by Max Miedinger in 1954. Once computers came into existence, typefaces and fonts expanded even more. Adobe created Postscript to describe fonts with math rather than pixels. The first fonts to be included on the Laserwriter included Helvetica, Courier, Times and Symbol. Each iteration of Laserwriter after that included more and more font selections. Type 1 postscript fonts are still the favored font types today because they are professionally designed and clean in format. Truetype is another kind of font technology, but it is not as reliable and often rejected by printers.

Now that the digital age offers the art of typography on the Internet, the scope for experimentation has never been wider. However, not every web browser is equipped to view every font. That’s why web designers are required to select web safe fonts like Times New Roman, Arial, and Courier New when developed text for the web. Otherwise, it could appear pixelated, blurry or, even worse, display unwanted coding.

It wasn’t until the Netscape browser was introduced in 1995 that diversifying fonts became a possibility. This was all thanks to the tag, which became standardized with the arrival of HTML 2. As web standards progress, the ability to utilize various, and customized, web fonts is becoming ever more of a probability; especially now that cascading style sheets (CSS) are common practice amongst web designers, developers and even those less savvy in style sheet language.

It could be argued that today’s typography trends tend to favour sans serif styles, due to its modern aesthetic. In web design, especially, sans serif fonts are used over serif in order to avoid the messy pixilation that is typical with many serif styles. While serif will never completely die out, its popularity has be considered as the progression and usage of digital technology evolves over time.

header image via kidcasanova

A Brief Historical Overview of Typography Trends

Go to Source

Infographics of The Week #3

Facebook-Web-Design — Wed, 13 Jul 2011 14:11:37 +0000

Advertise here with BSA

For those that celebrated the 4th of July, I hope it was a relaxing weekend and to all my fellow North Americans up there who celebrated Canada Day; I hope you safely returned home without getting a flash bang grenade thrown at your lower extremities. *wink* Regardless, I do hope that all of you stayed safe! Perhaps because of the weekend where Americans rips off their shirts and drink ’til they drop, the vast selection or inspirational infographics were a bit poor.

1. The Biggest Tech IPOs of this Year

Regardless, I do hope that all of you stayed safe! Perhaps because of the weekend where Americans rips off their shirts and drink ’til they drop, the vast selection or inspirational infographics were a bit poor. However, Single Grain’s graphic on the biggest tech IPOs this year, really caught my eye. The use of data and information! =) It’s pretty easy but I’ll touch base with you either tomorrow or Sunday.

2. The State of Education

With advances being made every day, it’s hard for education to keep up. It’s just one of those issues that need to be addressed, but as we know, it’s not just some walk in the park. I featured this one because it literally hit home for me. The Online Education team using the college rule notebook paper and creating the student-like point of view, as if a child were expressing their concerns, was completely ingenious. And completely hand drawn. The illustrations were down to the teeth, as if you were a student who doodled because they were bored and needed to be heard. =)

Take a look, you’ll see what I mean.

3. That’s What THAY Say

“ Hunch has a new product. It’s supposed to change our lives and revolutionize the Internet. THAY (Teach Hunch About You) asks the person a series of questions to find recommendations to the wherever it is, that Hunch thinks is best for you. For a bit more elaboration, go to Tim’s post and learn a little more about this scary but exciting new product.

Infographics of The Week #3

Go to Source

Freebie Friday: Free PSD-to-HTML Services Worth $300

Facebook-Web-Design — Wed, 13 Jul 2011 14:10:52 +0000

Advertise here with BSA

We continue our Freebie Friday series with a very special edition: $300 deposited to the markup-service.com account of one of our readers.This means that the winner can order markup, email template, or select among the variety of other options on their website. Scroll down to see how you can enter the giveaway!

What is Markup-service.com

Markup-service.com does amazing PSD to HTML conversion with a quick turnaround time and provides great customer service. They guarantee you’ll be 100% satisfied with their handcoded, W3C validated and SEO semantic markup which compatible with all major browsers . Markup- service also offers implementation into skins, themes, CMS, shopping carts and more.

Why work with them

great customer service and experienced friendly staff
strict NDA policy
money-back guarantee
fast quality work
high standards of web development

How to enter the giveaway

tweet this: win free PSD-to-HTML services worth $300 from @MarkupService & @InspiredMag http://su.pr/2qRfXn RT to enter!
leave a comment telling us what would you use the credit for

We’ll randomly pick a winner next Friday and make the announce here. Good luck folks!!

Freebie Friday: Free PSD-to-HTML Services Worth $300

Go to Source

Chromebook, Chrome OS & The Future of the Web

Facebook-Web-Design — Wed, 13 Jul 2011 14:10:09 +0000

Advertise here with BSA

I rarely make predictions, but after over a decade in the professional world of web design, I’ve recently seen a convergence of a number of different technologies and companies that are about to drastically (sort of) change the web, and how we operate computers. Before I get to where I believe the future is heading let’s review something:

XHTML & CSS

8 years ago XHTML & CSS were revolutionary. I won’t go into TOO much detail about my past (not that I want to be mysterious, it’s just mostly irrelevant), but I was lucky enough to get into web design with the addition of XHTML & CSS. You see, back then everyone used TABLES to build websites (some still do). The problem with tables was that you had to adjust EVERY page on a website in order to make a change, this took a lot of time, money, and just didn’t make sense.

Those problems all disappeared with the adoption of XHTML & CSS. No longer did a developer have to update every page in order to adjust the design or style of a site. Instead, CSS (cascading style sheets) told the browser what various XHTML elements needed to look like. In one tiny spot, you could define the background of a site, of a column, the color of text, etc. The seperation of HTML (markup/content) & CSS (the design), let to an explosion in web design. There were a few drawbacks (developers had to learn a new way to develop websites and a new way of thinking), but overall it has been a phenomenal change for devs, and site owners alike.

HTML 5 & CSS3

HTML 5 is the latest version of HTML (hypertext markup language) – the language for structuring and presenting content on the web. Most important within the context of this article is understanding the HTML 5 adds a number of new properties, namely APIs that allow your browser and websites to do things that were previously very difficult (requiring a myriad of other technologies to implement):

2D drawing
Timed media playback
Offline storage database (offline web applications)
Document editing
Drag-and-drop
Cross-document messaging
Browser history management
MIME type and protocol handler registration
Microdata

Where are we heading with all this? There’s a point here… I promise!

The Modern Computer

The modern day computer is [mostly] a means to access the Internet. A majority of users, even power users, use their computer to access online services and applications. And, even in the cases where some users continue to setup and install desktop software, many times that software already has an online counter part that competes with – if not exceeds - the capability of its desktop counter part. From email, through managing an organizations contacts and daily business all the way to managing bookkeeping and finances, there are MANY online tools for individuals and businesses alike.

Enter the Chromebook & Chrome OS

With all of the above in mind Google announced the development of Chrome OS back in 2009 – an operating system (an extension of Google’s Chrome browser) that continued this idea through to it’s final conclusion – THE OS IS ONLY A WEB BROWSER. There is little to no local storage (no downloading and storing files/music/videos) you simply open it up, turn it on, and visit websites.

Watch This Quick Presentation by Google:

Google’s understood the blurring lines between web applications and their stodgy desktop counterparts for sometime… they pioneered the space with their Google Docs/Apps solution for small businesses (an online document creation/editing/storage tool). The idea of centralizing applications is nothing new. In the early 90′s IBM spearheaded (successfully) the adoption of “thin clients” by many corporate customers whereby an organization would install a giant central server and then computers would connect through cheap terminals.

This is that idea on a grander, more decentralized scale. Now you can open up a Chromebook (the nickname for a computer with Chrome OS installed on it) and, once logging in via their Google Account, instantly be shown a customized experience based on the data in your Google Account – including bookmarks, web apps, etc.

99% of users today need their computer for little more than surfing the web (and using the powerful applications that have sprung up on it) and the Chrome OS is the best solution for these individuals and businesses. While building the Chrome OS Google kept the following in mind:

Instant-On Technology – Just pop open the lid and it turns on, no more waiting for your computer to start (typically 1.5 minutes)
Super Small/Fast – Using the latest mobile technology Chromebooks are super fast for web browsing and general multimedia activities
Inexpensive – This is probably where things will need to change for successful adoption. Chromebook’s which were very recently released, must come down in price. They are currently inline with similar tablet based solutions, but will need to drop in order to become a viable alternative.
Security – Built from the ground up to be secure, Chromebooks are useless without a Google Account, and can instantly be replaced without ANY fear of your data being compromised.

With all of the above in mind, it’s clear that the future of the modern computer is almost complete cloud adoption, with decentralized software and user data. Instead the computers of the future will connect to the websites users feel best accomplish their tasks and the idea of installing software will be a thing of the past.

Chromebook, Chrome OS & The Future of the Web

Go to Source

Chromebook, Chrome OS & The Future of the Web

Facebook-Web-Design — Wed, 13 Jul 2011 14:07:07 +0000

Advertise here with BSA

XHTML & CSS

HTML 5 & CSS3

2D drawing
Timed media playback
Offline storage database (offline web applications)
Document editing
Drag-and-drop
Cross-document messaging
Browser history management
MIME type and protocol handler registration
Microdata

Where are we heading with all this? There’s a point here… I promise!

The Modern Computer

Enter the Chromebook & Chrome OS

Watch This Quick Presentation by Google:

Instant-On Technology – Just pop open the lid and it turns on, no more waiting for your computer to start (typically 1.5 minutes)
Super Small/Fast – Using the latest mobile technology Chromebooks are super fast for web browsing and general multimedia activities
Inexpensive – This is probably where things will need to change for successful adoption. Chromebook’s which were very recently released, must come down in price. They are currently inline with similar tablet based solutions, but will need to drop in order to become a viable alternative.
Security – Built from the ground up to be secure, Chromebooks are useless without a Google Account, and can instantly be replaced without ANY fear of your data being compromised.

Chromebook, Chrome OS & The Future of the Web

Go to Source

3 Reasons Why Using WordPress Will Make You a Better Writer

Facebook-Web-Design — Wed, 13 Jul 2011 14:06:13 +0000

Advertise here with BSA

The world is slowly (painfully slow in some market sectors) becoming more and more aware of the power of WordPress as a publishing platform for both the large and small businesses. It’s never been more felt in the publishing industry for both the large editorial news publications and the individual publisher and blogger.

What’s been nice though to see is that as the advancement of publishing technologies has steadily increased so has the general quality of writing in the more reputable (and growing blogs). After having worked as a full time employee of NewsCorp (but now a full time blogger – much better, thank you!) and working with many publishers it was a pleasure to see how technology could begin to not only assist in robust publishing but also enhance it.

And one of the standout figures has been WordPress. Here are three reasons I suggested to many of my professional teams and now small businesses that they consider using it over their own home-grown system:

1. Universal

The universal nature of the many WordPress publishing applications allows publishers and writers to have access to their writing palettes and instruments nearly all the time. What happens, as a natural consequence, is people more engaged with their tools and subsequently more engaged with their writing.

How many times have you sat there without a pad and pen (or your iPhone) and said “Dang it! I have a brilliant idea for a blog post!” The challenges increase measureably as you try to move those thoughts into a publishing application to get back online.

[Image: Creative Commons, olivander]

But that challenge is dramatically being reduced with native applications for WordPress giving you the access to your canvas and the world with the click of a button. Writing can happen in real-time and we all know that the more you write the better a writer you become.

But besides the universal nature of the applications and use – let’s talk briefly about how it’s becoming more widely accepted as a tool and key publishing platform? With WordPress steadily growing marketshare this means that more and more people will be using it, become familiar with it, and leverage it more effectively. The outcauses of such use are better tools to complement WordPress, native plugins, and the core application itself.

As WordPress grows the userbase grows. As the userbase grows so does your audience. And if your audience grows then you writing potential (and demands) will become even greater. I’d like to think that your writing will get better as a bottom-line result.

2. WordPress Plugins

Because WordPress is an open source platform it gives developers the freedom to create amazing features that are not native or resident in the base installation. Recently, with the growth of WordPress in the editorial space, a bigger desire to have a toolkit that helps with editorial work is premium.

And the ecosystem around WordPress hasn’t disappointed. Here is one great example of a WordPress Plugin that directly impact your ability to write and write better:

JetPack is WordPress’ own release of a much-heralded robust set of tools that were strictly designed to enhance publishing efforts. For example, one feature is called After the Deadline which can help you check your spelling, grammar, and even style before you hit the publish button. You can customize it to ignore certain phrases that are used systematically and even fine-tune it for your editorial with bias languages, clichés, complex phrases, and even more.

Pretty incredible, right?

Or check out Latex, another powerful piece of Jetpack that allow powerful markup language for writing complex math equations, formulas, and more.

This is just one example of a killer WordPress Plugin that will enhance your writing capabilities as a publisher and it’s all thanks to the WordPress publishing platform.

There are even more than can impact the entire business (like Editorial Calendars) and so the advancements impact not only the contributor but the global organization as a whole.

3.Simplicity

Despite the universality of WordPress, the advancements of the plugin ecosystem, there remains, at the core heart of what WordPress is, a ease of use and simplicity that almost none can compete with.

This is a hard balance to maintain, especially as the voices of passionate users clammer for “more this” and “more that” – but what I admire about Matt Mullenweg (the founder of WordPress) and the team that he’s got around him is that there’s a hard and fast rule that anything they do is for the publisher first – to make sure that publishing content is as easy as possible.

It’s little things like the Full Screen mode that’s native in WordPress that allows you to remove the clutter of all that extra noise in your browser to just type the content the way you want it. The picture below is me using it right now!

Very sleek and effective.

Pleasant, right?

Or another neat feature is the ability to customize your screen options just the way you want it so that you don’t get distracted or unnerved by unused buttons or elements that you don’t need. You can even minimize elements that aren’t used often or make them disappear altogether.

It’s the art of creating a fine and robust product married with usability that WordPress has done time and time again – and it’s only getting better. By using WordPress you will become a better writer because is not only simple but it’s getting more usable every single version.

I hope that you will consider promoting, using, and sharing great blog content that is published through WordPress and have the peace and confidence knowing that you’re using the best darn semantic publishing platform that’s ever been created… so far.

3 Reasons Why Using WordPress Will Make You a Better Writer

This is a guest post by John Saddington. He is a Professional Blogger who loves sharing his blogging tips, tricks, tools, and practical teaching covering SEO, WordPress and making money through your blog! You can follow him on Twitter too: @TentBlogger.

Go to Source

How to Get Freelance Work While Still in School

Facebook-Web-Design — Wed, 13 Jul 2011 14:05:09 +0000

Advertise here with BSA

Freelancing is becoming more and more popular as a way for students to earn money on the side. If you are actually hoping to go into a career in design, freelancing can also provide a leg up to help you get either better paying gigs after graduation or a full-time gig.

But freelancing when you’re also going to school full time can be tough (note that by ‘school’ we assume the student is studying design at university or college – but we note that some readers might be in high school). If you’re at school, the reality is you will have to handle things a little differently than the average freelancer who’s finished his/her studies.

Starting From Scratch

It’s rare for a designer still in school to have a large portfolio. Whether you’re starting your freelance career in community college or university you may not even have the student pieces that designers who have already graduated can often fall back on. That means that building up a portfolio has to be your first priority, even before actually making money.

Assuming that you already know the mechanics of the type of work that you’d like to take on as a freelancer, you do have a benefit as a student: on the average campus, there are tons of organizations that don’t have any budget for a website, fliers and other design work – but they still have the need. Taking on just a handful of these projects can get you well on the way to having a solid portfolio.

If, however, you aren’t particularly familiar with how to actually do design projects, it’s usually better to start with your own projects, rather than taking the time to learn on something that someone else expects done by a certain date. You can always use projects that you’ve done for yourself in your portfolio, although it’s best to replace them with work done for clients when you’ve got a little more experience under your belt, if only to show people that you’d like to work with in the future that you’re comfortable taking direction.

Managing Both Studying and Working

image via sxs112.tw

A key issue for many student designers is finding a way to handle commitments to classes and clients. Considering the cost of attending college – and the potential issue with parents or others involved in helping you stay in school – making sure that you’re getting good grades and completing all of your school work is usually far more important than earning some money on the side by freelancing. So prioritize your school work.

Only take on the freelance work that you know that you have time for. There are plenty of ways to pick up smaller projects that you can fit in around essays and labs, such as bidding on smaller projects through sites that bring a whole bunch of clients together.

Make the effort to learn about time management and use tools that can help you keep everything on track. It’s not necessary to try out every different project management system out there or build one from scratch – the important thing is not which system you use, but the fact that you use a system in the first place. The same will hold true with keeping books for your business and sending out invoices. After all, just because you’re a student doesn’t mean that you won’t be expected to pay taxes on the money you earn while freelancing.

The Question of Age and Experience

For some students, more so for those in high school than nearing graduation from college, age can be an issue. Even clients who are choosing the cheapest freelancer they can find want as much experience as they can afford. If they know you’re a student, or worse, not even legal to drive yet, they may be a little more wary of working with you.

Unless you’re directly asked if you’re a student, it’s often best to just keep mum on the subject. Employers can’t ask job applicants their age, and freelancers don’t need to confess just how old they are. You don’t need to list the fact that you’re a student on your website and you don’t need to give out your age. Unless there is something very specific on your website or in the way you communicate with a client (like using your school email address), most people won’t even ever ask you about whether you’re a student or not.

Resources to Get Started

Inspiredm’s Freelance jobs board (new)
DesignCrowd’s Freelance jobs
DesignCrowd’s School logo design jobs
DesignCrowd’s Student logo design jobs
Logopond’s Inspiration gallery

Try our new job board now!

How to Get Freelance Work While Still in School

Go to Source

50 Inspirational Photography Logos

Facebook-Web-Design — Wed, 13 Jul 2011 13:57:16 +0000

Advertise here with BSA

If you’re a freelance photographer, or are involved in a photo festivals or studio, there’s no shortage of photography logos to inspire you. Though photographers aren’t logo designers, they are creatives with their own style which tends to be reflected in their logo. Common motifs of photography logos include cameras, lenses, film, viewfinders, frames and tripods. Check out this collection of 50 inspiring photography logos before you set out to create one yourself!

Mel Marie Photography

Dominic Whiten Photography

YouSnap

Silfver Creations

Jaipur Photographer’s Club

Japanize Photo Festival

Straight from the Heart Photography

Fotomaker

Angela Fouquette

PhotoSushi

Kasper van den Broek Photography

Jomaks

Daniel Moyer Photography

FotoFito

SpinShot

Siah Photography

Photocast

Schild Tamas

Dmitriy Barabash

Naz Mulla photography

Nelson Machin Photography

Russian Landscape

Adent Art Photography

Ocean

Sergio Roberto Fotografia

phosmile

Flash Group

Moeys Photography

Global Exposure

Littlest Birds Photography

The Property Image

Luciana Justice

Trudi Le Brese Photography

Bullock Photos

FotoFusion

Gary Pepler

JP Photography

Jayne Taylor Photography

Jade Tinkler Photography

Sixshot Photography

Jennifer Davis Photography

Elias Joidos Photography

Frame Page

Camora Photography

Colour Photography

Jodie Potter Photography

Say Cheese Photography

Ruben Parra photography

Chasing Sky Photography

Clint Shuttlesworth Photography

Conclusion

Did we miss any of your favorite photographer logos? Do you think photography logos could do better by going beyond the tropes and motifs of the field? Let us know in the comments!

Need a photographic design?

Hire Stoian Hitrov, a freelance graphic designer from Bulgaria.

Looking for freelance design work?

Find photographer logo design jobs or photographers seeking a photographer logo maker jobs at DesignCrowd.

50 Inspirational Photography Logos

Go to Source

FYI Monday: Quirky Hand-Drawn Illustrations by Mattias Adolfsson

Facebook-Web-Design — Wed, 13 Jul 2011 13:10:43 +0000

Mattias Adolfsson is a freelance illustrator living in Sigtuna just outside of Stockholm, Sweden. All Mattias uses for his artwork are pen, ink and watercolours. It’s really refreshing to find someone creating such amazing traditional art. All of Mattias works have a very quirky element to them. The most impressive thing though is the sheer volume of pieces that he’s produced. For more inspiration make sure to visit his Behance portfolio.

Go to Source

FYI Monday: Powerful Cosmic Art by Vigan Tafili

Facebook-Web-Design — Wed, 13 Jul 2011 13:10:22 +0000

Vigan Tafili is a graphic designer from Peja, Kosovo. Vigan’s work is vibrant, colourful and full of cosmic elements. The most impressive thing though is that he’s only 16 years old. I don’t know about you, but I don’t often come across a designer that young with a body of work that extensive at that level. There’s no doubt in my mind that Vigan has a bright future ahead of him. See for yourself below. For more inspiration make sure to visit his Behance portfolio.

Go to Source

Google’s Black Bar & New Look

Facebook-Web-Design — Fri, 01 Jul 2011 19:36:21 +0000

Advertise here with BSA

If you’re like me you’re a power user – on the net constantly – you have an account on every sharing and social site, and you jump at the latest technologies – even if they DO flop and they are sometimes less than useful.

Well, over the last couple of weeks Google has slowly been revealing their new design, and it’s mysteriously been marked by Google’s new black bar. If you’ve been following the news Google has made an unbelievable amount of changes and announcements over the last couple of days. Google first released information on their “Facebook Killer” social network called the Google+ project.

Then just hours later, the roll out of the new design was announced and all of this just days ago.

Android is the dominant phone operating system, chrome is fast becoming the most popular browser, Google.com completely destroys the competition in search – as always Google has been hard innovating and creating new projects and implementing changes.

Back to the black bar – for those of us with Google accounts, the bar is not of much note, it’s been around for years. But, only recently did it switch to black, and really begin to pop.

What is Google’s Black Bar?

Google’s new black bar is simply a new design for the Google interface as a whole, the black bar being the common denominator among many, if not all, google services. Take a look at the shot I just took:

Simple, elegant, exactly what a good design update should be. I suspect it’s prominence and the new contrast the dark color adds will also help introduce Google’s myriad of services to a whole new audience – as they realize – what that MORE drop down is for!

Google’s New Interface – First Impressions

I’m a HUGE fan of Google’s new interface. I’m not sure if it’s been rolled out throughout the US and the rest of the world at this time, and I’ve noticed a rollout of services over the last few days (starting with the black bar, continuing with a complete overhaul of Maps, and finally seeing Google’s completely redesigned home and search interface).

I’ve wanted to see a complete overhaul since the days of me first stumbling up the talented designer Andy Rutledge and his ideas on Google Redux – a complete design overhaul of Google. Over the years Google has made modest changes, mostly as new features required. As a web designer myself I do understand that sometimes, it’s best to leave well-enough alone, until such time that features and tools have been locked in. Ofcourse this is also a dangerous trap as any website, application, or giant brand – like all of Google and it’s services – are ever-evolving.

With that said however I think now is the perfect time to overhaul the design, creating a unified theme and optimizing the site for speed and simplicity. Where as other sites like Yahoo and Bing are at best overly colored and a reminder of “the old web” and at worst, horribly overburdened with content and imagery that distract from a single purpose – Google’s new interface(s) streamline a visitor’s distractions, keeping single goals in mind – all across different services.

Although mostly cosmetic additional updates including instant search (without having to select the search field on Google’s homepage (google.com) make searching EVEN quicker – how quick can this get? I did hear a Google researcher say his ultimate goal was to have you be walking around and simply utter a search query and magically get results (in your head, auditorily-not a word, visually, etc.). Although that technology may be just over the horizon:

For now Google’s updated interface is a welcomed change that is sure to solidify Google’s stronghold on each industry and service it enters.

Google’s Black Bar & New Look

Go to Source

Popular Methods of Website Navigation

Facebook-Web-Design — Fri, 01 Jul 2011 19:35:43 +0000

Advertise here with BSA

The design and navigation of a Website appeals to the users more as compared to other things, suppose you visited a famous Retail Showroom in your locality. You observe that the materials of store are not organized at all. You find it difficult to walk in the store as items are scattered even on the floor and the paths are blocked. Would you purchase anything from such a place? No, instead you’ll leave the store at once. The same incident can happen with your Website if its navigation is not defined properly. The Website Navigation should be self explanatory to every visitor so that he/she can understand the Website’s layout and get the desired information easily. In this write up, we’ll throw some light on the famous Website Navigation Methods being used these days.

Horizontal Navigation

This is one of the most common and widely adopted navigation systems. The text/icon links are placed horizontally and clearly separated from each other in one row. The user can click on any item to visit its Web page.

Horizontal Navigation Layout at Apple.com

In Horizontal Navigation, you’ve to limit the number of links to be added. However, you can use this navigation for drop-down menus discussed later in this article.

Vertical Navigation

In this form, the text/icon links are arranged vertically. They are either placed in left hand sidebar or in right sidebar. Placing the options in left sidebar is considered to be outdated these days. We suggest you to use Vertical Navigation as a secondary navigation method and use it on the right hand side.

An example of Vertical Navigation from open-comms.com

You’ve seen various blogs showing text links arranged vertically in the right/left side bar. This is another form of Vertical Navigation. The best part is that you don’t have to limit the number of links/objects in it. You can add n number of objects in Vertical Navigation with a scroll bar.

Drop-down Menus

Suppose you’ve arranged your Websites in order of categories and sub-categories. Now, how you will arrange the Website navigation in a self-explanatory. The best way is to use drop-down menus. You can arrange the drop-down menus either horizontally or vertically. However, this format should be familiar for the users.

Horizontal Drop-down Menu example from Puma’s Online Shopping UK Website

Vertical Navigation Drop-down Menu System from Porshe USA Website

Tabbed Navigation

Suppose you’ve to provide a wide variety of information but you’ve limited space. You don’t want the visitors to visit the different pages for a similar type of information what will you do. The similar problem arises with Internet Explorer 6 as its users have to track all the opened windows to gather information on a single type. That’s why they come up with Tabbed Browsing. You can use Tabbed Navigation in your Websites and build tabs to arrange similar information without creating different pages. We suggest you making use of Adobe SpryTabbedPanels Framework to create the tabbed navigation. You can either go for Horizontal Tabs or Vertical Tabs.

Horizontal Tabbed Navigation at http://365daysofastronomy.org/

Vertical Tabbed Panel at http://www.districtsolutions.co.uk

Almost each user is familiar with the Tabbed Navigation in software and browsers. So, the users get a feel at home while navigating through tabs. They know from where to start and where to go to get relevant information. If you’re not using pre-existing code to create the tabbed panels then it may take weeks to code them.

Breadcrumb Navigation

This is another famous secondary navigation system. It allows the visitors to keep track of their locations while visiting different, but related sections of the Website. The Breadcrumb Navigation can have both text/image links arranged horizontally or vertically in the order: Home > Section > Sub Section > Sub-Sub Section. Windows Vista and Windows 7 are using this navigation within the Address Bar in Windows Explorer. In addition, the advanced GPS applications are using this navigation.

Breadcrumb Navigation used in Windows 7

Guided Navigation

It is also known as Faceted Navigation. The filters of different options are provided on the Web page in this Navigation System. The visitors can use these filters/lists to get the desired & customized information. The Guided Navigation is mostly used at e-commerce or shopping Websites as it allows users to tailor their shopping experience and get the things, which they’re looking for. If the provided options are limited to customize the search the users can get confused. So make sure to provide all the options valid for your product while using Guided Navigation.

An example of Guided Navigation at Porshe.com

Tags Navigation

Tags are the META data referring the keywords used in a Web page. The tags are widely used in Blog and News articles. In fact, tags are used to inform the search engines about the keywords used on a page. However, the visitors can also use them. These tags are either created in Flash animated or static HTML clouds.

Animated Tag Cloud

Static Tags in a Widget at Sidebar as shown at sunblognuke.com/blog

Search Navigation

The navigation through search box is not new to us. You’ll notice a search box at each Website you visit. This box enables you either to search within the Website or at World Wide Web. You can enhance the Search Navigation at your Website by using the APIs of Google, Ask, Blekko, Twitter Search, and Bing.

An example of Search Navigation at Zappos.com

Footer Navigation

Footer Navigation is mostly used as a secondary navigation system on any Website. Basically it has the links or icons in the footer and this footer remains similar across the whole Website.

An example of Footer Navigation at seo-semantic-XHTML.com

Sitemap

As the name depicts, Sitemap provides a complete map of your Website. You can either arrange it using bullets in nested levels or through organizational charts. The visitors can use the sitemap to have a quick glimpse of your Website and know how many pages/sections you’ve on the Website.

Sitemap at linkbuildingworks.com

Conclusion

The Website Navigation System is an integral part of a Website. It not only helps to keep the visitors engaged but enables him to find the relevant information and importantly helps the search engine robots to crawl your Website efficiently.

Popular Methods of Website Navigation

Go to Source

From New URL to Full-blown Website in 5 Minutes?

Facebook-Web-Design — Fri, 01 Jul 2011 19:35:09 +0000

Advertise here with BSA

Having a ~~relatively~~ popular blog is quite challenging as you have to come up with new stuff every day, be consistent and all that so it’s kinda hard to launch big side projects. That’s why our most important project took around 12 months to be developed but it’s almost ready to help you build fast websites and will rock your designer & developer socks off!

What is 5minSites?

The easiest way to start your online presence with a new URL, premium hosting for 12 months and customized web design! Oh, and you’ll get all this in less than 5 minutes!

Is this even possible?

Yup, although Steve Jobs would tell it’s MAGIC!

When do you launch?

We’re adding the last few features to the app and the beta version should be done by the end of June!

Is it free?

No, this can’t be free as it implies registering a new URL, hosting for 12 months and customizable web design, But we priced it like all the apps we use every day - incredibly affordable for its value!

How do I get to use it?

Because it’s pretty innovative and it needs a lot of resources, during the beta version we have to limit access to 1,000 people who subscribe on our teaser page so be sure to get there fast.

From New URL to Full-blown Website in 5 Minutes?

Go to Source

From New URL to Full-blown Website in 5 Minutes?

Facebook-Web-Design — Fri, 01 Jul 2011 19:30:09 +0000

Advertise here with BSA

What is 5minSites?

The easiest way to start your online presence with a new URL, premium hosting for 12 months and customized web design! Oh, and you’ll get all this in less than 5 minutes!

Is this even possible?

Yup, although Steve Jobs would tell it’s MAGIC!

When do you launch?

We’re adding the last few features to the app and the beta version should be done by the end of June!

Is it free?

How do I get to use it?

Because it’s pretty innovative and it needs a lot of resources, during the beta version we have to limit access to 1,000 people who subscribe on our teaser page so be sure to get there fast.

From New URL to Full-blown Website in 5 Minutes?

Go to Source

From New URL to Full-blown Website in 5 Minutes?

Facebook-Web-Design — Fri, 01 Jul 2011 19:25:37 +0000

Advertise here with BSA

What is 5minSites?

The easiest way to start your online presence with a new URL, premium hosting for 12 months and customized web design! Oh, and you’ll get all this in less than 5 minutes!

Is this even possible?

Yup, although Steve Jobs would tell it’s MAGIC!

When do you launch?

We’re adding the last few features to the app and the beta version should be done by the end of June!

Is it free?

How do I get to use it?

Because it’s pretty innovative and it needs a lot of resources, during the beta version we have to limit access to 1,000 people who subscribe on our teaser page so be sure to get there fast.

From New URL to Full-blown Website in 5 Minutes?

Go to Source

Less Than Three: A Love Poem in Internet Slang

Facebook-Web-Design — Fri, 01 Jul 2011 19:25:04 +0000

Advertise here with BSA

By Alexa Lash – a writer, editor, and on-the-spot poet. Former Floridian and resident Bostonian, she has written for the Seminole Chronicle, Momslikeme, and the Central Florida Future, and is currently working in the Journalism Department of Emerson College.

this is n00b <3,
tru love,
though u prolly knew that.

np
i’m ok w/it
u kno
2b loved like an old computer
sans the comfort
of ctrl+alt+delete
though we could pretend
it’d work
to fix the errors in our relationship,
to brb at the beginning
or w/e.

but w8—
it’s 2 early for that;
we’re more like puppies
(lol soooooo cute!),
eggs, overly ez.

I shk,
w/o fear,
that 2nite we’d move
from puppies to
full-on canines,
teeth sharpened
into cya l8r,
into I don’t so much love u,
as h8 u.

d/w, baby
h/o, baby
so long, baby.

no longer n00bs.
just pwned by feelings.

omg, it hurts.

Less Than Three: A Love Poem in Internet Slang

Go to Source

Less Than Three: A Love Poem in Internet Slang

Facebook-Web-Design — Fri, 01 Jul 2011 19:23:52 +0000

Advertise here with BSA

this is n00b <3,
tru love,
though u prolly knew that.

np
i’m ok w/it
u kno
2b loved like an old computer
sans the comfort
of ctrl+alt+delete
though we could pretend
it’d work
to fix the errors in our relationship,
to brb at the beginning
or w/e.

but w8—
it’s 2 early for that;
we’re more like puppies
(lol soooooo cute!),
eggs, overly ez.

I shk,
w/o fear,
that 2nite we’d move
from puppies to
full-on canines,
teeth sharpened
into cya l8r,
into I don’t so much love u,
as h8 u.

d/w, baby
h/o, baby
so long, baby.

no longer n00bs.
just pwned by feelings.

omg, it hurts.

Less Than Three: A Love Poem in Internet Slang

Go to Source

40 Minimalist Print Ads That’ll Catch Your Eye

Facebook-Web-Design — Fri, 01 Jul 2011 19:20:30 +0000

Advertise here with BSA

While print advertising always seems like a marketer’s dream when compared to online ads, it’s yet another field where it’s getting more and more difficult to cut through the noise and deliver the client’s message.

In the digital age, the attention span of the consumer is razor thin, making it harder for advertisers to secure attention whether it’s in print or on the web. To combat this, we’re seeing advertisers reach for a minimalist approach, using little copy and sparse imagery to convey a message simply that gets attention more for what’s not there.

Below is a showcase of 40 creative and beautifully designed minimalist print ads. The messages are quick and easily digestible. Take a look!

Ace

Alka Seltzer

Bic

Bounce

BMW

Cafe Venezia

Canadian Dental Association

Cannes Young Lions

Calgary Farmers Market

Citric

Coke

Colgate

Dig2Go

Durex

The Economist

Faber Castell

FedEx

GeekSquad

Hospital Aleman

Heineken

Heinz

Hubba Bubba

Jeep

Jeternel

LA Folding Bike

Lego

Listerine

McDonalds

Mitsubishi

MTV

Orbit

Orion

Oxy

Play-Doh

SanDisk

Sensodyne

Veet

Volkswagen

Western Union

WWF

Conclusion

Advertisers are going to greater lengths than ever before to captivate our attention. Where will they turn next? Tell us what you expect the next great print advertising trend will be in the comments.

Need a print designer?

Hire Jordan Gladman – the author of this blog post.

Print design jobs:

Find freelance print ad design and print design jobs online at DesignCrowd.com.

40 Minimalist Print Ads That’ll Catch Your Eye

Go to Source

40 Minimalist Print Ads That’ll Catch Your Eye

Facebook-Web-Design — Fri, 01 Jul 2011 19:16:21 +0000

Advertise here with BSA

Below is a showcase of 40 creative and beautifully designed minimalist print ads. The messages are quick and easily digestible. Take a look!