How To Be Objective In Design

Monday, July 16th, 2012

The process between art and design differs, in the former expressing an idea artistically and the latter finding a solution for a user or task. Graphic designers require objectivity in their visual creations, which often entails overlooking personal emotional judgement and focusing on influencing consumer perception instead. Paradoxically, humans are inherently affected by feelings and cannot completely disengage from their sensibilities or opinions when discerning the aesthetics of their final product. Therein lies the quandary of: how to be objective in design, when art and design is a subjective experience by nature?

Nature and evolution have been designed as means of survival and improvement. Therefore it is indifferent to the viewpoints of being attractive to us, or vice versa. For example, an insect’s appearance is subject to its environment and continuing existence. To overcome our personal tastes as designers, we should endeavour to define the core concept and nurture it with the marriage of logic, creativity and the application of social psychology.

 

 

Aside from our preconceptions and experiential conditioning that influence our personal propensity, it is important to remain impartial during the design process. This can be challenging due to our innate comfort with familiarity, which also needs to be considered when designing a website, as this impacts its usability. In approaching online construction, recognition and the ability to learn amongst consumers is important to bypassing artistic preferences, if it does not comply with clients briefs and their target audience. Additionally, the end user is likely to identify more whilst browsing, if designs have a hierarchical and organised order that communicates effectively. Simplicity is central to developing a user friendly interface that also boosts its popularity. Therefore web designs are structured based on the rationality of them working, as well as mere beautification.

 

 

This approach builds a trusting relationship with the client’s expectations, enhancing the product’s credibility and quality. Creative thinking combined with design skills, is important for graphic designers to be innovative. However, when designing on behalf of others, objectivity involves prioritising their conception above your own. Having the understanding to ask yourself “am I delivering what the client wants or what I think is best?” Despite also addressing the input of your customer as opposed to an artist creating for themselves, one must consider what design is going to be more lucrative for the clientele’s financial gain, rather than just to receive critical acclaim.

 

 

However, based on the premise that everyone has the potential to be creative, means everyone also has an opinion. Therefore, whoever is financing the design project, has a right to its evaluation. It is a graphic designer’s job to interpret the commissioner’s specification and offer aesthetic and effective solutions. Subsequently, the design cannot be implemented without accommodating the limitations of the developers web technology.

 

Therefore the merit in being objective in design, reminds designers to recognise function above form. Additionally, it is the designer’s responsibility to offer creative suggestions but overlook them if the payee has other inclinations. When a professional designer employs objectivity, they are able to deliver good business value and user experiences. As such, a website should be user friendly and encompass aesthetic appeal, based on unbiased designs that compromise with the programmers coding framework.

 

User Navigation

Wednesday, May 16th, 2012

Manoeuvring around a website is defined as user navigation and is important in the success of how a site is accessed and utilised. It provides a gateway to different content sections and is largely dependent on the effectiveness of its design. We can learn a lot from market research and various studies that inform us of the most effective website layouts that guide the end user to making informed choices. Eye tracking is a successful method that studies retinal movements regarding visual stimuli such as videos, images or other graphic design elements. Our brain processes information via our senses. In particular, the optical perception of audiences is targeted, as many eye tracking surveys have been conducted whilst surfing the web. When designing a website’s user navigation efficiently, it’s advantageous to apply this knowledge and enhance your chances of attracting the attention of users.

 

Picture: blogstorm.co.uk

 

The most common location for a logo is in the top left hand corner, whilst the call to action bar is in the upper navigation panel. This is where users eyes naturally gravitate towards and they should not have to scroll down further for valuable information. Many languages are written from left to right, therefore our eye movements often emulate this reading pattern. Consistency throughout a website relating to type, colours and style, is another guiding principle that should be maintained. The navigation bar should be in the same position on every page, so as not to confuse users. Following this, eye tracking studies indicate that our attention shifts to the centre of the page and then migrates towards the call to action button. This visual path should influence the positioning and type of content chosen for your website, particularly regarding the ‘hero’ shot. This refers to the image that is centred, or to the left of the page and used to grab the attention of users most of all. For ideas towards website navigation design patterns review;

http://sixrevisions.com/user-interface/navigation-design-patterns/

Additionally, ensure your site’s navigation sections are labelled with obvious names, as vague titles frustrate users. Opt for more specific terms such as ‘blogs’ and ‘services’ instead of generic, obscure button indicators like ‘tools’ and ‘resources’. Also keep your navigation path simplified as excessive sections overwhelm the user with choices. This can be avoided via breaking them down in to sub sections and minimising your navigation bars to less than three. Once you click in to a page or section, the button should change colour to show visitors which page they are on.

Navigation can be categorised in three terms:-local, global and contextual. Links for local navigation allow users to move through a major section to view its different topics. Also known as category links, they are usually located in a navigation bar on the left side of the web pages. Global navigation links enable visitors to navigate to the major sections on every page and are found in upper navigation panels or side menus and can also be situated at the bottom. Contextual navigation links are specifically related to items in the body content of your website page and appear in the functional window of any active widget on your page.

Therefore, web navigation is not only the means of manoeuvring around an online site but also a tool for engaging your visitors. The positioning of navigation bars and call to action buttons is crucial in impacting your audience and allaying confusion for users. Eye tracking studies indicate that the eyes focus on images that have hero shots with captions, prompting users to remember them more. Articles that have more organised, punctuated and well presented material, assists visitors to process information easier. Ensure your website is as user friendly as possible so that your navigation designs direct the eye, decreasing the visual effort required by users. Our brains are wired to be attentive towards human faces. Instinctively, this is what most users would notice first if a face was present on your web page. Use power words, colour contrast and font size to make your navigation panels and content stand out. Most importantly, present your navigation bars, key information and offers in the centre or upper left corner of your web page for instant conspicuity. As such, web navigation becomes the art and science of guiding the course of users browsing through your website.

What clients need to consider when commissioning a website

Thursday, March 29th, 2012

When requesting a website, there are numerous factors that require consideration for its creation. It is important to communicate your specification to the designers and developers, to avoid incurring any additional charges and maximise time productivity. Websites can take weeks to build, so ensure you clarify your prerequisites during your consultation. Together, clients and the design team process can transform that information in to an online vision. The following points should be contemplated when a site is being commissioned.

 

General:

  • Who are your competitors? 
  • What are your brand colours?
  • What is the objective of your project?
  • What is the project background information?
  • What is your budget?
  • What is the deadline?
  • Do you need stock photography?
  • Do you need a copywriter?
  • Do you need Facebook/ Twitter/ YouTube pages?
  • What are the project details?
  • Is it an information website or does it provide a service?
  • If it’s a service, what does it do and does it communicate with any other web services/websites?
  • What pages do you want? home page, about us page, testimonials page, products page, etc.
  • Do you need domain, email or hosting services? 

 

Branding:

  • Where do you aspire to be as a company?
  • Who is your target audience?
  • Do you need a logo?
  • Will it be trademarked? Which countries?
  • What kind of logo do you want? (text / symbol / or both)
  • What style of logo? (give examples of what logos you like)
  • Do you have any examples of logos that you do or don’t like, including your competitors?

 

Technical:

  • Is it a straightforward information site or does it provide a service? If so, what is the service and will any automated coding be required?
  • How many pages are required?
  • What are the specific functions required for your website?
  • Do you want us to provide you with SEO (search engine optimisation) to increase your page rankings on search engines?
  • Would you prefer a static or fully content managed website?
  • Prepare some wireframes (information within the structure of your pages) for your consultation with the design agency, or alternatively request this from the developer. Once you have wireframes you can decide how many templates your website requires, as they allow the team to visualise the website and its functionality, prior to the design or development process. 

 

Design:

  • Provide the url of websites you like best considering structure and style? etc.
  • Ensure you are not overloading your page with too much information, so leave room for white space.
  • Although not essential it is also beneficial to inform the agency of competitor sites and your opinion on them. This does not have to be a detailed analysis however; it will help to build a stronger and clearer picture for the designer to interpret exactly what you envision.
  • How would you like to represent the personality of your company? Eg. quirky, fun, corporate, cutting edge etc.
  • Giving a clearer understanding of your website’s purpose enables the best design solution for the end users experience.
  • If you have particular expectations, express the aesthetics and ambience you aim to achieve.
  • Do you prefer illustrations or photography? What style would you like to opt for?
  • Are there any brand guidelines that need to be considered before creating or upgrading your website?

 

Once the above has been discussed with your designer and developer, this will improve the swiftness and efficiency of constructing your website. Bear in mind that you can send a succinct email with instructions for content including pictures and their position. In doing so, avoid emailing large files as this will hinder delivery and your designer will have to reduce the resolution following transmission. Reference your attachments with the correct and relevant filenames to avoid confusion. Finally, remember that their time is your money – therefore form a symbiosis with your designer and developer to produce a website that meets your satisfaction.

Photography Interview with Conor McCabe

Monday, November 14th, 2011

 

Q: How did you become involved in photography?

 

A: I started off my career in photography in Whitespace Publishing Group Limited based in Dublin. My job role was to supply business and editorial photography to their newspaper supplements and business magazines.

 

Q: What advice would you give to someone whose interested in starting web and print photography?

 

A: Keep working to develop your craft and keeping an eye on trends and styles of your photography area, and then add your own twist.

 

Q: Do you think you can learn to have a ‘photographic eye’ or is it something that comes naturally?

 

A: I have always believed that you can learn any skill area but some people have to work harder than others to achieve the same result.

 

Q: How many years have you been doing photography?

 

A: Just over 7 years, full time professional.

 

Q: What do you find most interesting to photograph?

 

A: The variety of work and the challenge that you can always do better as a photographer.

 

Q: How would you describe your style?

 

A: Mostly creative, can be quirky at times!

 

Q: What is your essential kit that you shoot with?

 

A: My 5D Mark ii camera with the Canon 70 – 200 Mark ii and 50mm prime F1.2, 580ex ii flash gun, Pocket wizard flash triggers.

 

Q: What is your favourite photograph you have ever taken?

 

A: I have lots of favorite photographs. This photo I took in 2008 of Bosco and Puppeteer Paula Lambert comes to mind. I grew up watching Bosco. I asked him for his autograph.

 

 

 

Q: Any tricks of the trade or personal secrets you have discovered that you could share with others who want to become digital photographers?

 

A: Get your own website developed to suit your work flow and don’t restrict yourself to a particular boring template. Top tip, talk to Peter from Digital Mosaic.

 

Q: Which is the most important camera accessory you would recommend?

 

A: Pocket wizard Flex TT5 and Mini TT1. Great for using off camera flash.

 

Q: Which effects do you lean towards most, when presenting your photographs?

 

A: None, pure form, effects are fades, and photographs are meant to capture a moment in time and not the time when Photoshop took over.

 

Q: Which magazines and websites influence your work and would be beneficial for others to consider?

 

A: I follow other commercial photographers for inspiration i.e www.perou.co.uk www.terrysdiary.com www.chasejarvis.com and other press photographers listed on www.worldpressphoto.org

 

Q: How important is Photoshop in your final images?

 

A: Very important to colour correct, saturate and crop images where necessary.

 

Q: How much does the average photographer spend on equipment?

 

A: Lots and there is always a ‘want’ list.

 

Q: What has been your most memorable assignment and why?

 

 

 

A: I recently worked with Front Line, the international foundation for the protection of human rights, on a mission to the Kingdom of Bahrain. The delegation mission was to pressurise the Bahraini government to release Irish-trained medical staff imprisoned and tortured after a rights demonstration in March 2011. My role was to capture an honest story in photographs of a very sensitive social issue. It was very memorable as I felt I was part of something that had a social impact.

 

Q: If you could shoot anyone in any environment, what would you choose and why? (Using a camera, not a gun!) ;o)

 

A: I would love to be able shoot on location with the BBC team from the Human Planet, a privilege to document something very special.

 

Q: Do you use photo-editing skills on most images you take?

 

A: Yes, done through a manageable workflow.

 

Q: What do you look for when capturing a moment?

 

A: Capturing subjects relevant to their surrounding. Sometimes just an expression will do.

 

Q: What do you find most challenging in photography?

 

A: Light, getting it right is the challenge. Once this is right, composition and ideas come easily for me.

 

Q: What web applications or software do you use for your pictures?

 

A: Photostation from fotoware and photoshelter for web management.

 

Q: Is there anything you would have done differently in your photographic career?

 

A: None, the experience and timing of my freelance career was perfect timing in my life.

 

Q: What is the most interesting thing you have recently learned about photography?

 

A: Flickr has damaged the sale of photography a little. It is now too easy to upload and offer images for free.

 

Q: Which emotion do you think is the most difficult to capture on camera?

 

A: Capturing anxiety is the hardest as a press photographer. Most public speakers are trained to hide it.

 

Q: Did you know that photography comes from the Greek words ‘photos’ meaning ‘light’ and ‘graphy’ meaning ‘drawing’ (drawing with light). As such, how important is the use of flash, video light, reflectors and natural light, during a photo shoot?

 

A: Ok this is a bit airy-fairy but the following stands for something- I read in college that amateurs worry about equipment, professionals worry about cost and masters worry about light. Light plays a basic part in creating an effect that captures the mood in my images.

 

Q: What is your preferred choice of lens?

 

A: Canon 70 – 200mm Mark ii

 

Q: What is your most used Photoshop tool, plug-in, action set etc.?

 

A: Batch automation comes in handy and camera RAW.

 

Q: Which photo apps would you recommend to download on a phone?

 

A: Strobox for the iphone, great for planning studio set-ups

 

Q: What photography equipment is next on your shopping list?

 

A: Lasolite TriFlash Kit

 

Q: What is the process you follow once you have completed a shoot?

 

A: 1. Filing 2.Back up. 3. Getting the images to clients on the day of the shoot to make their selection.

 

Q: Have you ever had anything go wrong during taking pictures and how did you handle it?

 

A: Possibilities of things going wrong are endless when on a commercial job, that’s why experience in this field teaches you how to handle situations to prevent any mishaps!

 

Q: What does it take to be a great photographer?

 

A: A lot of hard work with a strong business mind.

 

Q: Are there any photography seminars or workshops you would recommend?

 

A: Seminars on how to sell and manage your photos online from www.photoshelter.com

 

Q: How do you back up your data?

 

A: NAS drive onsite and a copy off site plus on line back up.

 

Q: How do you copyright your pictures?

 

A: By not letting go of images until getting paid!

 

Q: How important is having a website for your online portfolio?

 

A: Massively important, web presence is the core of my business.

 

Q: Sum up what photography means to you.

 

A: Capturing that image that portrays a story in time where I can look back and be proud of taking that shot.

 

Chapter 6: Typography in Web Design – Interview with Grant Bowden

Thursday, September 22nd, 2011

Typography Interview with Grant Bowden: Creative Director of Deep.

 

 

Q: What excites you about typography?

 

A: I could happily write about the never-ending beauty of the letterforms, the utilitarianism of Sans Serifs, the timeless sophistication of Serifs, the elegance of Script Lettering, the no-nonsense of slab serif, the aggression of Black Letter and the myriad of inbetweeners. I could write about the different ways different fonts can make you react to the same word, the way a message can be heightened just by the font it is written in, the way a brand is perceived by the typeface it is set in, and just how God damn powerful typography can be. I could write about the way the word STOP in capitals commands you to do something and you obey, the way Helvetica Medium, range left continually excites on FFFound.com, or even the way the word C*nt was so elegantly portrayed by a hand lettering artist.

I could write about Gotham, Chronicle or Tiffany or why any designer has three favoured fonts at any one time.

I could write about all these things. But at the end of the day its probably because I am such a nerd.

 

Q: Do you regard typography as an unrecognised art form?

 

A: Is it unrecognised? There are enough awards/advocates/students and fans of typography in the world.

Typography by itself is not art, but pure design – it has a function, a means and a purpose. Thats not to say it can’t dip its serifed toes into the stream of art and occasionally be part of that world and appear either brutal, beautiful or thought provoking.

 

Q: How do you transpose print typography to web typography?

 

A: Thank God we now can begin to, with font replacement and Typekit. The typographic hell that was the web is now being reined in and the move towards Apps gives the designer even greater control over the appearance of type. The real typographic challenge on the web (in HTML) is how to present type that can be increased or decreased in size at a whim by the user. Flash allowed typographic freedom but Apple iPads have temporarily put paid to that, but the web is excitingly becoming more expansive in its use of type. Interactive magazines on the iPad is a truly exciting development for typographers. In many ways we should not be trying to transpose print typography to digital projects, as one is static and the others excitement comes from its movement and dynamism.

 

Q: When and why did you develop an interest in the field of typography?

 

A: At college when I thought I was going to be a designer. Why? I think it was when we had a class in which we drew letterforms that I started to understand the inherent beauty in something so ubiquitous.

 

Q: What is the most important aspect of typography?

 

A: Freedom or constraint. Depends on the project, the client and the audience.

 

Q: Which typographer and typography work inspires you?

 

A: I think I have been influenced by many different designers, and my taste changes constantly so its hard to pinpoint anyone that has stayed consistent or I haven’t ‘grown out of’. But influences have been Adrian Frutiger, iD Magazine, 80s Dutch Studio, Vaughn Oliver, Octavo, Emigre, David Carson and more recently Vince Frost, The Partners, and the ever inventive designers in the Deep studio.

 

Q: What is your favourite typeface and why are you ‘font’ of it? ;o)

 

A: You should be ashamed. My favourite font is the next one I fall in love with.

 

Q: Where do you see the future of typography heading?

 

A: As communication hurtles towards more and more onscreen communication, typography has to follow suit and will be presented in a more animated and fluid way.

What will remain true is that a font which was carved into the Trajan columns two centuries ago, or a font designed by the minimalist Bauhaus will still have the same relevance in the future due to the feelings, emotions and memories it evokes.

 

Q: Is there anything else you want to add to this?

 

A: Can I go now?

Chapter 5: Typography in Web Design – Serif & Sans Serif Fonts, Typography as Art.

Tuesday, September 6th, 2011

Serif and Sans Serif Fonts

Serif fonts such as Times, Georgia or Baskerville are used for large bodies of text as they are more distinctive, familiar and legible. Whereas Sans Serif fonts such as Ariel, Helvetica and Verdana etc. are more effective for low monitor resolutions and therefore applied to captions, headlines and logos. Serifs are distinguishable from Sans Serifs because they have small lines or hooks on the end of characters.

Typography as Art

Typographic art, is typography at its most creative. This is the culmination of space, size, effects, contrast, colour etc. that goes into every aspect of design involving the use of type. Designers not only use type as an effective means of embracing aestheticism but also to convey important messages.

(Tredhunter)

Remember these are not rules, they are merely guidelines. Thus, the fundamental constituents of typography lie in the consideration of contrast, font size, hierarchy, space, widows and orphans, alignment, paragraphs, measure, kerning, negative and positive spacing/tracking, baseline, leading, hyphenation, emphasis, serif and sans serif fonts and typography as art. Consequently, we have the opportunity to breathe life into our web pages with all written communication. Therefore, typography is the most important tool for a graphic designer to visually express electronic forms of information or print through design elements, although there are some limitations with web.

(Continue to Chapter 6: Typography Interview – Grant Bowden, Creative Director of Deep).

Chapter 4: Typography in Web Design – Hyphenation, Emphasis.

Tuesday, September 6th, 2011

Hyphenation

Hyphenation in typography serves to connect words that are divided when they cannot fit comfortably at the end of typed lines. To avoid fragmented words, hyphens should be placed predominantly between consonants. A useful tip is to ensure that a hyphen is sandwiched between two letters on one line and three on the following line.

Emphasis

Emphasis is a useful tool in typography as it changes the style of words that need to be highlighted from the remaining text. Emphasis methods should not be used too frequently as it disrupts the flow of type. However, the most effective techniques include italics, size, small caps, bold caps and colour. Underlining is not a good example. Colour in typography is not only used for emphasis, it also serves to attract attention, organise content, create a mood and improve readability.

(Continue to Chapter 5: Typography in Web Design - Serif & Sans Serif Fonts, Typography as Art).

Chapter 3: Typography in Web Design – Kerning, Tracking, Baseline, Leading.

Tuesday, September 6th, 2011

Kerning/Mortising, Negative/Positive Spacing-Tracking

Kerning-also known as mortising, adjusts character spacing in proportional fonts for an aesthetically pleasing result. This is achieved via moving the letters closer together, otherwise referred to as negative spacing. Tracking or positive spacing on the other hand, moves the letters further apart. When a font is kerned correctly, the area of the two-dimensional blank spaces between each pair of characters is similar. Also, part of a type letter that is not aligned with the type block edge beneath it, is classed as a kern.

Baseline

In typography, the baseline is the line upon which most letters rest and those that extend beyond it are descenders. In the example below, the letters sit on the pink baseline where as the surpassing letter ‘g’ is the descender.

Leading

The distance between the baselines of successive lines of type is denoted as leading in typography. The term originated in the days of hand-typesetting, when thin strips of lead were inserted into the forms to increase the line height in type. Leading is still used in modern page formatting software.

(Continue to Chapter 4: Typography in Web Design – Hyphenation, Emphasis).

Chapter 2: Typography in Web Design – Space, Widows & Orphans, Alignment, Paragraphs, Measure.

Tuesday, September 6th, 2011

Space

Allow your text to speak by having enough negative or white space to envelope it. Another web typography rule is to keep 140% of line spacing in relation to your font size, as specified by the line-height CSS property. In fact the attention to micro space within the type, is the mark of a good designer. Not only is the balance between the surrounding space of the text essential, the macro whitespace that encompasses the body of text is equally important. 

Widows and Orphans

Avoid ‘widows’ and ‘orphans’ and I don’t mean social discrimination. In typesetting terms a ‘widow’ refers to the last line of a paragraph that falls at the beginning of the following column or page, separating it from the remaining text. Where as an ‘orphan’ is the opening line of a paragraph left by itself at the bottom of a page or column. ‘Orphans’ also include a word, partial word, or short line that appears on its own at a paragraph ending. They result in excessive white space between paragraphs or at the bottom of a page.

Alignment

Alignment in typography has four basic formats. Multiple lines of text are aligned flush left, flush right, full justification or centre aligned. Although the edges of justified text may appear neater, this affects the spacing between words so the lines can be structured accordingly. Flush left or centred is more consistent for tracking purposes.

Paragraphs

Paragraphs allow readers to digest written information easier by providing text with composition. This group of topically related sentences are better scanned by readers if concise, by averaging six lines. Indents or line breaks are the most practised method of separating paragraphs. Sub headings also contribute to their visual consumption by adding description.

Measure

Measure denotes the horizontal width of a column. The readability of text is affected by line length as eyes become fatigued from repeated reading of extensive type. This is the reason that editorials are structured into columns. The ideal measure is 40-50 characters (including spaces) for a single column of type. On the other hand, a good measure for multiple columns of text is between 45-75 characters with an average of 66 characters.

 (Continue to Chapter 3: Typography in Web Design – Kerning, Tracking, Baseline, Leading).

Chapter 1: Typography in Web Design – Contrast, Font Size & Hierarchy

Tuesday, September 6th, 2011

Typography derives from the Greek words ‘typos’ and ‘graphe’, meaning ‘form’ and ‘writing’. In web design it is the technique and art of arranging typefaces, which manifested when Tim Berners-Lee launched the first website in 1991. http://www.telegraph.co.uk/news/newstopics/nationaltreasures/2194133/Sir-Tim-Berners-Lee-portrait.html

Contrast

The contrast between typography and background requires consideration of colour and font types. The purpose of text is to be perused and as such, it needs to be formatted in a way that enhances its message. To test that it contrasts enough with your background, screen grab your page. Then open your image editing software and reduce the image to grey-scale. The Canadian typographer, poet and translator Robert Bringhurst, published The Elements of Typographic Style, which has become a classic for typographers.  This guidebook promotes that websites are designed to maximise their content and text: “Typography exists to honour content.” http://webtypography.net/

 

Of these two examples black text against white background, is less of a visual strain then vice versa and as such, books are usually presented this way.

Font Size

Small text became popular amongst graphic designers however, this only hindered the average reader. Therefore, ensure your font size is large enough to be viewed on different sized devices. Avoid setting body text below 12px for web based applications.

The size of typeface is measured by the height of the ascender to the descender. Good font size varies between 9-12 points for body copy. Note that different fonts in the same size will not appear with identical dimensions. Larger fonts are preferable for those with declining eye sight due to old age, so always consider your audience. 

Hierarchy

The hierarchy of type size is of importance in establishing differences in content. Aesthetic boxes and colours may enhance the display of your web page. However consistent type face used throughout your pages will highlight the elements on the page to the readers. This increases your chances of hooking those who read your work for longer. Another way to achieve this is utilising different styles, serif and sans serif faces, capitals, italics or sub-headings.

 (Continue to Chapter 2: Typography in Web Design - Space, Widows & Orphans, Alignment, Paragraphs, Measure).