Posts Tagged ‘book’

Creative Uses for QR Codes


Nowadays we look around and all over the places see QR codes embedded into the ads, buildings, billboards, newspapers, cups, clothes and even into the roads.

The usage of QR (Quick Response) codes in promotional marketing is a great idea and just one more awesome way to engage people to your brand and company.

Commercial texts, free coupons, URLs and other data can be artfully hidden behind the black modules arranged on a white background. Their simple, but outstanding and unusual design makes them easy to notice and utilize. Moreover, barcodes are really cheap and budget method of advertising, you can simply put the code on any printed material and track a response rate through Google Analytics. But the gold of QR codes is that they enable to convert the advertisement from a passive experience to an active income and entertaining interactive game!

Using creative and remarkable QR codes you can grow your sales and attract more fans. Just put yourselves in shoes of your target audience and you’ll by far understand what you want to get. Before showing your QR masterpiece to the World check out it carefully. You should remember that the more shorter your URL encoded to a QR is, the better it will be scanned by smartphones. Use a URL shortening service to shorten the link. For a good conversion, the barcode has to implement only one action: shows the website, gives you a discount, some secret data or displays the image.

Almost all QR codes, to be more exactly about 99.9%, are scanned by smartphones, so think over the mobile version of your website. One more important trick is to place your code where the potential customers have a free access to the Internet. So, spend a little bit time, to create your own QR code and keep your brand on the cutting edge of marketing.

Below we’ve showcased some crazy ideas how your QR code could look like and where you could use it. Hope you’ll get a great doze of inspiration and stunning ideas. Enjoy!

QR Code Business Card

QR code business card

Both useful and stylish solution for businessmen. This business card not only shows the important data and contact info of the owner, it immediately connects you with their website.

QR code London billboard

QR billboard

You can’t go by a huge barcode and don’t notice it, if you have a smartphone in your pocket just scan it and receive the important message.

QR Code Ring

QR code ring

Unique and remarkable QR code ring helps to deliver the message in an unusual and memorable way.

QR Code Flyer

QR code flyer

What can be more easier than to interact with the visitors of your cafe in a such amusing way? Try and you’ll always know what your clients think about your services.

QR Window Code

QR code window

You can sell and rent apartments just by encoding a website URL, email address or a cell phone to the barcode on a window and stay connected with all your client 24/7.

QR Code on the Street

QR code on the street

A creative agency invented one more way to help homeless people and raise funds for those who spend their nights on the streets.

Calvin Klein QR Code

QR Calvin Klein code

As once Calvin Klein campaign was banned because of inappropriate images, it releases “Get it uncensored” drive with the code which links to the new line of jeans.

Stainless Steel QR Code

QR code stainless

It’s really very handy when the keychain contains the information which can be decoded by the smartphone app.

Personalized QR Code Pillow

QR code pillow

Print your personal QR Code on a pillow and all your quests will surely appreciate your unique home accessory.

QR Code Necklace

QR code necklace

QR code is a popular trend and cool thing to stand out, but if you keep your identifying info in it, it can be also helpful in a case of emergency.

QR Code in Amsterdam

QR code in Amsterdam

Do you want to have fun? Scan the barcode and get to know what is hidden behind it.

QR Code Cupcake

QR code cupcake

Delicious cupcake is decorated with editable image of QR code which leads to the Clever cupcakes website.

QR Code Mug

QR code mug

Raise your mood with a cup of tasty coffee and wise or humorous quotation which will appear on your smartphone screen after scanning the code on the mug.

QR Code Dice

QR code dice

It’s a real pleasure to play with this monochromatic QR dice, especially if you like the versatility of QR code appearance.

QR Code Lamp

QR code lamp

This stunning lamp will be a good design solution for QR code design lovers.

QR Code by Space Invader

QR code Space Invader

One more decoration in the QR code style, it won’t lead you to any website, but it will surely make you smile.

QR Code T-Shirt

QR code T-shirt

An amazing idea to put a barcode on your T-shirt, so everyone has an opportunity to scan it with their smartfone or simply enjoy your style.

QR Code for a Good Time

QR code for a good time

Are you looking for a company of interesting fellows? Don’t pass this poster, maybe it includes the invitation to the cool party, scan it and have fun!

QR Code Holiday Card

QR holiday card

Very original and creative way to congratulate your beloved or friend with some special event.

QR Coding

QR coding

Attach the QR code to you key chain and help your Facebook followers like your Fan page and become your fans :)

QR Code Belt

QR code belt

Do you want to stand out against the crowd? Wear QR code belt and impress your friends with this outstanding accessory.

QR Code Gloves

QR code gloves

Eye-catching knitted gloves with black and white QR code on the backside make your day bright and memorable. They can be also a good present for your friend.

QR Code Plate

QR code plate

QR code plate decoration attracts clients’ views and make them curious to know what they can see after scanning. Maybe, the cafe offers one more free cake for the most curious persons?

You may also like…

50 Vintage SNES Official Game Artwork →
The Beauty of Minimalist Music Posters →
Around the World with 35 Famous Lego Monuments and Buildings →
30 Classic Music Albums Recreated With Lego →
21 Amazing Movie Posters Recreated with Lego →
39 Creative and Sometimes Controversial Examples of Playstation Advertising →
20 Vintage Computer Adverts (Apple, IBM, Microsoft, Commodore…) →



Weekly Design News – Resources, Tutorials and Freebies (N.117)


This is our weekly column were we share our favorite design related articles, resources and cool tidbits from the past week. Enjoy :)
If you would like to receive our daily updates and keep up to date with the latest and greatest articles and resources from the design community, you can follow us on Twitter, on Facebookor by subscribing to our RSS feed.

Developing a Responsive Website: Background Images

Developing a Responsive Website: Background Images

Webfont Icons: an Alternative to Images

Webfont Icons: an Alternative to Images

How Commercial Plugin Developers Are Using The WordPress Repository

How Commercial Plugin Developers Are Using The WordPress Repository

HTML5 Reset Version 2

HTML5 Reset Version 2

The All-New CSS3 Click Chart

The All-New CSS3 Click Chart

Animated Web Banners With CSS3

Animated Web Banners With CSS3

Prevent Password Reset WordPress Plugin

Prevent Password Reset WordPress Plugin

iPhone, iPad & Browser Wireframe Templates

iPhone, iPad & Browser Wireframe Templates

Meander Free Font

Meander Free Font

Free Typeface NeoDeco

Free Typeface NeoDeco

Social Media Icons Pack

Social Media Icons Pack

Mini Cards: 15 Credit/Debit Card Icons

Mini Cards: 15 Credit/Debit Card Icons

This Week on CodeVisually

We recently launched CodeVisually, our site that focuses solely on resources and tools for web developers and offers a simple solution to painlessly find the resource needed and fast.

Here are our favorite webdev resources from the past week:

Create

Create

CraftMap

CraftMap

ResponsiveSlides.js

ResponsiveSlides.js

impress.js

impress.js

Revolver.js

Revolver.js

PxLoader

PxLoader

W3Clove

W3Clove

CSSrefresh

CSSrefresh

Previous Weekly Design News…

Design News Roundup Archives →



How Profile Photos Can Affect the User Experience


Social networks have grown into the norm in today’s sophisticated Internet. Modern web pages have become very personalized over the past decade including a number of user interface features. One such example is the user profile picture often accompanied by each username.

featured image - bar cafe breakfast style

Web designers don’t often realize how important this profile photo can be. It distinguishes a blend of personality between each member. And this feature also has quite a few other handy applications to the user experience ultimately offering a clearly recognizable icon. Below I’ll go into some examples of how user photos can improve your website’s performance.

Offer a Default Option

When users first sign up for your website it’s best practices to generate some type of generic avatar. Without this your profiles will look strange having some members with custom photos while others are blank. Most CMS systems including Joomla!, WordPress, Pligg, and vBulletin all offer a standard user picture by default.

example default icons through Google+

If you take some time searching through Google you will likely find a few other excellent examples. This default photo gives incentive for new members to customize their profile details. This holds especially true with members who have profiles on a number of other networks – generally I like to keep all my photos consistent between sites.

Display Photos Wherever Reasonable

Some website layouts are a bit cramped for space and just can’t facilitate room for user pictures. But I would advise almost always including a user’s picture on central pages. It can even be argued to match the user’s photo with every instance of their username.

Foursquare  founder Dennis Crowley

This reinforces the idea that each profile link or page comment is connected to a real person. The glyphs will become familiar over time and you can easily distinguish between links to user pages vs article pages.

There are plenty of areas where you may wish to omit the photo, or resize it altogether. Such an example may include a “recently logged in” widget in your sidebar or footer area. In order to display the last 15-25 active users you could setup a small block of avatars in 3-4 rows. But to fit these in place you may need to resize the images a bit.

Apply Unique Sizes

Of course the dimensions and overall size of your default avatar is crucial to the design. Larger photos will have a much deeper impact on visitors as it will certainly catch their attention quickly. On a similar note there will likely be pages that you want to include smaller photos.

This is why it’s always best to store at least 2-3 different sizes of avatars. Start with your largest (say 150×150) and scale down based on your needs. Plan out the user interface ahead of time so you can fit in reasonable dimensions. Just a few alternate areas to consider are within page comments, shared links, and on other friends’ profiles/following list.

New members on Design Shovel - sidebar widget

There are plenty of free scripts and tutorials available which can help you resize avatars automatically. Why spend time rewriting programs from scratch when there are templates you can work off? These scripts will also save room on your server without needing to save 2 or 3 local copies of a similar image.

Pictures in Discussion Threads

Over time the most active members on your website will become more recognized. Along with their usernames, including a personal photograph can become extremely memorable. The social news website Reddit doesn’t use any photos and yet plenty of members are recognized by username alone.

old screenshot from Digg v3 comments thread

But understand this is certainly not the majority! Most blogs, discussion boards, web forums, social networks, and IM apps all utilize some type of user photo for easy identification. Many users eventually become a staple to the website community between repetitive comments, massive followers, and other social activities.

On some websites you’ll even find signatures in discussion threads. These are small areas underneath the post content which is specific to each user. You can customize your signature with a graphic, website links, text, really anything you want. But for more standard blog platforms this is a bit too “over the top” for regular discussions. It’s still interesting to compare the different styles and how they play well with profile photos.

Consider your own Brand

It’s great to get behind this issue from a realistic point of view. Ponder for a moment if you were to sign up for such a similar social network, how would you incorporate your own avatar brand? The answer may differ between networks (ex: Facebook vs Twitter) but ultimately your goal is the same.

You want to be recognized quickly and easily by all your visitors. It’s just as important to the average user that their profile is recognized as quickly as a company or brand. This is why I recommend using a generally larger photo size – maybe square 200px or 250px – to represent each person. Position it in alignment with the user’s name, location, or other important metadata.

A good example of this layout is from Digg’s old v3 profile design. Avatar photos were generally aligned to the right with more detailed user information cascading along the left side.

screenshot from older Digg v3 profile page

OAuth Connections

If you feel that custom functionality for user photos is too much to implement you may consider using Open Authentication. With this open API protocol it’s easier than ever to connect into a user’s 3rd party account and pull their data remotely. This includes usernames but more importantly also includes profile photos!

Twitter bird plush doll

The Twitter Developer Center is an excellent example of heavy documentation for OAuth calls. You will need to understand a backend language such as PHP, Ruby, Python, or something similar. It is possible to access user icons through JSON/JavaScript, but it’s certainly not the most recommended method.

San Francisco at Night

Also here’s another article from Google support documenting a basic OAuth call. You can already see how this method would save you time as a developer. But it is also very convenient for your members from a UX perspective. Between Twitter and Facebook it’s likely that most of your new signups will have some option for importing a user picture. This saves your new members the hassle of re-uploading another picture.

Conclusion

These ideas are not exactly new to the web, although they have been adapting steadily over the past few years. OAuth is just one technology which has gotten the ball rolling. It is clear we’re moving towards a cloud-based interconnected transparent system of communication and these protocols are merely a stepping stone in the process.

Overall it is your decision on how to approach personal user data. If you truly feel your website wouldn’t benefit from user photos then you’re likely not missing out on much. But understand the connections which are formed through these recognizable pictures and how they may provide a crucial impact in your community.



Benefits and Pitfalls of Using Code Frameworks

Advertise here with BSA


A code framework is nothing more than a collection of pre-formatted classes and functions. There are frameworks created for practically every language out there – even including frontend web development like JavaScript and CSS. Developers would be wise to follow these trends of working on top of pre-built code.

There are reasons both for and against building on top of web frameworks. You need to spend time learning the code and adjust your website accordingly. But in the long run you’ll save a lot of frustration as many common features are already created for you! Let’s delve into these ideas a bit more and consider some of the most popular frameworks today.

Improvements for Web Developers

Building products for the web can be one of the toughest development jobs. Rules are not set as standards in the same way Windows or Mac OSX programmers follow. Web developers need to work on a server architecture, generally writing in a backend programming language such as PHP or Ruby on Rails.

PHP is by far the most recognized development language for creating dynamic websites. You can build snappy applications working with databases in a short amount of time. And the new PHP5 specs have included a whole slew of additional functionality. The benefits of working on PHP frameworks means you don’t need to start from the very beginning. It can be stressful to include a set of 3rd party libraries and build up your own system from scratch.

Happy Wintertime Snowman

But there are plenty of alternative PHP libraries which each focus on a different set of functions. Some may help you setup a simple blog, backend CMS, social network, or a handful of other common templates. And when you build upon open-source frameworks you’ve actually got a whole community of developers behind you for support.

Model-View-Controller

The MVC hierarchy is crucial to understand when building with frameworks. If you have ever coded software or applications before then developing for the web seems very cryptic. MVC doesn’t appear to make much sense on a standard web page.

However when you include a database connection the functionality of a framework starts to take form. You have a model of functions crunching information to save/pull from the database. Then you have a view of HTML/CSS styles on the frontend, along with a controller generally represented by forms or inputs on the page.

industrial smokestack for business

Frameworks which follow the MVC coding style are generally a lot faster and easier to debug. You know exactly where to look for errors and bugs within the code. It also naturally separates the backend programming from your frontend design view. Because of this, much of the code you find online will also likely work on your own site.

There is a lot of room for recycling code to use on a similar project. This can save you loads of time as a developer and many hours of debugging!

Focus on Custom Functionality

When you start coding with a framework it allows you to jump right into the detailed programming functions of your own project. Since all the ground work is already setup you don’t need to rewrite any of the basics. If you understand the basics this can provide an immensely helpful system.

Most code sources are extremely reliable and thoroughly checked for bugs. This allows you to develop out with your own models, following a similar syntax as the framework itself, without any unnecessary worries. If you enjoy writing code from scratch then this method is not likely to suit you. But the expendable nature of these frameworks means you can write code externally and port it over into the model.

CakePHP Coding backend framework

Or in many scenarios you can actually build out a custom module! Not all frameworks support the plug-and-play mentality. Yet it is a fairly common feature even among some frontend libraries. jQuery is the first which comes to mind featuring dozens of techniques for building your own plug-in. The web development framework Alloy is also modular and written for PHP 5.3+ environments.

Examples of PHP Frameworks

When just getting started you want to stick with something reliable and easy to use. Newbies just getting into frameworks will enjoy Zend or CodeIgniter.

home page design for CodeIgniter

Both of these projects have been under development for a few years. The PHP community is very adapted to their code style, so you will not likely have a difficult time solving problems. But if you start on any of these I highly recommend skimming their documentation pages first! This will give you an idea of how these frameworks behave, and if you can even utilize them.

Below are just a couple ideas for enticing PHP frameworks to check out. I have been a fan of CakePHP in the past, although I mostly work with custom CMS’ these days.

  • CakePHP – A very flexible option for newbies. There is no configuration edits or custom code required – just install the database and Cake is good to go. The whole development team is very knowledgeable and willing to help with issues. There are also a handful of published books geared towards explaining common Cake trends. Check out the CakePHP training videos online if you want to learn more.
  • Recess – A RESTful PHP framework for newbies and advanced programmers alike. Recess is lightning fast, super easy to learn, and perfect to install on a standard LAMP server environment.
  • Adroit – A lightweight PHP5 framework to get you developing faster! The core is built around an MVC hierarchy and utilizes the Smarty template engine. It’s also a breeze to implement your own Ajax calls between the database and frontend view.
  • Flourish – More of a general object-oriented library for coders. With this modular framework you aren’t limited to the MVC paradigm, although it is an option. The code is very secure and provides tons of examples on their website.
  • Yii Framework – A much more detailed framework for web developers. Yii allows you to rapidly prototype dynamic features such as user authentication, Ajax calls, caching, custom themes, and a whole lot more. Check out their full list of features on the website.

CSS Design Bundles

Code frameworks started out popular in the areas of backend development. Both software programmers and web developers have been utilizing these for years. But now there are countless frontend developers releasing their own design frameworks.

CSS is by far the go-to style language for the web. You can mockup an entire web page with fonts, colors, content boxes, alignments, and tons of other effects – all without touching the HTML. It’s a brilliant coding system which has revolutionized the field of web development(especially with HTML5).

Tokyo Japan at Night

CSS libraries can save you even more hardships on coding frontend. There are code frameworks which work on CSS grid systems, resetting browser defaults, dynamic webpage fonts, and a few other nifty concepts. Best of all many of them are free to download and come with an open-source developers license.

Common Recommendations

In the list below I’ve compiled some of my favorite CSS frameworks. This list will not be useful for everyone as not all developers enjoy using these code libraries! I admit that at times it’s just easier to write all your own code from scratch.

But when you really need to shave time off a project there’s no better solution than these libraries. Most can be downloaded and forked on GitHub from the original author. If we skipped over any good ones let us know in the post comments!

Conclusion

I hope this article has paved the way for some interested developers to get started using frameworks. In the modern era it has never been easier to get moving building a website. There are many open source databases of code you can start working on which are scalable in the long term.

Don’t try to push yourself into a single framework on the first day. I find it’s best to tread the waters a bit and try out a couple different names. See if there are any which fit your needs best, as different developers need different tools to work with. Whether coding frontend or backend you’ll slowly develop a sense of trust with these frameworks. Not only do they make your job easier, they provide a stable grounding for nearly any project you create in the future.

You might also like…

CSS Form Templates, Tools & Services →
40 Professional and Detailed Web Layout PSD Templates →
25 Completely Free Fonts Perfect for @fontface →
Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks →
30 Pure CSS Alternatives to Javascript →
40 Essential CSS Templates, Resources and Downloads →
Website Speed Part 1: Write More Efficient CSS →
50 Free Tools and Apps for Web Designers and Developers →
CSS3 Compatibility Tools, Resources and References for Internet Explorer →
10 Online Tools and Apps to Help Optimize and Format CSS →
50 Useful Tools and Generators for Easy CSS Development →


Advertise here with BSA