#christopher keeley

[hyggev]

Thom Yorke, 1997

Photographed by Christopher Keeley for Rock for a Free Tibet.

[ckeeley-blog]

Week 12 | #buildabrand

This week is the final week of DES511 Semester 1 module which we have to finish the live project website which I have to admit was delayed until January thank to festive season that is Christmas.

Visual Composition

First I start out by deciding on width of the content in my website with 800x600 for standard default which I use to design most if not all my websites at the moment.

I initially went for 600 pixel width for the content itself but due to certain design idea such as having top menu section need to be in one rather in two lines due to lack of width within 600 pixel limit, I raised it to 650 pixel wide.

I start creating the visual composition of the site in Photoshop with uses of the tools, which guides lines is most important for me to manage the placement of the content. I start with header section by adding 50 pixel height bar with 3% noise to provide more of grain effect than being completely smooth, and add in bevel effect to 1 size to create shadow line effect on the bottom of the bar.

Figure 1 - Header background image

Then I create indent nav bar which you would find inspiration from search bar that normally sit on top right but I will add in links for each of page within GROW website, with uses of colours to highlight the mouseover and mouseoff effect to add interactivity to navigation that sit to right hand side of header.

Figure 2 - Nav Bar for the header section

I add in the logo which been changed with the difference between first and second screenshot which you can see below in Figure 3 to show the difference between it didn’t seem to work well because of having a banner with “GROW” and another “GROW” sitting on left hand side of the nav bar.  I decide on the tab with inspiration from www.simplebits.com website with the bookmark so I alternate the first version into second version which proved to work to better effect with the white combining with green background rather having variety of colour of green in the logo in contrast with the white background.

Figure 3 - First Version of the GROW logo and banner

Figure 4 - Final Version of the GROW logo and Banner in header section

The content section for the homepage took me bit of time deciding on what and where the content should be placed and what font and colours I should use. I want to use a slideshow but the issue was the image was drowning out the content, as in taking too much space and turning the column of text too short in width. So I reduce the scale of the image and add in the box with drop shadow around the image, act as a container, creating more focus despite being smaller which you can see on live site in comparison to screenshot below:

Figure 5 - Content Section of Visual Composition

I have decide to create images of title of each page as in “HOME”, “ABOUT US” etc. because of the risk of font not being available (Brush script std) in users computer so it would be much safer to use image instead using header tag.

I use colours of dark green for the header tag which using black in default norm for text instead of which because it would create less focus in white with contrast of white background instead of black colour creating more of focus onto the text itself. Sub header would be in paragraph with strong tag instead of using header.

The box shape I have create for the content container is to create a focus onto centre of the page rather having complete white background, risking drowning out the content with the sheer volume so it need to be divide into their own area.

Figure 6 - Screenshot of Content Section of Home Page in Live Project

The footer section which after I read the specification created by our lecturer, I add in the funders logo but after feedback of adding round corner, I alter the funders logo with round edge and that improve with huge difference which you can see below with two image.

Figure 7 - First Version of Funders/Sponsors Section

Figure 8 - Final Version with changes to Funders logo in footer section

I did similar effect of the background of the footer to the header accept the shadow facing north side of the footer bar. It does seem to produce the effect of the white background in content sticking out rather creating shadow effect of the bar sticking out – it could work both way depending on how the user see the overall display of the website.

Figure 9 - Footer Background Image

The Garden page contain the Google map in same dimension as the slideshow in the home page but I feel it was too small and need to modify the scale if this project is actually being considered by the client which is not.

Implementation of the live project

I am implementing the design onto HTML document rather creating with Wordpress so it is static but the function of the blog is a placeholder sadly and I will be honest, this website took me 6 hours to design and coded which is pretty quick but again that the difference between implementing into static format rather doing dynamic sites with features of the blogs and what missing from the features the clients want.

You can visit the live project site below:

www.chriskeeley.net/grow/index.html (best viewed in Firefox browser)

Also you can see the three screenshot below highlighting the difference of visual composition and the live project on web browser.

Figure 10 - First Version of Visual Composition of the Live Project

Figure 11 - Final version of the visual composition with changes from first version

Figure 12 - Screenshot of the "The Garden" page from the Live project site

Conclusion

I feel I should have done more work and spend more time in effort of learning and implement within the Wordpress and try creating features such as weather feeds that is potential feature that the client want.

However I feel that with result of the live project, the scale of the content is too small and should have expand to width of 800px width for the content of the website itself, enlarging the slideshow or in fact given a section row above/below the text on the home page.

The garden should be done in similar effect creating larger view of the Google map with details of the bubble indicating what and where is the GROW gardens is rather just being a marker on a map.

Blogs features should have more details, creating more of bubble/box around it with details, similar to the slideshow container. I am disappointed with myself that I should have spent more time on DES511 module but alas I need to work harder on my major project in next semester so I will take it as lesson and work harder than before.

P.S. “Thank for your patience for not attempting to injury/kill me for murdering your eye sights or brain cells with my attempt to murder the English language.”

[ckeeley-blog]

Week 11 | #critique

This week the lecturer thankful have created a folder for us to download with all content required to be placed onto GROW website with instruction of what and which should be each page. What we have to do is creating sitemap of what content should go on each page and what features we should implement or not depending on task itself.

After reading thru the specification provided by the lecturer, I have decide on what pages I need to create and what need to be implement onto each page as you can see below:

Home Page – Contain the banner, series of images to show photographs taken of GROW in action, news section with blogs feed from News section and donate section with inactive link to www.justgiving.com.

About Us – Mission statement of the GROW are placed here

The Gardens – Two Google map location shown in terrain view with lat/long address given by the organisers.

Get Involved – This section contain the volunteers content along with details on how to join GROW with Q/A section

News – this is where placeholder blogs is placed, one for each garden, providing feeds to Home page

Contact us – this is contact details page where each organiser have email address shown which is inactive to prevent spams for actual email address.

Footer section - every page will contain details of funders and sponsors with donate information along with my tag of “Site designed and developed by Christopher Keeley” which is required for this project.

Brand Placement and Transfer

After deciding on the final logo for the GROW project, I want to experiment by seeing how well it can transfer into paper-based content such as business card, letterhead etc.

Figure 1 - Business card with placeholder information

Figure 2 - Letterhead version of GROW

To static or Wordpress the project?

I don’t think it will take lot of thinking for me to decide on static content because of two factor, I will not put up my work for considering because I know for certain it will not be choose by the client due to higher quality of work produce from other student in my course due to being more experienced and knowledgeable in Wordpress, coding in PHP/MySQL which mine is on basic/beginner level.

Second is that I actually never use Wordpress before which is very poor considering I am student in IMD where passion for this industry is demanded to be successful which I feel I need to improve myself in term of discipline and character to work before showing improvement in my design and development skills.

[ckeeley-blog]

Week 10 | #grow

This week in the lecture which I foolish missed was extremely important live project brief which I didn’t pay attention of this module have live project toward end of the semester for DES511 but we were told to create sketches and designs to bring in next week, logo/brand design in particular.

GROW

What is GROW, it is gardening charity organisation to provide community development in particular, allowing locals to take over and run themselves which they have manage to created two garden in Belfast area.

What they want is from student is branding of the organisation that is transferable across most if not all material if possible as in poster, cards, badge etc. What they seek from the website are list below:

·         Need to be implement into Wordpress for content management

·         Two blogs at least for each garden

·         Home page

·         About us page

·         Learning page

·         Gardens page

·         Support us

·         News Section

·         Fundraiser

They also seek the uses of social web tools such as Facebook and twitter to promote awareness of GROW organisation like twitter feed and like function from Facebook.

Battle plan

Now that enemy (Lecturers) got element of surprise on me (not paying attention to content earlier came back on me), I need to create process list of what to do in this live project and what I will intend to do.

Research of the client (the Spec will come next week provided by the lecturer)

 Design of the brand or logo that is transferable across materials in multimedia

Implement wireframe and visual comp of the website

Development of the Website in static HTML (since my work is not going to be considered so no need to implement in Wordpress (Which sadly I am beginner in knowledge of using it)

Testing of the website and print work showcasing all material related to promoting of the brand

Research and Design of the brand

Considering that the client is specific on gardening theme, I am already focusing on making brand out of plants, particular on grow but the issues is that everyone in class would have similar ideas of what they want but execution of the work in logo design will be different.

Figure 1 - GROW research brand moodboard

What the visual board tell me in figure 1 that there is specific icon for “Grow” in gardening is plant, not flower but plants and leaves in particular with difference tone of green seeming to reflect on the brand itself.

I have two aim with this particular brand design I want to do is making it simple and clean but light and effective in branding itself. I noticed certain trend in designs of brand is having flow or waves with brushes crossing each other with even gap on both side. It is kindly hard for me to explain this particular design so I will show you in next image of particular design I already have in head – rough sketches of few design before the jump to design I have envisioned to use below:

Figure 2 - Sketch design choose for brand design of GROW

Now I did light sketch which you can see is very rough lines is mainly how I sketch of keeping it light and trying to enforce the design then take a photo/scan the image which I transfer into Photoshop.

I would tried to do this in Illustrator but I am more experienced in uses of Photoshop than Illustrator so I use polygonal blah following the lines careful to allow smoother flow of shape. After I complete the traces of the lines, I fill in with two colours I pick out of Colour lovers site with particular search on plant colour palettes. First result is quite rough around the edges, so it needs to be soft up with uses of smooth function with select function of the shape. I deleted the left over after 10 pixel smoothing effect then add in darker tone of colour with more variety with another palette of plants colour I got from Colours lover again. You can see series of images next to showcase the improvement and changes in my work on Photoshop below:

Figure 3 - Design One

Figure 4 - Colour changes from Design 1

Figure 5 - Film grain effect that didnt work at all

Figure 6 - Final design with improvement of colour and outline edge of the logo

Conclusion of brand design

I believe with transition of my sketch design of having symbolic icon for the GROW project brand is good execution of translating my ideas, including the final sketch I have decide, because I want to have simple and effective logo and this is great result for me.

I am aware of lack of large volume of experimenting with ideas to try explore the brand designs but the plant is simple idea that people would think of gardening that come to mind, and creating form of “flow” of shapes combing into single unity icon despite the gaps, showing outline of entire plant so well.

I just can’t wait to implement this brand onto website format to see the overall result.

[ckeeley-blog]

Week 9 | #itsonlywords

This week in the lecture, we were shown meaning of micro and macro copy example which is first time for me hearing both of those terms which is new learning information for me to know. Also this week we were told to make Major Project Proposal which is 1000 words document which have to be bound, not stapled which we have to explain about our major project we going to do in second semester of final year of IMD course.

Major Project Proposal

1.0 | Lift Pitch

  Northern Ireland Deafcyclopedia is website contain two major features which allow users to learn British Sign language with variety of images and videos with alphabet and common words with other features showing interesting place in Google map with custom designed bubble of most of Northern Ireland deaf support group and community with links provided.

  2.0 | Summary

  What this website does in my perspective of being profound impaired in hearing is provided more active source of information of support and community in one site provided with links with locations shown on Google map with modification to bubble to provided more uses out of the Google map feature.

  Another important feature is the primary source for me because I am learning to do British sign language but after visiting several websites showing variety of quality and poorly designed website not being friendly for users to visit, I feel this would be big improvement from other similar mind websites.

  Library of images and videos with person sign with caption of what they say expressing to allow the users to study the British sign language in alphabet and common words and phrases. I would may expand the library with more words and possibly common phrases and sentence to provide more learning content.

  I will provide a news/contact page for those who want updates on news and changes in Northern Ireland or United Kingdom for the hearing impairment with advertisement of events and such, with uses of social web tools like twitter and Facebook with social icons for links to direct them. Twitter feed could be possibly provided.

  The site could have potential for further development of creating forum or Wikipedia like containing content regarding deaf groups around Northern Ireland or creating personal page for football teams like Belfast Deaf United.

  3.0 | Research Outcome

  3.1  | Research Analysis

  There are reason of why I have decide to do this project, mainly personally so I have found several sites in inspiration in due process of research of finding good designs but the issues was lack of localised creativity designs website. Some website do provide good way of structure the content placement  or having creativity way of display learning content of sign language.

  British-sign/Auslan signbank – fingerspelling feature

  I found a particular feature on this website which allows the users to input any word they want and it would display the result in following order with finger sign language for each letter which I feel is good idea to take on for my project with improvement in visual display and usability.

  Auslan signbank was particular better feature as it provides series of image of finger spelling in alphabet where you click on one image and shown on left hand side with bigger screen. However it also show new function of where you input any word into text box below the big screen and it would produce the series of images in order which is improvement of usability over British-sign.

  Fingerspelling function will be implementing into my project for additional features along with library of images/videos show common words, phrases and alphabet for those who want to learn the British sign language.

  3.2  | Target Market

  What I want to target in particular is providing platform of information guide for those who seek out people who are in similar condition of being hearing impairment to join groups and organisation.

  ·         Hearing Impaired of all ages

·         People interest in learning new language

·         Career choice of becoming interpreter

  Target is the hearing impairment for all ages along with people who want to learn British sign language to communicate with their friends or relatives who have hearing impairments.

  3.3  | Technique Used

  What I am going to use in the development of this project is uses of HTML4 Transitional and CSS, not particular involving any uses of HTML5 or CSS3 because of inconsistent of features between different browsers would make it harder for open standards.

  Will be using sketch designs to create images that would be scanned and add onto Illustrator and Photoshop to modify the images for suited to be used on project to be display.

  I will be possibly hiring out interpreter, since my knowledge of British sign language is quite basic so need to create professional standard on the images and videos.

JavaScript will be used to give users control to improve accessibility of the site as in enlarging the fonts for example, along with function to create usability friendly library of images/videos rather having static content.

  PHP and MySQL is a possible option in uses of development of this project, but the issue is my basic knowledge may not be enough to pull off the project in time in comparison of my ability to create HTML/CSS with professional standard with creativity design.

  4.0 | Conclusion

  I hope this project will be delivering in high professional standard as improvement on current websites that are available to display the British sign language content online in United Kingdom.

  There are lot of features that I am eager to implement in this project with good success especially in usability and accessibility of the website, providing social platform for the hearing impaired community to use for their own uses to expand the awareness of hearing impaired community in Northern Ireland in particular.

  Main features of project

  ·         Library of images and videos for alphabet, words and common phrases in British Sign Language

·         Google Maps features with location and customised details of the support groups and organisation in Northern Ireland initially

·         “Fingerspelling” feature will be great additional for those who want to learn how to spell particular words

·         Possible “Wikipedia” features for the groups and organisation to provide their own content and links to their own website if applicable

Micro-Copy | Macro-copy

This particular area which is discussed in the lecture is regarding the issues of featuring the logo or brand of particular product or having a website where you want the users to focus on. It use dependence of colours, size of the brand or buttons, smallest details can make the biggest difference on making your project a success.

This is what really matter for is guiding your users to particular content and assuring them that everything is fine by visual clues, for example the log in page for website would have just single feature of form with login and password textbox for user to input then simple button to click to log in. That is how it works, make them think on instinct of natural users rather actually telling them what to do, where to log in etc.

[ckeeley-blog]

Week 8 | #build

This week, there are no lecture due to lecturer being heavily involved in build conference and wish I could go but for all two thing that prevent me, being poor (yes I spend all my loan at this point already) and being profound hearing impaired meaning I could only understand in one to one communication in live reading so sitting back in distance wouldn’t help along with all the accents of designers coming from all over the world. I am sure for those who going had great craic.

Sadly I have to admit I decide to take this week as opportunity to work on my other two modules regarding the deadline being on 10th December, figuring finish both of those coursework in FETM and COM533 earlier would provide me with more time to spend on DES511 works.

Sorry for no content this week related to my MP or DES511 work!

[ckeeley-blog]

Week 7 | #ninetofive

Sadly this week I missed the lecture, but from reading on their site on summary of the week, which is discussion of working as designer in world, looking for work, not getting the contract or job, presenting your design, prototyping etc.

Prospect as Freelancer

I have to be honest here with my profound hearing impairment since birth which limited my ability to communicate well and clear with other people, potentially clients. Sure I have the technology to help me such as digital hearing aids which I am wearing on both ears, I can use email, text chat system like Skype for example, but some clients do have their preferences of trusting the designers mainly over the telephone which is where I stop sadly.

It is hard to choose a career where communication is very important in understanding what your client want from their project, how to work in team if I am, trying to establish form of communication to make sure I work as intend and deliver what team want from me.

Presentation of Design

Another weakness of why I haven’t done any freelance work is one factor of being lazy as student which is very poor of me but another is not wanting to show any of work I have done in past, particular in placement in Foundation degree because I have shocking secret to reveal…I use table to structure the website, that was before I have seen the light of div in IMD.

So right now when I look at those in current browsers given the fact the only browser I could test at the placement was on IE6 *shudder* so I was extremely limited with no option to get techs to allow me to test on latest browser with open standard because I was doing placement in Business centre of the Southern Regional College in Newry, same place where I did my foundation degree.

Now beware as I will show screenshot of my websites I done in placement in latest Firefox of how badly it performed outside of IE6 browser which you can see below:

Figure 1 - SureStart South Armagh Website in Firefox browser view - redundant

Figure 2 - REC website shown in Firefox browser - This is 3 years old website - redundant now

Now I came quite some way in improvement of designing and coding with better techniques knowledge of design process of creating website. Those two websites are the main reason why I am afraid and not showing any work in portfolio of my website because simply there isn’t any work I have done to be proud to show off and admit how professional I am about my work.

So I have to start somewhere, taking on works if I can and will do if time permit me, and build up my career with creativity designs and clever uses of coding to pull off result of simple and clean visual result in my work.

Prototyping

Lot of people do struggle in this area of not having defined rules to follow because they would tend to experiment in variety of form of designs in random order hoping to get an idea to work on rather doing research beforehand to get ideas to work on and improve the design and fix the design toward purpose of the project.

I will show the prototyping process in section below regarding of creating the logo for “NIDia” project, so wish me luck and see how it goes!

Design process of “Northern Ireland Deafcyclopedia”

I will show series of images I created in my sketch book of experiment with logo design, taking on ideas I got from particular the international brand of logos specific for the deaf:

Figure 4 - Atlernative of Colour showing creativity warm colour variety for implemenation of Logo in website form.

The image above is workable tag for the browser but the issue is the bar having to extend but I like of having simple and clean with the logo being possibly too thin but seem professional enough, it remind of book tags.

[ckeeley-blog]

Week 6 | #masters

This week in the lecture, they were discussing about the form of the design of content with references of three designers, discussing about grid systems and how they have uses in this day regarding on website design.

It is important to emphasis on content placement and usability of the websites because the users attention span is so short (not regarding as being dumb, but more of “must get the content directly rather searching for it thru mountains of content which would take more time).

I have to admit I didn’t and haven’t use any form of grid system but rather using fixed template of resolution which in my case of 800x600 because it would work from bottom to top in term of expanding resolution of users screen.

Grid System

I have to look into grid systems which I do have bookmarks thru links provided by other students in my course, but never seem to read or study them and learn to implement for the better which as in designer is must have, so I have to admit at fault of being lazy here regarding the usage of grid system.

I will pick an example of grid system which is provided by one of student as focus of study, http://cssgrid.net/ which has reactive grid system going from mobile resolution to 1140px width and more.

That is very good method of adapting to the users environment rather forcing the users to adapt to us which is poor design ethical to have, so I will experiment into it with knowledge of how grid system work in this topic.

Figure 1 - CSSGrid Homepage - http://cssgrid.net/

First I download the zip file of the grid, which contains index.html to showcase the default page with 3 columns as standard with css folder containing variety of resolution depending on the users screen. You will see series of screenshot below with description below:

Figure 2 - Default Folder with index.html and CSS folder

Figure 3 - CSS folder with all CSS files adapting to user screen resolution

Figure 4 - Index.html viewed in Firefox browser

Figure 5 - Source code of index.html reveal in "View Source" function in Firefox Browser

Figure 6 - Close-up of CSS codes linked from HTML document in head section of index.html

It is pretty simple to use, the default page is already set, you can modify the page with addition of content and uses of style css page to design your website and allow the pre-set grid system to take over to adapt to users resolution of the screen, rather being force to fix designer fixed resolution in my case.

Master Designers

In this section we going to look and discuss about three designers that are highlight in the lecture which I have to admit does share some of my design view point in designing and placement of the content on the web page.

Lot of people tend to make mistake of designing website with their layout of logo, buttons and what not and just “dump” the content into the website without realising the content of website is what define the website itself.

Imagine searching up on Google, then you click on link to view some information you seek, but it doesn’t help that the content is all over the place does it? Flow of the content is important, you don’t want to have small font with silly “comic san” which people will not take the website seriously. Imagine Wikipedia with all content in that font I mention? The horror and immense pain it would inflict on the users.

Not just the font make the different but how you present the content in paragraph, columns etc. I tend to use justify alignment on my text but after seeing the difference in readable of the content from left alignment to justify, it would be much easier for users to read in left alignment because it is not stretch out awkward to match the length of paragraph.

Jan Tschicold

This designer was a typographer working in 1920/1930’s in era that is defined in “Birth of Modernism” who use rigid grid system before moving to more of proportional grid system in awkward manner at the time, achieving great visual effect.

This quote directly from website which I found on search for Jan Tschicold which would explain in more detail about him

“In the early 1920s to the mid-1930s, a new movement took place in central Europe. This movement brought graphic design to a whole new level of design, expectations, and aesthetics. This movement was known as the New Typography Movement. This movement broke free from all the traditional rules pf graphic design and good design. It broke free from symmetry and equality. At first, this movement was so ahead of its time, that many could not accept the change in design. Artists used typography with photo montage, and collaborating new elements that was never used before. Jan Tschicold was one of the many great artists who initiated this movement. A new type of graphic design was invented, and the whole world wanted to take part in this kind of design.”

Blog [ONLINE] Available at: http://a.parsons.edu/~seoj810/blog/?p=131. [Accessed 28 October 2010].

Figure 7 - Jan Tschicold Poster/Book Cover "Sabon"

In the image above, which I love the visual impact was how sharp the contrast between red and white, especially with tone of red just not being dark but strong enough to create sharp contrast, then defining the content to work within the angle of the box being slanted in such manner.

Another feature I love is the indent of the circle with white font with repeated words of “Sabon” which is his book, is brilliant way of creating focus of attention but not making the word stick out of pack as title of book tend to do with enlarged size of font.

Another factor was the content following the angle of the box and outside of the box following all the way down in straight line of where the content starting. Normally you would have big title in front with creative design of icon or logo but he seem to divide it but keep it big but quiet which is “going outside the box”. Normally you would have summary in back of book or in first page inside the book but it is right outside which is quite clever technique.

This example of his work is why of trying to experiment and design, no matter how chaotic it may seem at fault but there is an order in the design which is why it is executed so well and still so simple and effective today.

Josef Müller-Brockmann

“Josef Müller-Brockmann, (May 9, 1914, in Rapperswil – August 30, 1996), was a Swiss graphic designer and teacher. He studied architecture, design and history of art at both the University and Kunstgewerbeschule in Zurich. In 1936 he opened his Zurich studio specialising in graphic design, exhibition design and photography. Müller-Brockman was author of the 1961 publications The Graphic Artist and his Design Problems, Grid Systems in Graphic Design where he advocates use of the grid for page structure, and the 1971 publications History of the Poster and A History of Visual Communication.

He is recognised for his simple designs and his clean use of typography, notably Akzidenz-Grotesk, shapes and colours which inspires many graphic designers in the 21st century.”

Josef Müller-Brockmann - Wikipedia, the free encyclopaedia. 2011. Josef Müller-Brockmann - Wikipedia, the free encyclopaedia. [ONLINE] Available at: http://en.wikipedia.org/wiki/Josef_M%C3%BCller-Brockmann. [Accessed 28 October 2010].

I am sorry for such lack quote from Wikipedia but it explain on why the choice of choosing him because he advocate the use of grid system of keeping it clean and simple in typographic design which is also can be translate in current days of website designs, mainly inspiring graphic designers.

Figure 8 - Brockmann "1967" Poster

Vertical Rhythm. 2010. Vertical Rhythm. [ONLINE] Available at: http://verticalrhythm.org/. [Accessed 28 October 2010].

As you can see above, it is simple two outline shape of triangle and square together, with triangle on top, but the placement of content in 3 columns on bottom left hand side with equal spacing with “1967” following the line of third column which is quite effective approach of placement of title and content.

I know I do admit emphasis on keeping the design simple and clean but I would regard this design more of minimise for me because there is vast white space with very little content standing out except the title “1967” which I guess done the job very well.

Another detail is the writing on bottom right hand side which I can’t make out but definitely notice the line-up following the triangle line to edge of poster which is very clever in term of detail of placing copyright or title itself.