Because we focus mainly on web development and we sort of “weed” out the rest and aim towards preparing developers with the right tools they need, we have decided to publish this resource post that will change the way you view and deal with usability. Below we’ve outlined several worth reading/bookmarking posts, which one do you think hits the nail on the head?

Decoupling Usability and Visuals

Usability and visual design are two areas that are heavily dependent on each other. They affect each other dramatically and each requires an understanding of how people will use and visualize the content. Pulling them apart, where possible, is a great way to understand how they impact the overall design and reduce the time and energy wasted in your creative process. Read More…

Fantastic Information Architecture and Data Visualization Resources

Information architecture can be a daunting subject for designers who’ve never tried it before. Also, creating successful infographics and visualizations takes skill and practice, along with some advance planning. But anyone with graphic design skills can learn to create infographics that are effective and get data across in a user-friendly manner. Read More…

Factors That Affect Usability

If trending topics surrounding design blogs are any reflection of trends in design, then usability is what coffee is to freelancers. Usability is a study of human-computer interaction that helps designers analyze our users’ patterns as they use our creations. While we cannot fully predict our users’ interactions, we are able to brace for them through how we style and place elements on our page. Read More…

10 Usability Nightmares You Should Be Aware Of

Sometimes you just want to get the information you’re after, save it and move along. And you can’t. Usability nightmares — which are rather the daily routine than an exception — appear every now and again; usually almost every time you type your search keywords in Google. In his article “Why award-winning websites are so awful” Gerry McGovern points out that “the shiny surface wins awards, real substance wins customers” and that is absolutely true. Read More…

Usability Testing Demystified

There seems to be this idea going around that usability testing is bad, or that the cool kids don’t do it. That it’s old skool. That designers don’t need to do it. What if I told you that usability testing is the hottest thing in experience design research? Every time a person has a great experience with a website, a web app, a gadget, or a service, it’s because a design team made excellent decisions about both design and implementation—decisions based on data about how people use designs. And how can you get that data? Usability testing. Read More…

Questions That Help Assess Website Usability

The level of usability on your website takes on a vital role when we’re designing for the end-user. If your web application isn’t easy to use and interact with, then chances are the services and information you offer will be valuable to a rare few. Usability aims to relieve some of the things that can make your website complicated to use and simplifies the interface so that the users overall experience is a pleasurable one. Read More…

When developing, we always tend to search for shortcuts to shorten the amount of time we spend. While some techniques used may harm the quality and integrity of the script you are developing, there are a few that do help you out as a developer without causing damage. We cover five techniques that can be used to cut down on development time.

Remember to subscribe to our feed for up-to-date development articles and resources!

Recycling Code

This method or technique rather happens all the time whether knowingly or not. When developing new scripts that may utilize features you have developed before for previous scripts, it is in your best interest to just copy that bit of code and paste it in your ongoing project. This saves you development and puts your retired code back to work.

Auto Complete IDE’s

While integrated development environments enhance your development environment by providing basic syntax error checks and highlighting your syntax, their auto complete feature does speed up development. For example, writing function names, loops, conditional statements, and others can be auto-completed by the IDE.

For a large project, those seconds you save add up to minutes and hours saved. While the whole idea of the auto complete saving time may sound overrated, it is the little things that enhance your development experience that save you time, whether it being the auto complete or even just the line number display.

Frameworks

There are plethoras of frameworks out that take care of a lot of the work for you. For example, many of the scripts you may create may utilize many generic things such as a database connection. Either you can spend time recreating it for your script, or you can download a good framework that completes a lot of the work for you.

If you are not too keen on the idea using frameworks other developers created, you can create your own customized framework, one that suits your needs most of the time. Furthermore, the utilization of prebuilt frameworks can save you hours of development time, therefore, it is something to consider.

Recreating the Obvious

Reinventing the wheel or recreating what is already out there and suffices for your needs wastes development time. If you are developing a forum for yourself or a for a client it is best to use one that has been already created and customize it rather than spend the time create on yourself. However, with that said, if creating one from scratch is easier depending on your situation, or is absolutely necessary, than reinventing the wheel does not quite apply to this point.

Documentation

Documenting your code is a real time saver. Many times when you are developing multiple projects at once, some code snippets get lost and it creates confusion. By documenting your code, going back to pick up from where you left off would be a lot easier as you can read the documentation above a few lines of code to get back into line. Documentation additionally makes debugging easier as you can find the code snippets you are looking for much quicker by reading through your documentation until you reach the appropriate line.

Additionally, if your work is ever transferred to other developers, or other developers transfer their projects to you, you can easily understand the code, what each snippet is doing, and why. Without proper documentation, many of the open source projects today would not be as organized as they are, neither be able to pass the project on to other developers for continued development.

To Conclude

Overall, there many different ways to speed up development, however, it completely depends on your developing style and standards as that determines what techniques best suit you and whom you are developing for.

Get this Post in PDF Format!

Here at GrindSmart we aim to facilitate first the needs of the bold who call themselves web developers and we also strive to accommodate everyone else eager to learn and find resources that will help them through their journey on learning how to efficiently and effectively develop web applications and more. This is not to say that we cater to an audience who know it all, in fact, our audience primarily consists of those who are in the beginning stages of developing a website.

This is exactly why we’ve compiled this great list of cheat sheets that will allow you to ultimately code on a higher level. Forget that we used the word “cheat” and just focus on the end game; resources that’ll help you become a better developer.

Remember to subscribe to our feed for up-to-date development articles and resources!

PHP Cheat Sheet

The PHP cheat sheet is a one-page reference sheet, listing date format arguments, regular expression syntax and common functions.

Ruby on Rails Cheat Sheet

The Ruby On Rails cheat sheet is designed to be printed on an A4 sheet of paper and live by a developers desk, to make life a bit easier. A description of what is on the cheat sheet follows, or if you are impatient, you can go straight to the full size Ruby On Rails cheat sheet.

MySQL Cheat Sheet

The MySQL cheat sheet is designed to act as a reminder and reference sheet, listing useful information about MySQL. It includes a list of the available functions in MySQL, as well as data types. It also includes a list of MySQL functions available in PHP, and a list of useful sample queries to select data from a database.

JavaScript Cheat Sheet

The JavaScript cheat sheet is designed to act as a reminder and reference sheet, listing methods and functions of JavaScript. It includes reference material for regular expressions in JavaScript, as well as a short guide to the XMLHttpRequest object.

mootools 1.2 cheat sheet

For your coding pleasure, MediaVrog just updated their cheat sheet to the new revision. It includes cheat sheet like documentation for Core, Native, Class, Element, Utilities and Request. They’ll be launching another cheatsheet which will cover FX and Plugins soon.

Scriptaculous Cheat Sheet

It was a real challenge to fit it all in on one page… and I was initially planning to cover more than just the combination effects, but as you can see there wasn’t a stitch of room left over. I didn’t even get to do anything fun with angled text or images!

HTML/XHTML in one page

This is a straight to the point and easy to read HTML cheat sheet that makes coding in HTML much simpler.

(X)HTML Elements and Attributes

If you want a simple and awesome xhtml cheat sheet this is the one you’re looking for. You can also explore cheat sheets for several other technologies and programming languages on the same site.

CSS Cheat Sheet (V2)

The CSS cheat sheet is a one-page reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.

Actionscript 2.0 Cheat Sheet Flashpaper

This is a nice cheatsheet of all the Actionscript 2.0 classes and methods. I believe it was created by Mike Chambers.

Everyone has Questions they need answered, especially when you’re working in such a wide and detailed industry as web development and design. No matter how small or complex, your questions on development subject should be answered. This what collaboration and dedication brings us to, a place where any of our questions can have the opportunity to be answered. And for those full of knowledge, to share what you’ve learned with others.

Below we have 5 Extremely Helpful Q&A Websites for developers and designers as well. I would take the opportunity to search through a few, use them as references, and sign-up with the one you feel is most helpful. We’ll also show you how to create your very own Q&A community for FREE!

[Remember to subscribe to our feed for up-to-date development articles and resources!]

Design Reviver Answers

Design Reviver Answers is a question and answers community exclusively for web designers. Questions are limitless and anyone can ask or answer them. You can aslo perfom a simple search by term or tags and find relevant questions and answers. Registration is not required, however, if you want to gain points and be alerted everytime your question receives an answer then it would be great to register. You can also take advantage of a rating system so that you can rate others answers helpful or not so helpful.

DocType

Doctype is a free question and answer site for web designers. You can get fast solutions to your CSS, HTML, web design and email design problems. Everything is editable, just like a wiki. This means answers are accurate, neat and up-to-date. Note that you’ll need a reputation score of 100 before you can edit other people’s stuff.

Stack Overflow

Stack Overflow is a programming Q & A site that’s free. Stack Overflow is collaboratively built and maintained by your fellow programmers. Once the system learns to trust you, you’ll be able to edit anything, much like Wikipedia.

Inspired M.

The Inspired Q&A Forum is more for design and blogging, however, this is not to say you can’t post any and all of your design/development questions. This was built on the same platform as Design Reviver Answers (QHUB).

ServerFault

Server Fault is a Q&A site for system administrators and IT professionals that’s free. It is also part of the company who began Stack Overflow. Server Fault is as frictionless and painless to use as we could make it. We believe finding the right answer to those system administration and IT questions should be as easy as falling into the pit of success. And maybe even a little fun along the way.

Create Your Own Q&A Community

Qhub is a quick & simple way for anyone to build their own Q&A website in minutes. Each group is set up and started by an ‘owner’. Friends, colleagues, club members and more are invited to join and the questions can begin. While other Q&A websites are great for information sharing and communities, Qhub offers a more targeted community managed by the people that are interested in that particular subject area.

First and foremost I’d like to start by thanking the readers and users that make GrindSmart Magazine a special place. As you’ve probably noticed by now we’ve been doing a few renovations the past 2 months or so, this is part of the Redesigned and Redefined movement of our entire structure. Our reader subscription grows to a new high everyday, and we’re planning on expanding in revolutionary ways within the next couple of months.

GrindSmart (as many of you know) has been around for just about 2 years now. We began by collecting the most recent and up-to-date technology news on the web, and later started collecting design resources, and now we’re strictly sticking to web development. Every other design blog out there covers, well just that, design, and quite frankly it’s beginning to bore. We’ve decided to shift out of the “mold” and produce developments articles that are more than just informative, they’re helpful, concise, straight to the point, and real.

One of the most notable changes around here is our design, we’ve been through a few revisions and we’re still in the process of finding bugs, fixing them, and redesigning aspects of our website for better usability. Earlier this year we moved from Square Space to WordPress and we’d have to say it’s the best move we’ve made because it’s allowed us to flourish and expand through the flexibility via WordPress. We also have been using a quite useful service for hosting all of our applications, a lot of our images, and scripts called ShareDen.

Previous Logo:

Our next move would have to be redefining our niche, providing more giveaways, and focusing more on the reader. If you have any other tips on our sites design, what we’re doing, and any suggestions on articles we’d love to hear it. We’re also offering a variety of monthly guest spots for article contributors on web development. We’re paying $30-$60 per article depending on the complexity and quality.

Once again, thank you for reading GrindSmart Magazine. We hope you continue to engage in our articles and remember to to subscribe to our feed for up-to-date development articles and resources!

-The GrindSmart.com Editorial Team

For those of you that subscribed to the GrindSmart Magazine ultimate collection of books for web designers we thank you! Today we have the winning results! Every winner was chosen by random through Random.Org services. There were 34 comments in total. We inserted the min number (one) and the maximum number (thirty-four) and then hit the generate button and whatever number (of comment) came up, then that person is the winner.

All we have to say is CONGRATULATIONS to our five winners! You will be contacted by email (if you haven’t already) to arrange shipping (if applicable) of your product(s).

Please remember to subscribe to our feed for more great articles and amazing giveaways! We’ll strive to do one giveaway a month.

The Complete Manual of Typography

Winner: Ahmed B. Comment#16

Logo Design Workbook: A Hands-On Guide to Creating Logos

Winner: OneProjectMan Comment#33

Prioritizing Web Usability

Winner: Anthony Villanova Comment#6

The Unlimited Freelancer

Winner: Andrea Gambedotti Comment#14

The Smashing Book

Winner: Jean Carlos Comment#1

Carlos Lerma (a.k.a. lerms) is 26 year old Illustrator specialized in vector graphics and character design. He has six years of professional experience in illustrations for print (editorial and advertising), animation (character design), web design and corporate imagery (mascots). You’re able to find new works from him and more at his blog, and you can also find him on Behance, DeviantArt, and Twitter.

Hope you enjoy! Please remember to subscribe to our feed and leave us a comment with your thoughts!

Greetings lovely readers! Today is the beginning of the ultimate FREE giveaway for designers! Three lucky winners will receive either a MacBook Pro (15-inch), a Coda or Expresso License. Our only requirements is that you comment and subscribe to GrindSmart Magazine and that’s it! 3 lucky winners will be chosen on February 20th in absolute random order! Here are the specs:

MacBook Pro

The 15″ MacBook Pro features new LED backlighting, the first for a laptop display this large. The MacBook Pro display can be had with an anti-glare coating or a glossy option. The latest MacBook Pro uses nVidia’s new GeForce 8600M GT graphics controller (GPU). Based on an entirely new architecture, this laptop version of the 8600 chipset should out-perform the ATI Mobility Radeon X1600 used in the previous MacBook Pro, but our test results were inconsistent. The 8600 series also include an H.264 decoder, but we don’t know if Mac OS X takes advantage of this.

• excellent display color, brightness and clarity; won’t fade over time.
• 2 GB of memory standard
• excellent keyboard and trackpad
• good expandability (FireWire 800, Express/34, 30″ Display support)
• very good battery life

Coda

This one-window Web design app has all the tools you need for creating great Web sites. Collaboration tools let you seamlessly work together with others, and an integrated FTP sidebar– using the power of Panic’s Transmit–helps you get your site updated quickly. Hand coding experts will like the full-featured CSS and text editors, with tools that are always only a click away. Time savers like the Clips feature make frequently used code handy and convenient. We particularly like the powerful Find and Replace tools which let you drag-and-drop global changes to your code. If you’re searching for a reasonably priced Web design tool for Mac, Coda has plenty of handy tools to help you get your site up and running quickly.

Expresso

Now, Espresso delivers something better than a caffeine boost: a web editor with style. Espresso is not a bunch of apps thrown together. Instead, we looked at the needs of web developers and streamlined their workflow into one gorgeous, focused app. Fast and powerful editing, sleek projects, live preview, awesome publishing and extensive synchronization tools.

Please Note: Results will be given on February 20th and winners will be randomly chosen using Random.Org services. Good Luck!

If you’re looking to effectively design one of the most influencing and creative areas of your web site, you need to know a few key points. The header of your web site helps the visitors connect and understand the information that you are trying to provide. If your websites header was not designed to optimize the flow of all information contained between your web site, then the entire layout would seem unbalanced. You headers design is extremely important, this is why we’ve outlined a few points on how to design a quality header.

A Strong Header Must Standout

Your header must display a type of contrast between itself and the rest of the content. It needs to contain certain color combination’s and schemes that reassure the viewer the difference between where the header is located and where the content displayed.

Maintain Consistency

When you’re designing your header you must keep in mind the importance of maintaining consistency between the sites overall theme, elements, content, and footer. If you add a certain degree of creativity to your sidebar, make sure you add a similar amount of creativity to your header as well. It will keep the balance between your design. If you’re able to add these characteristics to your header than you will have the ability to capture your audiences attention from the beginning.

Use Attractive Colors

It’s usually better to try and use warm colors (depending on the design, of course). Those types of colors work like gears to try and stimulate your mind in order to captivate the viewer. Warm colors are the most active and they encourage certain emotions aggressively.

Light, Colors and Additional’s

In the previous point we covered the use of warm colors, now were going to touch on the importance of using light, and additional colors to your advantage by effectively knowing how to combine them. If your header contains at least one or two colors that don’t mesh well, then this will offset the viewer and cause a negative imbalance. There are also a great deal of headers that don’t seem to convey the right user of light within their design. This can also be a detrimental factor in the succession of your design.

Size, Position, and Alignment

The width and height or your header for the most part depends on the size of your layout. At any rate, you shouldn’t use a header that’s too large or too small. An effective header contains a good balance between the size, position, and alignment. Another good point to remember is to not design or use a header that can take up half the page, this is a waste of space, and will end up driving viewers away. Your header should always be aligned within the center of your sites layout, with the exception of any typography used. This will help maintain a well represented and professional design.

Examples:

Pally Giraffe

Go Glamping

The Octonauts

Phizz

Carton Blanc

Mail Chimp

Digimuarai

Tony Geer

Branded 07

Paramore Redd

Dr. Martian

Web.Burza

Marchand De Trucs

New Era Cap Talk

Chris Hortsch

Campaign Monitor

Enrichmint

Wishlister

Cleverful

Holds Worth Design

Octwelve

Kirdan

Icon Dock

R0man

Toucouler

Cogitatur

Biola University

Cow & Monkey

Made in Space

The Amazing Idea Machine

One of the most important aspects of creating a brand is image, and the first thing that represents that image is the logo. When designing your logo you must make sure that you have the correct ingredients and the right blend of creativity. If your logo seems like the person who designed it lacks skills, then you’re more than likely to turn away business rather than capture the attention of your users.

Below, we present you with 200+ Super Useful Logo Design Tutorials that should give you a dash of inspiration and act as a small guide. Please remember to comment and share your opinions!

25 Distinctive and Famous Logo Photoshop Tutorials

60+ Beautiful Logo Design Tutorials And Resources

35 Logo Designing Photoshop Tutorials

40 Logo Design Tutorials

55+ Exceptional Logo Design Tutorials

Further Resources

• Crucial Rules to Follow When Designing a Logo | Design Reviver
• 10 Common Mistakes In Logo Design – Smashing Magazine
• Logo Design – How NOT To Design A Logo | Webdesigner Depot
• How To Design A Logo
• Design a Logo – The Ultimate Guide