Things to remember when designing websites for gaming consoles

Mar 13
2013

consoles

Surfing the net from a dedicated gaming console is not something new, in fact the ability to connect your gaming device to the internet was first introduced back in 1997 with the Game.com which allowed user to connect a dial-up modem and then check their email and browse the internet. However still to this day many designers ignore or pay very little attention to game console browsers when designing a new site. However there are some things that you need to remember when you are designing for a gaming console, added here are some of the most important things to remember, feel free to let us know if you think we forgot something.

Perhaps the biggest reason why so little importance has been given to the gaming consoles is that even though many households own either a Wii U, Wii, Xbox or Playstation, there is still a relatively small number that uses these devices to surf the web. The biggest problem is that these devices were not built for internet browsing and therefore they simply feel clunky when used to navigate the web.

According to StatCounter, the Sony PS3 accounts for just 0.1% of all web activity. Wii and Xbox browsers don’t even appear in the chart, although that’s possibly because they’re intermingled with Opera and IE9 statistics.

What consoles should be tested?

So the first thing you should decide when making your website more console friendly is what consoles will you test your site on, of course we know that you will not be able to test your site on every gaming device on the market, however it is recommended that you test on at least two major platforms so you can create as user friendly a website as possible.

  1. Consoles that plug into a TV screen, such as the Nintendo Wii, Sony PS3, and Microsoft Xbox 360.
  2. Handheld consoles such as Sony’s PSP, PS Vita and Nintendo’s DS and 3DS.

Different Consoles, different Challenges

Each different console brings with it different challenges, the biggest challenge is that even though the resolution is often higher than normal screens gamers sit much further away from their consoles, furthermore since they are not using a mouse to control the browser their clicks might not be as precise, another problem is that many game console browsers don’t support flash or CSS features.

What can designers do about it?

As more and more users will visit your website from a gaming console you can use different progressive enhancements that make it possible for people to access your site’s content even on a device that doesn’t support certain features. Another thing you can do is make sure your website loads as fast as possible. Even though some users will visit your website from a TV capable of showing HD quality you need to remember that not everyone has a Smart TV and therefore you should make sure your site also looks good on older screens.

console.maban.co.uk is really a great resource for information on how browsers function on different gaming systems, UK developer Anna Debenham created the site that provides descriptions, controller details, screen resolutions, user agents, JavaScript support, Flash versions, HTML5 test scores and a wealth of other information.

 

The post Things to remember when designing websites for gaming consoles appeared first on Design Reviver - Web Design Blog.

Vintage Is the New Modern

Jan 21
2013

Remember those vintage types you came across the other day? And the day before? That’s trending at the moment in what looks like the revival of a retro-20s-60s style in graphic design. Some might even say it goes up to the 80s. How time passes… Take the vintage letterpress, one of the most popular types in the vintage collection. It has conquered both the print and the web design.

django_poster What? How do you know it’s vintage? The same way you know a dress is from your mother’s closet because it smells of lavender and it looks like a hit of the 60s party scene.

This is an interesting and somehow counter-intuitive trend to observe in a world where the demand of VCP-510 professionals, cloud computing and 640-802 study guides are on the rise, but a fascinating phenomenon nevertheless.

Strong, yet sensitive. Rugged, yet refined. Reminiscent of western print and advertisement, book covers and posters, recreating the flavor of the 20s, 40s up until the cheerful typography style of the 50s and the 60s. It looks old, but it feels fresh. Its nostalgic feel can stir feelings and awake memories and has the undeniable potential to appeal to a wider audience. Even some of the names have the whiff of the good old days: Victoriana, Avant Garde, Coffee Tin, Ecolier…

With globalization in fullswing though, it’s very hard to geographically delineate the popularity of the vintage style in graphic design, but it does tend to be a common presence in western cultures. To see what we’re talking about, but mainly just to feast your eyes, you should check the NYC Type project, a collection of types and typefaces found in New York City. Try to spot the vintage ones. You’ll see how the vintage style feels quite at home here. Wonder why…

title image copyright of screenrant

The post Vintage Is the New Modern appeared first on Design Reviver.

Choosing Fonts & Typefaces

Sep 14
2011

Typefaces come in all shapes and sizes, and much like smells and sounds, have the power to conjure emotions, meanings, and correlations. But instead of being paralyzed by the overwhelming number of typefaces in your drop-down menu — or worse, inadvertently misrepresenting the information with an uninformed typeface choice — peruse the following guide to help navigate these sometimes confusing waters.

 

 

 

 

 

 

 

 

 

 

CLASSIFICATIONS

The contents of a typography library can be broken down into four primary classifications: serifs, sans serifs, scripts, and decorative typefaces. Before delving into the sea of available typefaces, start by understanding the types and generally accepted uses of each classification.

  • Sans Serifs are best recognized by their lack of ornamentation. With the advent of the internet and ever-evolving printing techniques, sans serifs are used consistently in almost every capacity due to their easy legibility at nearly every size. Sans serifs are most effective at quickly and concisely displaying information to the reader without any underlying emotional or visual triggers. Designers have also adopted the sans serifs’ simplicity to create a modern or minimalist feel when relevant to the design of their project. On the flipside, take extra care when using a sans serif for identity or branding efforts. The lack of decoration leaves little to brand as specific to one company or a visual identity. Common Sans Serifs: Helvetica, Arial, Verdana, Tahoma, Futura, Franklin Gothic, Gill Sans, and Univers
  • Sans Serif Typeface Example

 

  • Serifs, in the most basic form, are a sans serif typeface with small finishing strokes at the beginning and end of each letter stroke. Serifs are commonly used as the default typeface by nearly everybody from the average email user to professional designers. From the design perspective, serif typefaces are often used for body copy because it is widely believe that the smooth arcs help lead the eye easily through large amounts of text. They are also a good choice for business and formal correspondence, marketing materials, and myriad media due to the under current of credibility and professionalism they project. Within this classification, there is a subset know as slab serifs, which feature block-like, heavy serifs that do not naturally run into or join to the next letter. Due to their weight, slab serifs should predominantly be used for headlines. Common Serifs: Times New Roman, Georgia, Book Antiqua, Garamond, Century Schoolbook, and Bookman (Common Slab Serifs: Courier and Rockwell)
    Serif Typeface Example

 

  • Script typefaces are modeled after handwriting, and are often used to introduce a human feeling or connection to the reader. Varying from child-like scribbles and chalk letters to elegant calligraphy, script typefaces are effective at introducing fun or sophistication to a computer-generated piece. Scripts are most often used in formal, or decidedly informal projects (see the example below). Scripts rule the world of personal design from invitations to announcements. However, the use of scripts in corporate design should be minimal, as they do not project authority and reliability. Common Scripts: Comic Sans, Monotype Corsiva, Mistral, Lucinda Handwriting, and Brush Script
    Script Typeface Example

 

  • Decorative (also known as ornamental or display) typefaces typically fall into the serif category due to their highly ornamental nature. As their name indicates, they are highly decorative and best used to create or reinforce design styles and themes in large sizes (such as headlines). Their otherwise unique letter shape can be refreshing and attention getting. They can also be used to mimic the emotions and aesthetic of a specific genre or time frame. However, the intricate strokes often used to create these typefaces make them undesirable for use in large amounts of text or at smaller sizes, and therefore are not ideal for body copy.  Avoid using highly decorative typefaces in news or business reports, as they tend to detract from the neutrality for which most organizations strive. Be wary of over using a decorative typeface, or choosing a one inappropriate to the subject matter.
    Decorative Typeface Example

 

CONVENTIONS

When choosing typefaces its important to keep in mind the established conventions for the medium at hand. This is not to say that conventions cannot be broken — after all, design s all about breaking rules — but its important to know what the rules are before breaking them.

Websites and online projects require a typeface’s compatibility with the largest common denominator of computers, which usually necessitates the use of otherwise familiar or commonly used typefaces. As such, web standards have been quickly been defined with the use of a sans serif for body copy paired with a serif, script, or decorative typeface for headlines and subheads.

The opposite can be said for print pieces. It has become the collective opinion of most designers that the smooth arc and small leading lines of serifs helps the eye move comfortably through large amounts of text, and as a result, the serif has become the champion of body copy. In recent years, studies have proven that though serifs are not necessarily easier to read, rather our eyes are trained early on to believe they are. From this point the classic nature versus nurture paradox exists. Whatever the case, serifs remain the universal choice for body copy.

 

CUSTOMIZATION AND STYLING

To further customize or illustrate your intent, try playing with variations of weight (regular, medium, bold, heavy), width (narrow, condensed, extended), italics, outline stroke, and color. The adjustment of any of these components can severely alter the visual cues your typeface relays to the reader.

AVOID OVERUSE

Finally, and this can never be said enough — think twice before using the following typefaces: Comic Sans, Curlz, Papyrus, and Times New Roman. This is not an editorial on their quality or usefulness in the proper context. When observed in a vacuum, each font has its merits. Unfortunately, the designer needs to account for all external influences and these fonts have been overused to the point that even the most unobservant passerby can probably identify them by name. The last thing a designer wants when presenting information is to allow the message to be obscured by the typeface.

When choosing typefaces, classifications and best practices should merely be a guide to jumpstart the creative process. Good Luck!

The post Choosing Fonts & Typefaces appeared first on Design Reviver.

The secret of obtaining higher website design rates

Jun 13
2011

Are you a web designer or developer who wonders if you are getting paid what you feel your skills are worth? Although earnings will always vary depending on geographical location, basing your skills set and experience on a solid foundation of raw talent is still what really counts in this industry.

With the employment of graphic and web designers set to expand by between 7% and 13% by 2018 this infographic will give you a better idea about the areas in which you should be honing your skills in order to improve your salary.

Infographic depicting web salary trends in the US.

Average Salary for Web Design and Web Developer jobs

Dona Collins is an infographic artist, blogger and financial writer at CreditLoan.com. When she is free you can find her on twitter and other times you can find her writing articles for creditloan blog.

Create Virtual Business Cards with Identyme.com

Dec 22
2010

IdentyMe is a new service that lets you create and share your own customizable virtual business cards. These cards can contain more than just your contact info, you can add portfolios, resumes your social profiles and lots more.

Creating a card

The registration and setup process is really simple it literally takes a minute to fill in all your contact details and create your card. You are then guided to fill in the rest of your details step by step.

Customization

There are some great looking themes to chose from so you can quickly add some personality to your business card. An html editor is on the way soon so you will be able to take full control of the design.

Portfolios

One of the coolest things about Identyme is the ability to upload a portfolio of your work which you can separate into albums allowing you to easily showcase different projects. To accompany your portfolio you can if you wish also add a resume to your Business Card, fill in the predefined questions and/or upload a pdf or word document of your full resume.

Social profiles and contacts

Easily collect all (and I really mean all, Identyme is compatible with 150 social networks) your social profiles and contacts into one place. Indentyme allows you to upload and search all your contacts in one place.

Conclusion

In summary Identyme is a handy tool for easily sharing examples of your work and collecting all your contacts together. The portfolio feature is specially useful and the collection of customizable themes are genuinely novel and well designed. The service is available to try out for free but there are a number of paid upgrade options available.

Do you know of any similar services to Identyme? or have you had any good or bad experiences with this app? Please let us know in the comments!

20 Top Invoicing Tools For Freelancers

Dec 21
2010

As you take on more clients it becomes increasingly difficult to keep accurate track of costs and the hours you should be billing for.  Keeping poor records will ultimately start to cost you money, thankfully there are a great selection of tools available to help.

There are more to benefits to these apps than just staying organized. Some of these apps enable small businesses to take the kind of control of their finance that was once just the preserve of big businesses with dedicated accounting departments.

Below we’ve compiled a list showcasing what we believe are the best 20 invoicing tools for web designers/developers in no particular order. However a word of warning’ be sure to choose your app with caution, once you have started using one it can be difficult to migrate if you later encounter limitations. Always sign up to free trials where available and compare a few alternatives before making a decision.

Billing Boss

Billing Boss allows anyone from freelancers to a small businesses to quickly and efficiently bill clients with an unlimited number of invoices. This app lets you add as many clients as you need to your database and help you stay organized by instantly saving and cataloging you invoices.  Billing Boss seamlessly integrates with Paypal so you can reach clients worldwide with its great support for multiple currencies.

Simple Invoices

Simple Invoices, a static web-based invoicing application that allows itself to be installed on a web-sever or a Windows PC. It can also be hosted by one of the following service providers as well.

LessAccounting

Not only can you invoice but you can easily keep track all of your business expenses with LessAccounting. You can put organize your expenses into categories, add notes and even upload a pictures of your receipts for each expense.

FreshBooks

Streamline your business with recurring invoices. Set up auto-billing to automatically charge your client’s credit card. Quickly and easily invoice clients in any currency. Create your invoice, select your currency and you’re done.

Blinksale

Blinksale is a great looking web application that has a powerful feature set. Blinksale has a quaint option that allows you to send invoices via snail-mail, whatever that is!  You can also customize your invoices by uploading your very own logo or if you have some time on you hands design your own invoices with CSS.

Billing Manager by Intuit

Billing Manager is a web-based invoicing solution that lets you create invoices, send professional estimates, and helps you get paid online.

In addition to online invoicing and estimates, Billing Manager lets you send PDFs of your invoices, send reminders to your customers, process eChecks, accept all major credit cards online and choose currencies.

Simply Invoices

SimplyInvoices integrates seamlessly with Basecamp so you can easily invoice clients the exact amount of time you have spent on a project..

Cashboard

Quickly invoice for time logged against a project, materials, or other goods. Create invoices for your projects with one mouse click, or set up recurring invoices to bill your customers automatically.

Bill My Clients

BillMyClients is a hassle-free way for businesses to quickly & easily create and print invoices and bills online. It makes it a breeze to send those same invoices via e-mail and the United States Postal Service – all without leaving your desk.

The Invoice Machine

The Invoice Machine takes a new clever approach to online invoicing. It’s beautiful and simple-to-use interface makes producing professional looking invoices a very pleasant experience. Create new invoices in a snap. Set options like currency, taxes, shipping, discounts, language, notes and more.

InvoTrak

Invotrak is a full-featured online invoicing and timesheet tracking application that can save you time and money. It’s also includes many of the features you need to speed up your billing tasks.

BillingOrchard

BillingOrchard provides enterprise electronic billing solutions through a simple, secure interface, supported by top notch service and priced for small businesses.

Invoice Journal

Use the client list to enter your customers into the Invoice Journal system and easily retrieve them later when you need them. When its time to create a new invoice simply type your clients name, company name or email address and Invoice Journal will show you which clients match your criteria.

Browse, sort and search all of you invoices quickly and seamlessly. Since there are no limits or restrictions on the invoices you create there is never a need to delete or archive invoices.

SmartInvoice

Smart Invoice is an easy to use, full featured, web based billing and time tracking system designed specifically for small businesses, freelancers, and other independent contractors. Use the recurring billing feature to send regular invoices to clients automatically – no extra effort required.

MarketCircle

Billings powerful application for the Mac features with stylish designs so you can send elegant invoices right out of the box. Choose from any of the customizable templates, or create your own with the built-in WYSIWYG designer. Either way you’ll send polished professional invoices in seconds. Billings also has a fantastic looking iPhone App.

InvoicePlace

Manage your billing and quotes from the office, home or on the road. Create invoices and quotes for any type of product or service. Use Invoiceplace no matter what you sell be it paint, jumping castles, hardware supplies, or cell phones.

Time 59

Time59 is web-based software that let’s you track billable time and expenses, create and e-mail invoices, and record payments. Time59 keeps everything perfectly organized. Critical details and totals are instantly available. Time59 on your mobile device is included FREE with your account.

PaySimple

With PaySimple billing and receiving payments is safe for you and your customers, all information is securely stored with 256-bit encryption and SSL protection.

ProfitTrain

With ProfitTrain you’ll easily be able to keep contact information up to date, store reoccurring services and products, send estimates and export to spreadsheet for more exotic totaling.

Harvest

Harvest lets you and your staff track time and send invoices from one integrated application. Use Harvest’s visual reports to see the distribution of your company’s resources at a glance. Create an online invoice and easily bill your client. Get paid faster by collecting online payments from your clients instantly and securely via the web.

Do you know of any other invoicing tools that work great for designers/developers? or have any good or bad experiences with any of these apps?  Please contribute and share with us what you’ve found.

Web Designer’s Holiday Gift Guide

Dec 07
2010

It’s that time of year again. It’s time to start thinking about what gifts to pick up for your family and friends (and maybe even yourself) for the holidays. And if you happen to be buying for a web designer this year, we happen to have 10 awesome holiday gift ideas that web designers will cherish.

1. Adobe Photoshop CS5

Adobe Photoshop CS5

Adobe Photoshop CS5

You all knew this was coming first, right? What’s a top 10 list without Adobe Photoshop? With the release of Creative Suite 5, Adobe has boosted Photoshop’s features and delivered more flexibility and design options. And web designers know that a powerful graphic and image editor is essential to be effective at work. With holiday season discounts from Adobe, you can snag a copy of Photoshop CS5 starting around just $600.

2. Apple iPad

Apple iPad

Apple iPad

Not only are Apple iPad’s the hottest item since sliced bread, but they’re less than half the cost of a quality laptop. They’re essential to have around if you’re designing for mobile devices, applications and varied device resolutions, and not to mention (we drool over how cool they are). If you really want to make a web designer happy this season, surprise them with an iPad (starting at just $499).

3. SanDisk Ultra® Backup 16GB USB Flash Drive

SanDisk Ultra Backup 16GB USB Flash Drive

SanDisk Ultra Backup 16GB USB Flash Drive

SanDisk has introduced the SanDisk Ultra® Backup USB Flash Drive which is the first USB flash drive with a backup button. With three models available: 16GB, 32GB and 64GB, web designers can store lots of files, images, drafts, proposals and more. Buy online from Staples.com starting at $89.99!

4. CSS3 For Web Designers

CSS3 For Web Designers

CSS3 For Web Designers

A Book Apart continues its web design book series ‘…for people who make websites’ with Dan Cederholm’s masterfully written “CSS3 For Web Designers”. With the emergence of new methodologies like HTML5 and CSS3, it’s always important for us designers to study up on the semantics so we can stay ahead of the game. Purchase “CSS3 For Web Designers” as paperback, ebook or a bundle of both.

5. Basecamp

Basecamp

Basecamp | 37Signals.com

Basecamp is a robust project management software solution for managing almost any type of web project. Millions of people already use Basecamp, and it’s the preferred project management tool of several multi-million dollar brands. Don’t have a large organization? That’s okay too. Basecamp starts with a “Small Group” plan that costs only $49/month.

6. Apple Magic Mouse

Apple Magic Mouse

Apple Magic Mouse

The Apple Magic Mouse is a must-have for Mac-lovers. It’s a wireless, bluetooth-dependent multi-touch mouse that allows for seamless operation. Make sure you have the required hardware and software before buying the Magic Mouse. Details can be found on the Apple website or by clicking the link above.

7. Typekit Portfolio Plan

Typekit Portfolio Plan

Typekit Portfolio Plan

Typekit is a really cool web service that allows web designers to use a large library of stylish fonts that were previously unavailable for use on websites. For web designers who have started using CSS3 on a regular basis know that in order to use a large variety of fonts on their projects, they must adhere to license agreements for font usage on the web. Typekit makes the “licensing agreements” a non-issue, allowing designers to stick to what they do best — using great typography. Purchase a “Portfolio” plan for a friend and spend only $49.99/year.

8. The Smashing Book

The Smashing Book

The Smashing Book

The Smashing Book is a byproduct of Smashing Magazine which is an awesome read for designers. It’s a printed book that covers best practices in modern web design. And as a treat, The Smashing Book also shares some exclusive information about the background of Smashing Magazine. This is a must-have gift for web designers!

9. Custom Laptop Skins

Custom Laptop Skins

Laptop Skins

Surprise someone with a custom or pre-made laptop skin from Schtickers.com. Schtickers gives you total flexibility; allowing you to add custom graphics, text and backgrounds to their removable and reusable laptop skins. Create a custom laptop skin to fit the dimensions of your specific laptop! Very affordable, thoughtful gift for a web designer.

10. Quality Headphones

Headphones

Headphones

Last but not least of the great gifts for web designers are a set of quality headphones. Lots of web designers enjoy listening to music while working. However, a set of half-broken headphones that barely work anymore aren’t going to get the job done. Do someone a favor and get them a quality pair of headphones that will last the test of time. The Amazon.com Headphone Department has a great selection. Get shopping!

There are plenty more great gifts for web designers that could have been included in this entry, but I decided to narrow the list down to the top 10. Any web designer would be lucky to receive any of the above. I know I would be. Happy holidays and happy shopping!

CSS Validation, How Important Is It?

Oct 29
2010

A really interesting question was asked recently on Answers, discussing the importance and relevance of CSS validation. It would be interesting to discover how much stock developers actually do put in to it, or, is it more important to focus on the actual page being able to function? We would love to hear from you.

You can leave your thoughts, tips and insights in the comment section below, or you can leave your answer on the original question on Answers here: CSS validation, How Important Is It

CSS validation, how important is it
This question was originally asked by Ben G.

Here is the best answer, as voted by our users, so far:

CSS validation, how important is it

So, what do you think, how important is CSS validation?

Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.

Three Fresh CSS Frameworks

Oct 28
2010

CSS Frameworks are those marvelous and innovative tools that will speed up your web development process by taking care of the multitude of repetitive processes you would have to cover for every project, and on top of that, they (mostly) take care of any cross-browser compatibility issues. They have also never been as popular, with new frameworks cropping out from week-to-week. As such, in this design news round-up we have selected our favorites from recent months.

The Square Grid

The Square Grid is a simple CSS framework for designers and developers, based on 35 equal-width columns. The grid is equiped with a 28px baseline-grid for a smooth vertical rhythm with each block (DIV) defined with a margin of 1 square (28px) from the next block.
The Square Grid

FEM CSS Framework

The FEM CSS Framework is a 960px width 12 column grid system. It is based on the 960 Grid System, but with a twist in its philosophy, making it more flexible and faster to play with boxes.
FEM CSS Framework

Formalize CSS

Formalize CSS is a useful framework for giving your forms a cross-browser uniformity.
Formalize CSS

By Paul Andrew (Speckyboyand speckyboy@twitter).

4 New jQuery Plugins

Oct 26
2010

In today’s news round-up we feature four powerful and new jQuery plugins that will add plenty of cool functionalties to your sites or applications.

Phono – jQuery Phone Plugin

Phono - jQuery Phone Plugin

Phono is a simple JQuery plugin and JavaScript library that turns any web browser into a phone; capable of making phone calls and sending instant messages. You can even connect to SIP clients; all with a simple unified API.
Phono – jQuery Phone Plugin

Wijmo – jQuery UI Widgets

Wijmo - jQuery UI Widgets

Wijmo is a complete kit of over 30 jQuery UI Widgets. It is an extremely dangerous mixture of jQuery, CSS3, SVG, and HTML5 that when combined become an unstoppable force on the web.
Wijmo – jQuery UI Widgets

SlideNote – A jQuery Plugin For Sliding Notifications

SlideNote - A jQuery Plugin For Sliding Notifications

SlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application.
SlideNote – A jQuery Plugin For Sliding Notifications

IMGr – jQuery Image Rounder

IMGr - jQuery Image Rounder

IMGr is a jQuery plugin for rounding image corners. The script utilizes CSS3 in modern web browsers, and VML in Internet Explorer 8 and below.
IMGr – jQuery Image Rounder

By Paul Andrew (Speckyboyand speckyboy@twitter).