The Design Collective

PocketMedia® Awards 2011

thedesignc — Tue, 12 Jul 2011 10:54:55 +0000

The Design Collective worked closely with Urban Saints to create an innovative z-card. This offered a multifunctional use – to attract more publicity for the MIMIC website, to inform young people what MIMIC can offer and to instruct leaders on how they can guide the young children that sign-up. Urban Saints entered this product into the 2011 PocketMedia® Awards, sponsored by Z-CARD®, and were announced a WINNER!

Here is what PocketMedia® had to say about our client and product:-

WINNER: Highly Commended Campaign

The Urban Saints MIMIC campaign showed a great example of dual-purpose PocketMedia® The MIMIC Z-CARD® packages a lot of information in a clear and concise manner and also serves as a web driver – directing recipients to the online MIMIC programme.

Styling Websites For Internet Explorer

thedesignc — Wed, 13 Apr 2011 15:13:40 +0000

CSS

Using CSS is a fantastic way to make websites look great. The amount of control CSS gives web developers is awesome, especially when designers are looking over your shoulder asking helpful questions like; “Why does it look different to the photoshop file that I sent you?!?”

A problem which always arises when developing, is how the sites look in all the different browsers. Usually, like many web-developers, I use Firefox as my main browser, due to all the add-ons which have been developed for it. As the site that i’m working on progresses, I check it in other browsers to make sure that it’s looking good. Usually, most browsers look similar to Firefox, but if there is going to be a problem, you can almost guarantee that it’s going to be with Internet Explorer.

IE Problems

I was finding that most of the problems that I was having in IE, was to do with widths or margins looking different, and therefore throwing the placement of objects all over the place. Every version of IE up to and including 8 contains a ‘box model bug‘. This is where margins and padding are added to the width of the object rather than to the outside of it, as WC3 recommends. One way of fixing these issues is to use CSS hacks. The problem with this is that it can lead to extremely messy code, and will also not be valid CSS.

IE Conditional Statements

Microsoft have introduced Conditional Statements which allow us to detect the version of IE that is being used, and add actions once we know how they are looking at the site.

I’ve used the code below in my index.html file. before the ‘head’ section.

This is basically saying, If the browser is less than IE 7, add a CSS class ‘ie6′.

Then in the CSS we can refernce the class ‘.ie6′, and the object will only be affected in explorer versions before IE7.

.ie6 .logo_container {
margin: 0 0 0 50px;
}

There are many other conditional statements which can be used. Check them out here.

10 Great Shortcuts For Photoshop

thedesignc — Tue, 29 Mar 2011 16:27:37 +0000

It’s always great to get your head around as many shortcuts as possible to speed up your workflow when using specific design programmes. Here are a selection of 10 short cuts that I find helpful in my workflow. Please leave comments if you have any shortcuts that you have discovered along the way, and think we should know!

1. Switch to specific blending modes

Opt + Shift + N, M, S. Changes to the modes listed below.
Normal = Opt + Shift + N
Multiply = Opt + Shift + M
Screen = Opt + Shift + S

2. Step into the…past

Step back through your history more than one step Opt + Cmd (Ctrl windows) + Z

3. Quickly change your brush

Changing through brush sizes increasing using ] or decreasing using [
To adjust the hardness increase using Shift + ] soften using Shift + [

4. Copy all layers onto an individual layer

This makes a copy of all you are currently seeing on your screen onto one layer
Shift + Opt + Cmd (Ctrl windows) + E. To simply flatten all selected layers use Cmd (Ctrl windows) + E

5. Fill with two keys

Fil with background colour Cmd + Backspace
Fill with foreground colour Opt + Backspace
Fill with white Cmd + Opt + Backspace

6. Cycle through blending modes

Use Shift and + to go forward cycle forward through modes and Shift and - to go backwards

7. Easy Layer masks

It can sometimes be laborious to go through the drop down menus to create a layer mask simply click the layer mask icon in layers palette.

8. Moving a selection Marquee

When drawing a marque hold down Space bar to move selection around

9. Switching Photoshop windows

hold down Cmd (ctrl windows) + ~ to cycle through the windows and Shift + Cmd + ~ to go backwards

10. Changing Opacity

Change opacity of layer when on the selection tool just type the numbers of the percentage you want and it will change. e.g. type 83 and the layer opacity will change to 83%

Creating A Facebook Welcome App

thedesignc — Wed, 23 Mar 2011 17:12:47 +0000

The statistics about Facebook are amazing. There are over 500 million active users, who share more than 30 billion pieces of content with each other and spend a combined 700 billion minutes a month on the site. With that many people to potentially reach, it’s no wonder that major companies have also made sure that they are involved in Facebook’s ever growing community.

Setting up a page on Facebook is very simple. It’s just a matter of putting in a few details about your company, and uploading a few bits on content so that users will have something to do when they arrive at your page.

I noticed that many pages on Facebook had some great looking content. Red Bull, Coca Cola and BMW are huge brands which have taken time to make sure that their pages are looking great, and engage Facebook’s users.

We decided that for our Facebook page, we would just create a simple welcome page, which links to our site, twitter and portfolio. I researched into how others were building their bespoke pages, and it seemed that there were 2 options. To use facebook’s static FBML, (Facebook mark-up language) app, or create an app from scratch using html. We decided to go for the second choice, as it allowed more freedom for styling and CSS and also there seems to be some confusion at the moment about how long FBML will continue to be supported.

I found that creating an app for Facebook was a surprisingly quick and easy task.

1. Go to www.facebook.com/developers when signed in as a user, and click ‘Set up new app’.

2. Create a name for the app, and agree with the terms and conditions.

3. Enter details for the application, and upload an Icon and Logo.

4. Enter the Canvas URL, which is where your files will be hosted.

5. Enter the ‘Tab’ URL – the HTML file for your welcome page.

Check out our finished app on our Facebook page here.

TextMate the missing Mac Text Editor

thedesignc — Thu, 17 Mar 2011 17:24:49 +0000

TextMate brings Apple’s approach to operating systems into the world of text editors. By bridging UNIX underpinnings and GUI, TextMate cherry-picks the best of both worlds to the benefit of expert scripters and novice users alike.

Whether you are a programmer or a designer, the production of code and markup is hard work. Without an editor dedicated to the task, it is also often cumbersome, overwhelming, and repetitive. Especially when you are dealing with a lot of files at once — like most projects do. TextMate puts you back in control, reduces the mental overhead, and turns manual work into something the computer does.

As a design studio we are mostly Mac based and the arrival of TextMate has enabled us to streamline our workflow and create cleaner code. This has allowed us to move away from editors, like Dreamweaver that sometimes add more unnecessary code than needed.

Here is a list of some of the great features:

Ability to Search and Replace in a Project
Auto-Indent for Common Actions Like Pasting Text
Auto-Pairing of Brackets and Other Characters
Clipboard History
Column Selections and Column Typing
Completion of Words from Current Document
CSS-like Selectors to Pinpoint the Scope of Actions and Settings
Declarative Language Grammars for Graceful Mixing and Hacking
Dynamic Outline for Working With Multiple Files
Expand Trigger Words to Code Blocks With Tab-able Placeholders
File Tabs when Working With Projects
Foldable Code Blocks
Function Pop-up for Quick Overview and Navigation
Plug-able Through Your Favorite Scripting Language
Recordable Macros With No Programming Required
Regular Expression Search and Replace (grep)
Run Shell Commands from Within a Document
Support for Darcs, Perforce, SVK, and Subversion
Support for More Than 50 Languages
Switch Between Files in Projects With a Minimum of Key Strokes
Themable Syntax Highlight Colors
Visual Bookmarks to Jump Between Places in a File
Works As External Editor for (s)ftp Programs
Works Together With Xcode and Can Build Xcode Projects

Check out the software for yourself here…

Free 3D Model – Telephone Box C4D

thedesignc — Tue, 15 Mar 2011 14:17:33 +0000

Download a FREE 3D model of a traditional telephone box, created by our 3D department. This Cinema 4D model comes complete with textures. We hope you enjoy this FREE give away.

DOWNLOAD HERE

A Helpful WordPress Security Video

thedesignc — Tue, 15 Mar 2011 13:57:14 +0000

Description

This video contains some really useful information about WordPress security. Even if you are experienced at securing WordPress this video is still worth watching.

View the original article Click here…

Solution to the Captivate 4 and 5 Imported Flash Animation Bug

thedesignc — Thu, 24 Feb 2011 15:03:23 +0000

Description

We recently found a big problem with Captivate 4 and 5 involving importing Flash animations. We found that when the Captivate files are executed or previewed, all of the imported flash animations will play immediately. This includes every animation contained within every page of the Captivate project. This means that once you navigate to the slide you want to view, the animation would have started and probably finished. After a few days of scratching our heads we thought that we cannot be the only people suffering with this bug, so we asked Google! We came across this forum. To no surprise, lots of other people having been suffering with the same bug. We had to find a solution for us and other Captivate users. After rigorous testing we discovered one!

Solution

We found that you must create flash animations that do not contain any nested movie clips. You can only build animations that move primitives round the stage using the timeline. So for example you cannot make animations inside of movie clips, because it will play the animation as soon as the Captivate file is loaded. It took us two days to find out why the animation problem was occurring. If you use simple animations and create these in flash on the timeline, the animations will work and trigger at the correct time within Captivate.

Styling WordPress mobile themes

thedesignc — Thu, 24 Feb 2011 14:32:40 +0000

Problems

Styling websites so that they look great in all the main browsers is an incredibly hard task, especially when after checking the look of it in Firefox, Chrome and Safari, I close my eyes tight and click on the IETester icon. I won’t lie to you, it’s always a nervous wait while the site which looked so perfect in the other browsers, is apparently mangled and stretched in every direction possible until it barely resembles the vision of beauty which I was looking at seconds ago. So how do we start to style sites for mobile devices?

Firefox

As for many web developers, Firefox is my browser of choice when developing. The number of add-ons which have been developed make it a very powerful browser. I’d recommend ColorZilla, Web Developer and YSlow as fantatic plug-ins. However, my most used plug-in is definitely Firebug which i’d say is an essential tool for me.

Firebug

Firebug is an incredibly useful tool for web development. For me one of the best features of it is that you can edit the CSS for the current page, and it updates in real time. This is invaluble as it means that you can edit the styles as much as you like, and if you get it wrong it’s not a problem as you can just refresh and eveything returns to how it looked before you messed it up. If you make improvements, firebug shows you the exact line of code which you’ll need to edit in the CSS file.

Mobile Site Styling

Recently I have been doing some styling to the mobile theme for The Design Collective’s new site. At the moment we have installed a great Plugin to our site called WPtouch which basically gives us a great platform to start off with for our mobile version of the site. As we were developing our site on our development server, I did have a problem as I wasn’t able to load the site on my iPhone in order to check the styling, and even if the development site was available on my phone, how would I cope without Firebug? We found a couple of solutions to this. The first is an Adobe Air application called iBB.

iBB iPad and iPhone Simulator

iBB is a fantastic desktop app, which is an iPad and iPhone simulator. A great tool to have when styling a site for mobile devices. It basically works as a browser, so I loaded our website in the address bar and iBB acts like a iPhone would. A great way to check a mobile site on our local server.

So i’d found a way to view a mobile version of our site on the local server, but I still had no access to firebug in order to find the specific CSS files and lines which needed editing. I stumbled across another add-on for firefox which solved this for me.

User Agent Switcher

The User Agent Switcher add-on for firefox, adds a menu and a toolbar button to switch the user agent of the browser. This allows access to sites that restrict access based on the browser being used. In our case, I set it to iPhone 3.0 and our site appears in the WPtouch theme and I could get hold of it using firebug. Success!!

The Art of the Facebook Page Design

thedesignc — Wed, 23 Feb 2011 15:16:31 +0000

Everyday more and more businesses around the world are creating presences on Facebook. Found a great article today on how to smarten and spruce up your Facebook profile from the Webdesigner Depot check it out here