We all love a good satire. It’s one of the highest forms of political wit and frequently bites at targets that would otherwise be unassailable.

Case in point: Maentis’ Universal Unbranding project, an amusing reworking of famous logos and emblems.

Of course, it’s pretty hard to find a satirical logo collection that doesn’t feature an obese McDonald’s logo, but Maentis has included some slightly more sophisticated political comment too: the Rolling Stones’ North Korean tour referencing freedom of speech; the disintegration of the € and the Red Bison are also very good.

Gillette may need to adopt Maentis’ variation on their logo if they keep adding blades to their razors, and I’m sure the Windows logo will be familiar to users of Microsoft’s operating system.

We were hoping to put together the LOGÖ to discover who it referenced, but there was a screw missing.

Which of these parodies is your favourite? Which brands are crying out to be satirised? Let us know in the comments.

8 Downloadable Web Design Courses – 90% off!

The process of launching your own design studio or web agency is very time-consuming. There is a lot of preparation required to create notable branding, structure the website, and organize a captivating portfolio. Advancing trends in web design have pushed us further down this path where new digital agencies have a larger pool of ideas to draw from.

In this article I want to point out just a few trends which have emerged in various studios & agencies around the world. These design trends mostly focus on the website itself, showcasing prominent example works and maybe a little about the team. As you check out more websites over time you can learn some of the best methods for implementing similar trends in your own layout designs.

Fullscreen Backgrounds

This is possibly my favorite design trend emerging over the past couple years. CSS3′s background-size property allows frontend developers to easily create fullscreen backgrounds. All you need is a large image which can scale nicely to fit any larger desktop resolution. It is a beautiful method for capturing attention while also branding your company’s website.

Many designers already know about Whiteboard and their amazing layout. Each content panel is broken down into sections with differing backgrounds. Each section will span the entirety of the page while keeping the fixed header navigation at the top. Many of the backgrounds actually use videos of the team working. It is an extremely creative way to showcase a company which handles such a large client base.

Another more simple example can be seen on Playground, Inc. which only uses a fullscreen image fitted at the top of each page. This is usually how I like to see agency websites because capturing attention above-the-fold is quite significant. Plus all of the lower content is written on a clean white background, so it is easier to digest.

You’ll notice the layout is also split up vertically between content sections. Each block will span the entire width of the page and keep the background images at full-width, too. We are lucky to be using HTML5/CSS3 specs where creating fully-scaled background images does not require a lot of extra code. But if you are looking for a solution with greater browser support I would recommend the jQuery plugin Backstretch.

Vector Graphics

Web designs are often made to capture attention and stick within the mind of your visitors. Vector shapes & characters are very memorable and often delineate a hidden/obscure meaning behind the company name. MailChimp is one such example using a fictitious mail carrier monkey as the logo.

Taking a look at some alternatives, Dangerdom Studios is a very colorful website utilizing these exact features. Many of the pages have vector shapes and icons scattered around bits of content. There is no one single branding effect aside from the overall color scheme. These colorful shapes almost define a style for the work quality and they certainly exude a level of confidence in the studio itself.

The design team at Envy Labs also has a similar take on vectors. Their homepage displays a wonderful illustration with satellites and a rocket ship. These elements were chosen to further expand their branding, which is a futuristic robotic pair of antennae. Envy Labs is a really beautiful example of connecting vector graphics on the page into the overall company branding.

Fixed Navigation

Lots of designers will object against fixed navigations. These can get in the way when reading content and not everybody requires access to the navigation at all times. But for many website layouts the fixed navigation can be a wonderful interface feature.

An example from Hicks Design actually uses a vertical sidebar fixed nav menu. This is fairly uncommon in comparison with other examples like Tone Agency, keeping the navigation right at the top of the page. But great designers are never afraid of pushing the envelope to find new and exciting ways of creating interfaces.

The fixed navigation trend often works best when the homepage includes parallax scrolling. This will generally break down into 3-5 various sections of content which can make the browser scrollbar tiny. Having that navigation fixed on the page allows readers to quickly scan your webpage details without needing to scroll back and forth.

Single-Page Parallax Scrolling

The topic of parallax website layouts is another branch in the tree of studio/agency design trends. Now there are plenty of other similar websites that can effectively use parallax scrolling. But online portfolios and digital companies make better use out of the features because there is simply more content worth displaying altogether.

One of my favorite parallax websites Teamgeek implements this effect perfectly. When there are smaller tidbits of information to display it can be easier writing this together on a single page. Granted the Teamgeek layout is quite advanced using transition effects for the navigation highlights. But it is also a great starting point to get ideas and see how others are incorporating parallax design into their own websites.

Sputnik Creative is one other cool example which uses a similar type of parallax navbar. The links do not display right when the page loads, but only after you have scrolled a little ways down. This technique means you can provide heavy branding right at the top of the page for new visitors without removing extra space to fit a navigation.

Mobile Responsive Layouts

The mobile responsive trend is huge but not always a requirement. Granted in this day and age you really should try to support mobile users wherever possible. But I have found many non-responsive agency/studio websites that are also beautiful and catch my attention quickly. This really comes down to personal preference if you want people experiencing your site naturally on a smartphone or tablet PC.

Spend lots of time digging through responsive website layouts to see how others are doing it. Twogether is one such example and you can see how the images and navigation bar naturally collapse within a smaller browser window. Before jumping into your HTML/CSS code, determine how you want the website layout to appear on a mobile screen. There have been articles written about mobile-first responsive design suggesting a deeper look into media queries for handling desktop and mobile resolutions.

Another brilliant example on Grafik actually collapses the navigation into a three-line dropdown menu. This technique is really easy to create once you understand the CSS(or jQuery) rules behind it. This navigation trigger menu button is also very common within Android/iOS applications. Following such a responsive trend will allow for a more natural experience from mobile users who are familiar with using native applications.

Dynamic Animations

One final UI/UX trend I have noticed is greater advancing web animations. These are not simply animated page items or Flash containers. But natural jQuery animations or even CSS3 transitions placed on common website elements. Navigation bars, anchor links & button hovers, lazy-loading images, along with many other new ideas which have been emerging rapidly.

The website for Engage Interactive is really crazy and provides a great presentation. The top navigation links appear initially to be embedded into the page background. As you scroll the nav will stay fixed, and then animate a bit smaller to fit snug into the top of the page.

Also when clicking between page sections you will notice a loading gear icon. This animation makes the whole website appear to run Ajax-style loading which is more sleek and definitely more impressive. There are some other cool animation effects within the page contents and you have to see these for yourself to understand how much this impacts the user experience.

Some other nifty animations can be found on OOPM Creative. The most notable effect appearing on all their pages would be the sliding content blocks. When you scroll down on any page the lower contents will animate nicely into place. I am not sure exactly how this is accomplished, but it looks beautiful and it does make the website stand out among many others.

Use these animations sparingly in your own site as to not annoy your visitors. By studying other similar websites you can learn where animations tend to enhance the interface vs detract or even distract from the page content.

Final Thoughts

In today’s modern era it is possible for a small team of 2-3 people to successfully launch their own digital agency. This could be focused on design, development, marketing, copywriting, or any other alternative services. I like to research professional design trends within agency/studio website layouts just to see how the market is evolving. I do hope this brief collection of ideas can invigorate some designers when creating new insightful projects online.

The post Web Design Trends found in Digital Agencies & Creative Studios appeared first on Treehouse Blog.

In a series of tutorials, I’m going to help you get started with Grunt, an open source JavaScript task runner that will automate some of your web development tasks.

This nifty JavaScript library will notably speed up and improve your web development processes, and also help you sidestep common human errors.

My intention with this Grunt tutorial series is to get you to experience the same productivity and efficiency improvements I’ve gained through this useful, but little-known open source JavaScript tool.

Here’s the outline of this three-part Grunt tutorial series:

1. Speed Up Your Web Development Workflow with Grunt: We’ll cover basic information about Grunt; what Grunt is, how to install Grunt, how to use Grunt in your web projects, and a brief overview of gruntplugins.
2. Create a test project using modern front-end development techniques (will be posted on a later date)
3. Using Grunt and Jasmine to automate testing and enforce code quality (will be posted on a later date)

Let’s start this tutorial series with some basic information about Grunt and how it can help speed up your web development workflow.

What is Grunt?

When I started my job as a front-end web developer at CDNify (we’re a content delivery network aimed at web developers, startups, and digital agencies) I had absolutely no idea what Grunt was or how it could significantly improve my development workflow.

Months down the road, and I’m now using Grunt every single day. I can’t imagine my front-end web development workflow without it now.

In short, Grunt is an open source JavaScript project that automates repetitive tasks you often have to do as a web developer.

Grunt can automate tasks like minification, unit testing, and preparing your files and website assets for production use. Grunt does this by wrapping these processes up into tasks.

A few more examples of common Grunt tasks are:

• Optimizing your web images through a service like Smush.it
• Concatenating JavaScript files into one big file for faster web page load times
• Running scripts that analyze your code for potential errors (often referred to as linting)
• Enforcing your coding style guides for uniformity and readability throughout your project’s code base
• Compiling your CSS from LESS/Sass

Anything that has the potential to be automated can be done with Grunt.

You can configure Grunt to watch certain files for changes, and then build the results on the fly.

Using Grunt in Your Web Development Team

When used in a team environment, Grunt can help every person in that team write code that adheres to the same standards/style guides.

Details such as controlling the indentation of code can now be a strict process, as a whole build will fail if any part throws an error.

For example, when indenting code, you could automatically enforce the use of spaces instead of tabs (or vice versa, depending on your preferences), which will ensure that the whole team has the same configuration. When they push code to the repository, it’s in the expected format.

Used in conjunction with your favorite code-quality tools (for example, JSHint), Grunt will help you catch sloppy code such as missing semicolons, braceless control statements, unused variables, and trailing whitespace. This is excellent for discovering human errors as well as disallowing valid, but badly written, JavaScript.

Prerequisites

To get the most out of Grunt, you should first know (or learn about) the following.

Command-line Interface

In order to use a tool such as Grunt effectively, you will need to have at least a basic understanding of the terminal. You’ll need to be familiar with the command line interface (CLI) for the file system you use.

You should be able to navigate confidently to a folder on your system and run commands within it.

Here are tutorials and resources that will get you started on learning how to use CLIs on your own computer:

• Windows: Windows Command Prompt in 15 Minutes (cs.princeton.edu)
• Mac: Introduction to the Mac OS X Command Line (teamtreehouse.com)
• Linux: tuXfiles (tuxfiles.org)

However, note that you’ll need to be familiar with the CLI of the SSH client you use to connect to your remote web server if you want to use Grunt on web projects. One popular SSH client for Windows and Linux is PuTTY. (Learn how to use PuTTY by reading its docs).

Don’t be put off; you’ll see that the CLI is very simple once you start using it. It’s also a very powerful tool, and knowing how to use it effectively can speed up your workflow on its own.

Optional: Version Control System

Although not technically required in order to use Grunt, Grunt works best in an environment where version control is important.

Using Grunt for a small static website that is likely to be updated infrequently may be considered overkill. Any web development project that’s larger than that should be version-controlled. And large web development projects are where Grunt becomes critical and extremely useful.

Read this list of Git tutorials for beginners or this introductory guide to Git to help you get started with Git, a popular version control system.

Get Started with Grunt

I’ll run through the general steps of installing Grunt, which is a process that relies on Node.js (an open source development platform for network applications).

Install Node.js

In order to install Grunt, Node.js must first be installed or available in your dev environment (which could your computer) or your web server.

Currently, Node.js version 0.8.0 and up is the supported version.

Download and install Node.js by first going to:

• Node.js Download Page (nodejs.org)

The official Node.js Download Page has various options for you, such as a Windows installer, a Mac OS installer, Linux binaries, and the source code.

If you need help installing Node.js, read the following tutorial:

• How to Install Node.js (howtonode.org)

Installing Node.js allows us to install Grunt using Node.js’s package manager, called npm.

Install Grunt

Next, you need to install Grunt and its dependencies. We will install Grunt using Node.js’s npm.

Learn how to install Grunt with npm by reading this tutorial:

• Installing Grunt (gruntjs.com)

Install Grunt’s Command Line Interface (CLI)

Grunt’s Command Line Interface (CLI) allows you to run Grunt in any directory.

We can install Grunt’s CLI with this npm command:

npm install -g grunt-cli

You may need to prefix the command with sudo on OS X, *nix, BSD, etc., or run your command shell as Adminstrator on Windows to install Grunt’s CLI.

Note that installing the CLI doesn’t install the Grunt task runner itself, as each project may wish to use a different version of Grunt. (In this tutorial, we’ll be using Grunt 0.4x.)

Instead, the CLI acts as a bridge between your Gruntfile (more on this in a bit) and the version of Grunt installed locally to your project.

Using Grunt in a Web Development Project

Now that you have Grunt installed, let’s go over the basics of how to use it in a web development project.

To use Grunt in a web development project, we need two files: package.json and a Gruntfile (e.g. Gruntfile.js).

package.json

package.json is a JSON file. This file should be located in your project’s root directory.

Project information and settings are specified in package.json, such as the project name, version, author, and if it’s a private project or not.

package.json also contains what are known in the Node.js nomenclature as devDependencies. devDependencies are items you need for your project. In this sense, Grunt will be an item listed under devDependencies, along with the Grunt plugins you want to use for the project (I’ll talk about this later).

Here’s an example template for a package.json file:

{
    	"name" : "Project Name",
    	"version" : "version number",
    	"author" : "Your Name",
    	"private" : true,
    	
    	"devDependencies" : {
    		"grunt" : "~0.4.0"
    	}
    }

By specifying the project’s dependencies in package.json, we can use npm to install them for us automatically simply by running the following command in our project’s directory:

npm install

Running that command will give us an output like this:

	npm http GET https://registry.npmjs.org/grunt
    	npm http 304 https://registry.npmjs.org/grunt
    	npm http GET https://registry.npmjs.org/async
    	npm http GET https://registry.npmjs.org/dateformat/1.0.2-1.2.3
    	npm http GET https://registry.npmjs.org/colors
    	npm http GET https://registry.npmjs.org/coffee-script
    	npm http GET https://registry.npmjs.org/glob
    	npm http GET https://registry.npmjs.org/iconv-lite
    	npm http GET https://registry.npmjs.org/findup-sync
    	npm http GET https://registry.npmjs.org/lodash
    	npm http GET https://registry.npmjs.org/js-yaml
    	npm http GET https://registry.npmjs.org/hooker
    	npm http GET https://registry.npmjs.org/minimatch
    	npm http GET https://registry.npmjs.org/nopt
    	npm http GET https://registry.npmjs.org/which
    	npm http GET https://registry.npmjs.org/rimraf
    	npm http GET https://registry.npmjs.org/underscore.string
    	npm http GET https://registry.npmjs.org/eventemitter2
    	npm http 304 https://registry.npmjs.org/async
    	npm http 304 https://registry.npmjs.org/dateformat/1.0.2-1.2.3
    	npm http GET https://registry.npmjs.org/dateformat/-/dateformat-1.0.2-1.2.3.tgz
    	npm http 304 https://registry.npmjs.org/glob
    	npm http 304 https://registry.npmjs.org/colors
    	npm http 304 https://registry.npmjs.org/iconv-lite
    	npm http 304 https://registry.npmjs.org/findup-sync
    	npm http 304 https://registry.npmjs.org/lodash
    	npm http 304 https://registry.npmjs.org/js-yaml
    	npm http 304 https://registry.npmjs.org/hooker
    	npm http 304 https://registry.npmjs.org/minimatch
    	npm http 304 https://registry.npmjs.org/which
    	npm http 304 https://registry.npmjs.org/rimraf
    	npm http 304 https://registry.npmjs.org/underscore.string
    	npm http 200 https://registry.npmjs.org/coffee-script
    	npm http 304 https://registry.npmjs.org/eventemitter2
    	npm http 200 https://registry.npmjs.org/nopt
    	npm http 200 https://registry.npmjs.org/dateformat/-/dateformat-1.0.2-1.2.3.tgz
    	npm http GET https://registry.npmjs.org/graceful-fs
    	npm http GET https://registry.npmjs.org/abbrev
    	npm http GET https://registry.npmjs.org/sigmund
    	npm http GET https://registry.npmjs.org/lru-cache
    	npm http GET https://registry.npmjs.org/graceful-fs
    	npm http GET https://registry.npmjs.org/inherits
    	npm http GET https://registry.npmjs.org/argparse
    	npm http GET https://registry.npmjs.org/esprima
    	npm http 304 https://registry.npmjs.org/graceful-fs
    	npm http 304 https://registry.npmjs.org/abbrev
    	npm http 304 https://registry.npmjs.org/lru-cache
    	npm http 304 https://registry.npmjs.org/graceful-fs
    	npm http 304 https://registry.npmjs.org/sigmund
    	npm http 304 https://registry.npmjs.org/inherits
    	npm http 304 https://registry.npmjs.org/argparse
    	npm http 304 https://registry.npmjs.org/esprima
    	npm http GET https://registry.npmjs.org/underscore
    	npm http 304 https://registry.npmjs.org/underscore
    	grunt@0.4.1 node_modules/grunt
    	├── which@1.0.5
    	├── dateformat@1.0.2-1.2.3
    	├── colors@0.6.0-1
    	├── hooker@0.2.3
    	├── async@0.1.22
    	├── eventemitter2@0.4.12
    	├── coffee-script@1.3.3
    	├── underscore.string@2.2.1
    	├── iconv-lite@0.2.11
    	├── lodash@0.9.2
    	├── findup-sync@0.1.2 (lodash@1.0.1)
    	├── rimraf@2.0.3 (graceful-fs@1.1.14)
    	├── nopt@1.0.10 (abbrev@1.0.4)
    	├── minimatch@0.2.12 (sigmund@1.0.0, lru-cache@2.3.0)
    	├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
    	└── js-yaml@2.0.5 (esprima@1.0.3, argparse@0.1.15)
    

Gruntfile

The Gruntfile is the main configuration file for the project, and specifies what tasks Grunt should run and what files in the project they affect.

Your project’s Gruntfile can be a JavaScript file (Gruntfile.js) or CoffeeScript file (Gruntfile.coffee).

In this tutorial, we’ll be using JavaScript.

At its most basic form, the Gruntfile should contain the following:

module.exports = function(grunt){
    	grunt.initConfig({
    		pkg: grunt.file.readJSON('package.json')
    	});
    	
    	grunt.registerTask('default', []);
    };

initConfig is where the dependency options are specified. Each Grunt plugin is configured using a JSON object (with some exceptions).

Some plugins allow more than one configuration to be loaded. For example, there may be a specific set of experimental JavaScript that uses a different library to jQuery, and so that library must be predefined instead of jQuery in the JSHint configuration. (We will look at this in more detail in the third part of this Grunt tutorial series.)

registerTask can be specified more than once. The default task is run when Grunt is executed in the command line, and so this should contain common setup tasks.

At this point, if you run Grunt successfully, it will generate the following output:

Done, without errors.

Now we have a project skeleton which will become useful once we use some plugins.

Using Grunt Plugins

A key feature of Grunt is the use of Grunt plugins. Grunt plugins are referred to as gruntplugins in the Grunt nomenclature.

gruntplugins are user-contributed modules that will help you automate tasks without having to write your own task scripts.

For example, you can use the grunt-contrib-compress gruntplugin to compress and optimize the file sizes of your project files.

To use the plugin in a project, these are the steps to take:

1. List it as a devDependency object in package.json
2. Load it using the loadNpmTasks function in the project’s Gruntfile
3. Register the task by using the registerTask function in the project’s Gruntfile
4. Run npm install to install Grunt and the plugin

Here’s the sample source code for using the grunt-contrib-compress gruntplugin in your project.

package.json

{
    	"name" : "My Sample Project",
    	"version" : "1.0",
    	"author" : " Ben Briggs",
    	"private" : true,
    
    	"devDependencies" : {
    		"grunt" : "~0.4.0",
    		"grunt-contrib-compress" : "~0.5.2"
    	}
    }

Gruntfile

module.exports = function(grunt){
    	grunt.initConfig({
    		pkg: grunt.file.readJSON('package.json')
    	});
    
    	grunt.loadNpmTasks('grunt-contrib-compress');
    
    	grunt.registerTask('default', [compress]);
    };

Grunt plugins are actually just npm modules that follow the gruntplugin template. You can find gruntplugins on the npm registry by browsing modules tagged with "gruntplugin" or at the official Grunt Plugins page. There are currently over 300 listed gruntplugins.

Summary

In this tutorial, this is what we covered:

1. What Grunt is, and how it can help web developers speed up their workflow.
2. Installation of Node.js
3. Installation of Grunt
4. Installation of Grunt’s CLI
5. General usage of Grunt in web development projects
6. How to use a gruntplugin

In the next tutorial in this Grunt tutorial series, we will go hands-on and apply what we’ve discussed here by creating a simple project using modern front-end development techniques paired with Grunt.

This is the three-part Grunt tutorial series outline:

1. Speed Up Your Web Development Workflow with Grunt
2. Create a test project using modern front-end development techniques (will be posted on a later date)
3. Using Grunt and Jasmine to automate testing and enforce code quality (will be posted on a later date)

To ensure that you get notified when the next parts of this tutorial series is published, follow @sixrevisions on Twitter and/or Like the Six Revisions Facebook page.

Related Content

• Introductory Guide to Git Version Control System
• 20 Free Online Tools for Website Speed Testing
• A Comparison of Methods for Building Mobile-Optimized Websites
• Related categories: JavaScript and Web Development

About the Author

Ben Briggs is a front-end developer at CDNify, a content delivery network designed for startups and developers. He’s passionate about modular CSS, preprocessors and optimization. Find Ben on Twitter: @ben_eb.

The post Speed Up Your Web Development Workflow with Grunt appeared first on Six Revisions.