Posts Tagged ‘book’

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


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

Advertise here with BSA


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 kepp 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.

git – the simple guide – no deep shit!

git - the simple guide - no deep shit!

Things We Wish Clients Would Say

Things We Wish Clients Would Say

IE6 declared dead in the USA

IE6 declared dead in the USA

CSS Buttons with Pseudo-elements

CSS Buttons with Pseudo-elements

(Better) Tabs with Round Out Borders

Tabs with Round Out Borders

Just another CSS3 menu

Just another CSS3 menu

Password strength verification with jQuery

Password strength verification with jQuery

Captain America Shield in Pixelmator

Captain America Shield in Pixelmator

Azuka (HTML Template)

Azuka (HTML Template)

Bijou — Tiny, 10 pixel icons for free

Bijou — Tiny, 10 pixel icons for free

New High-Quality Free Fonts (2012 Edition)

New High-Quality Free Fonts (2012 Edition)

Manteka Free Font

Manteka Free Font

Social Switches – psdchest

Social Switches - psdchest

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:

jQuery Mobile

jQuery Mobile

Textualizer

Textualizer

The Goldilocks Approach

The Goldilocks Approach

BluCSS

BluCSS

jQuery Transit

jQuery Transit

jQuery Plugin Boilerplate

jQuery Plugin Boilerplate

Previous Weekly Design News…

Design News Roundup Archives →


Advertise here with BSA


5 Crucial Points Before Becoming a Freelance Web Designer

Advertise here with BSA


A freelance career offers a plethora of opportunities and rewards for web designers like you, just itching to make it on your own. At the same time, it can lead to a lot of headache, even failure, if you don’t grasp a few basic skills that extend beyond your creative talents in graphic design. With a focus on the entrepreneurial spirit, let’s discuss the 5 critical points that you must know before becoming a freelance web designer.

Grasp the Business End of Your Business

New web design ventures can easily fail. The main reason isn’t because we don’t know our technical stuff, but we neglect to develop our eye for business i.e., our entrepreneurial side. Yes, we’re talking about those little pesky, but critical things like — accounting and taxes, time and project management, as well as planning and marketing.


Funny Cartoon Office Worker image from Shutterstock

If you need help in one or more of these areas, start by reading a book or your nook about business basics. Small business organizations and educational institutions offer a variety of free or low cost seminars; many of which you can conveniently take online. If you’re really in the dark when it comes to crunching numbers, spend a few bucks on an accountant to get you started. Take an entrepreneur’s word for it—learning business basics is well worth the investment.

Build Your Communication Skills

Communication is the lifeblood of your design business: It’s the process by which you convey information about your venture. It includes many modes from writing to speaking and listening using a variety of tools and techniques.


Set of Funny Cartoon Office image from Shutterstock

Good communication skills help you to understand, document and meet your client’s needs, preventing a lot of headache down the road — not to mention heading down the wrong path to begin with. Remember, many clients have no clue as to what you do, so their expectations may go well beyond your perception of the project’s scope. It’s your responsibility to communicate well by asking the right questions, and listening closely in return. Similarly, as the saying goes, a picture is worth a thousand words, so take advantage of a treasure trove of visual tools to communicate vividly with your customers and business associates.

From a verbal and visual power point presentation that polishes your first impression, to a well written contract that clearly defines your project’s scope, deliverables and payment terms, good communication skills will help you to excel and stand out from the crowd.

Network, Network and Network

It’s hard growing a business alone. Networking is vital, as it allows you to develop relationships with other professionals and to promote your business to prospective clients. As a freelance designer you don’t have in house resources to turn to when you encounter technical problems, or the opportunity to meet with colleagues and discuss ideas.


Set of Funny Cartoon Office image from Shutterstock

The good news is – You can find a network of professionals right at your fingertips. LinkedIn and Fast Pitch are popular sites to introduce yourself in the business world and meet new clients and colleagues. For general business connections you may be interested in Entrepreneur Connect or Biznik. If you’re looking for sites tuned in to techies like yourself, explore Cofoundr.

In addition, social networking sites like Facebook and Twitter prove to be an excellent marketing tool. Whether you want to get the word out about your new adventure or showcase your talents, these forums enable you to reach out to your audience and boost your clientele. Power your growth through networking both online and off.

Make Your Rules

Freelancing requires discipline, which means you have to set a schedule and rules… and follow them! As a freelancer you’ll probably be working from home facing many distractions—the kids, unexpected guests and phone calls. Furthermore, you won’t have anyone looking over your shoulder to keep you on course. Many of us like to believe that we are fantastic multitaskers, but to the contrary, multitasking actually reduces our efficiency. Every time you stop to send a text, chat on the phone or drop in on Facebook it takes at least 15 minutes to refocus.


Set of Funny Cartoon Office image from Shutterstock

For those reasons, turn off the gadgets, create a separate and quiet work space, and last but not least, set a routine work schedule. You can carve out 15 minute time slots to take a break and manage sideline tasks. Consider investing in inexpensive time management software to track your hours. To increase your performance, take the leap to a project management system. The precious time you have is valuable, so devise a set of rules and a schedule to make your efforts as efficient and productive as possible.

Consider Your Cash Flow

You’ve heard it a thousand times — It takes a lot of time and hard work to build a successful business. As a result, you won’t be rolling in the dough initially. When you freelance, income is not guaranteed nor is it consistent. You will frequently need to spend valuable time just finding new clients and building a customer base. The critical point here is — gradually grow your new business before quitting your day job. A steady flow of income will smooth the bumps you’ll experience during your learning curve. Instead of stressing over finances, you’ll have the luxury of focusing on both your creative and business sides.


Set of Funny Cartoon Office image from Shutterstock

Make a Decision

Carefully consider these 5 critical points before becoming a freelance web designer. Your success will hinge on your ability to grasp basic business principles, communicate well, connect with colleges and customers, and of course, embrace self-discipline. It’s all about weaving these key elements into the awesome design skills you already have!

You may also like…

Essential Social Networks for Freelance Graphic Designers →
Technostress – The Freelancers Disease? →
Repeat Work and the Search For The Holy Grail →
Thoughts and Considerations for Freelancing on a Part-Time Basis →
Is Working Freelance Really Worth It? Pros and Cons →
Promoting Your Freelance Design Business with Social Media →
Tips for Converting Your Freelance Operation into a Business →
Thoughts on why Spec Work is Bad and Why You Shouldn’t Do It →
3 Simple Ways to Attract Higher-Quality Clients →
Tips for Landing your first Freelance Design Job →
Browse all of our Freelance Articles


Advertise here with BSA