2. You are no longer 100% present in social situations, be it with friends or family. At least 30% of your attention is diverted towards Facebook on your smart-phone, wondering what may have changed since you last looked 6 minutes ago, whilst you pretend to fully listen to conversations with the people who you are actually face-to-face with.

3. You take photos with a sole purpose… to add to your Facebook account so you can demonstrate to all your friends that you are indeed living a fabulously interesting life. You carefully select your shots to maximise impact… special pleasure given to wild looking group shots in high-party situations.

4. The first thing you do when you turn on any Internet connected device is check your Facebook – regardless of the situation… even if you about to start a very important task at work… you slip in a quick check of Facebook which can amount to something a lot bigger and sap away at important time-limited tasks.

Master Pages

You must understand master pages in order to deal with any document bigger than 3 pages. That’s the rule of thumb. Master pages are not that difficult to master ( in contrast to the name! ).

You can have many master pages and apply them to different sections of your book (common in magazine design) but for something like a novel, you tend to only need one or two if it is a novel type document. In the example above I have 2 custom master pages:

1. One for the main pages called ‘A-main-doc-pages’
2. One for chapter heading pages called ‘B-ChapterHeadings’.

The idea of master pages is to setup all the basic layout rules and elements that you wish to be applied to pages within your document, such as grid columns, page margins and page numbering. For this project my main master pages contain the page numbering object for left and right pages, the margins… and that’s it.

You import your multipage word (or any other format !)  text document, holding down ‘SHIFT’ as you drop it on to page one and In Design auto generates the number of pages you need, creates text boxes according to the masterpage guides you set up and ‘Hey presto’ your book is ready to be styled with paragraph styles and character styles etc. Now what happens if after you have done lot’s of work on it, you decide you want the bottom margin of every page to be 4mm higher? This is something that happened to me. I wanted more white-space at the bottom of each page.

Changing your mind about the layout / columns / margins – here’s what you need to know:

Logic would say that when you would alter your master page and all those pages referenced by the master would adjust accordingly.

Let’s see: Go to the master page, select ‘Layout > Margins and Columns’ from the menu make the required alteration, in my case it is changing the margin for the main grid columns. This changes it on the master page. However, it will NOT change it on all the existing text-fields to which the master pages are applied to, it will only change the guide – NOT the content that is already there.

This made me panic and think that perhaps I’ll have to go through each page manually adjusting each text box to the new guide.

Don’t panic, there is a great but subtle solution.

Here is the solution to adjusting your layout in master pages and having it affect all the pages to which your master is applied…

1. Go to the master page you wish to edit by double clicking on it…
2. Go to ‘Layout > Layout Adjustment’
3. Tick that wonderful box that says ‘Enable Layout Adjustment’
4. ‘Layout > Margins and Columns’ and edit whatever it is you wish.
5. Job done… all those pages should  adjust their existing text-fields and content ( only content which was originally inside the grid guides will move however ).

In my case it was ‘bottom margin’ by 2mm. All text fields under that ‘Master Page’ adjust to fit within the new guides. If you have graphic objects such as photos in your book, you can select ‘Allow Graphics and Groups to Resize’ and any objects which fall within the layout will shift into the new margin accordingly.

This morning I was listening to music on SoundCloud ( I love that site )… and reading some news. It suddenly struck me just how much computers have become a part of my life and inspired me to make this little diagram about how much my thoughts on computers have changed since those early days. I never would have imagined such things would happen. I don’t think so anyway, I was too busy playing with radio controlled cars.

This process does vary from project to project but this is certainly a good starting point.

How I used to do it:

1. Meet client and gather requirements.
2. Research, design then build the prototype of the project and show it to them, praying they would be happy with it.
3.  If lucky, the client would be happy and we live happily ever after.
4. Sometimes there would be a long period of alterations which could take the project far beyond the quoted time.

How I do it now:

1. Initial contact with client via phonecall or email.
2. Meeting in person with the client. Ask many questions about what they do, how they think and what they want out of this project. Establish business aims, keywords, target audiences and get a feel for the project. Explain the project cycle process. Establish a good understanding of the client and their requirements. And their personality!
3. Write up a business agreement, which contains a brief and key outcomes of the project. Client must sign the agreement and return to start the project.
4. Begin researching: competitor’s styles, target audience interests and motives, brainstorming… Present this research to client.
5. Create a moodboard containing possible colours, photos / illustration styles, typography and written language… check if client is happy with this direction.
6. Once moodboard is agreed with client, start creating wireframes of as many key areas of the site as possible… show client these for approval.
7. Mockups of some key pages before actually building the site’s core structure and CSS.
8. Testing phase…
9. Ammendments, content details added such as photos and text…
10.  Test again… and launch live project.
11. Follow up with client at various stages after launch to check progress and make changes as necessary.

UX Design means ‘User eXperience Design’ and UI Design means ‘User Interface Design’. That’s the easy bit.

You could be forgiven for assuming that they are almost the same discipline and that if you are a user experience designer you must also be a user interface designer.

From my research I conclude that UX design is the deeper picture, it covers all aspects which affect the overall ‘user experience’. This could include everything from brand perception to the actual user interface to the quality of language used in the copy-writing to what information is displayed to users and many more things in between.

UI design deals specifically with the user interface. This includes the ‘look and feel’ as well as functional decisions such as ‘how do we indicate to the user that this button has been pressed?’ as well as structure and layout of interface elements. Therefore, the UI is very important in the overall ‘user experience’ however it is just one aspect in the bigger picture that contributes to UX.

Do the UX and UI designer’s roles crossover?

Depending on the size of the project or organisation, the UX Designer could be seperate from the UI Designer. Often the roles crossover and are covered by one person. On larger projects there can be a whole UX team, though I have yet to work with one. More often, in my experience, is that UX is covered by the web designers, the developers, the project managers and the business analyst. Having experienced this approach (too many cooks) I can see the benefit of having one person who is focused entirely on UX Design.

What it all stems from and points to is: ‘user centred design’. That is something that every project should have at the core of its objectives. As a web designer, I am not a UX specialist but am aware of the importance of UX considerations and how the UI relates to that.

Further rescources about UX Design:

http://mashable.com/2009/01/09/user-experience-design/ – comprehensive list dispelling myths about UX Design…

http://www.uxmatters.com/mt/archives/2010/03/ux-design-versus-ui-development.php – more in depth info about UX design…

Their whole range features these under-stated hand-drawn illustrations with awesome flat colour combinations that work so well together I would call it a pinnacle in modern packaging design.

There has been an ever growing trend towards hand-rendered ( or hand-rendered style! ) typography and design in recent years… I think it reflects a mild backlash against the over computerisation of life in general and perhaps people relate to things which look like they were created by hand without the tools that give un-natural perfection. That’s my theory anyway.

Then you could look at the success of Apple products with their super-slick lines, shines, curves and uber-slick interfaces which people (including me) love as well and realise that perhaps what people want is a bit of both in their life… after all, variety is the spice of life!

These Clipper packages are a fine example of hand-drawn style illustrations mixed with sophisticated colour combinations and a friendly typographic mix that brings a subconscious smile to the eye of the buyer. And it’s true, their teas are great… especially the Earl Grey which beats the Queen-endorsed Twinings by miles in my humble opinion.

The back of the package is inviting to read with sweet details...

The company behind their branding are London based design and marketing firm Big Fish. From reading their web site I gather they “only choose to work on projects that we have a personal belief in and that we would be consumers of ourselves“. That is a very noble claim and one which has clearly worked in their favour.

Here are some of the most useful Photoshop shortcuts I have found myself using time and time again. This post will serve as a reminder to myself and hopefully might help someone else in the future too…

Most shortcuts are backwards or forwards compatible, however: I am currently using Adobe Photoshop CS4 on a PC.

As a former MAC user I sometimes got confused about which key is ‘Cmd’ and which key is ‘Opt’ so the first diagram here explains which one is which and their PC equivalents.

1. Duplicate current selected item to new layer: “Alt” + drag with left mouse click.  So useful I use it all the time. Works in a lot of design related software too.
2. Make a snapshot copy of the current state of your document (all visible layers and effects): “Ctrl” + “Alt” + “Shift” + “E” = all flattened on to a new layer above your currently selected layer.

   

3. Decrease or Increase Brush Size Quickly: When using any ‘Brush-like tool’ (Brush, Eraser, Clone etc): “[" decreases brush size, "]” increases brush size. Awesomely useful in many situations, saves so much time.

   

4. Decrease or Increase Brush Hardness Quickly: As above but “Shift” + “[" / "]” = Increase / Decrease brush hardness.

   

5. Save for web:“Ctrl” + “Shift” + “Alt” + “S” = Save for web. Most people prob know that already as it says on the file menu; but so useful it had to be mentioned.

   

6. Fill a layer with colour / pattern: “Shift” + “F5″. Love it.
   

   Image showing that Shift + F5 brings up the 'Fill Layer' dialogue

7. New layer via copy: Select a bit of the layer you want on a new layer with marquee, then: “Ctrl” + “J”.
   

   "CTRL" + "J" Copy selected area to new layer

8. Moving around a document fast: Whilst in any tool mode: Hold “Space-bar” gives you the handy hand tool… Then press “Ctrl” and “Space-bar” gives you Zoom In, add “Alt” to Zoom Out. If you get used to these, it feels good as it saves a lot of hassle!
9. Duplicate layer in free transform mode: “Ctrl” + “Alt” + “T” to duplicate layer and enter straight into free transform mode.

   

10. Undo several steps beyond the previous ( like history ): “Ctrl” + “Alt” + “Z”

    

That is all for the moment. If you have any more to add to the list, please do.