Christopher Keeley DES511

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.

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.

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.

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 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.

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.

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.

The Randomiser

This week was the crit week which mean the lecturer would use their own coded randomiser to access all student website in any random order and thankful, my own website or blog was not review because I wouldn’t get any feedback directly from lecturer as he would discuss indirectly into audience so I could miss out critical feedback about my design.

It did show the variety of designs from other students which did inspired some of ideas I had on personal website before I changed to tumblr site but noticed there still work for most student to work on, so glad to know that not everyone is “godlike” in designing/developing their personal site.

Research of brand design

This week I want to start the project of MPP with groundwork of creating the brand itself and construct the website in similar manner of colours and style of the brand with three key words in my design process – Simple, Clean and Effective.

First step would be creating a name for this project, initial name that is “Northern Ireland Deaf Community” sound so formal and this project is being created by me rather any actual organisation so need something more informal but professional in standard. So you can see list of names I came up below:

"Northern Ireland Deaf Community"

"Deaf encyclopaedia"

"Deafcyclopedia"

"British Sign Language encyclopaedia"

"Northern Ireland Deaf Map"

"Northern Ireland Deaf encyclopaedia"

"Northern Ireland Deafcyclopedia"

As you can noticed above, it is kindly hard to get away from need to state the specific nature of this project because it is localised in Northern Ireland and there is variety of  similar projects around the world so it is important to focus on mention Northern Ireland

However I came up with final decision on this name of “Northern Ireland Deafcyclopedia” because it does seem to work in way of finding out similar way of library of information like “Wikipedia” or “encyclopaedia” which is parody site of Wikipedia itself so it work on wordplay of the “encyclopaedia”

Logo Research

I want to look into similar designs of brand/logo of similar mind project/websites that are live, so I look into two separate area of search range – United Kingdom based and International based to explore the design potential to add into my project logo design.

I have create two wallpaper with variety of logo/brands from separate sources which you can see below with contrasting difference which I would prefer more creativity and open design of international projects, particular in Australia based projects/websites.

 Figure 1 - United Kingdom based brand for Deaf based project/websites

 Figure 2 - International Based Deaf branding and Logos

I notice the tendency of using hand sign which is part of sign language communities which is great significant way of imprinting of the design logo of project/website if it is about learning sign language or hearing impairment topic.

Another factor was creativity uses of colours to lighten up the designs on international in comparison to United Kingdom based brand/logo which is  tradional, cold designs in current trend of the design, so it is important to use creativity iconographic alongside with typographical in design of the logo/brand.

Potential of Project Brand

Design process

This week in the lecture, we had explanation of design process where everyone had particular design process which sometimes not the best method of starting the project because some would jump straight into Photoshop and illustrator without even doing sketches or mind map of the project itself.

I do agree with the principle of the design process where I normally do sketches of designs, constantly pushing ideas around as they come into my head on the paper, but one of my main weakness is not doing mindmap or brainstorming process.

Brainstorm/Mindmap

I am doing brainstorm process where I would input into spider chart diagram highlight mains area with relatives of ideas for each main area which you can see example of one below:

Figure 1 - Mindmap template

For this major project, I am doing Northern Ireland Deaf youth association so I could have start on paper then covert into electronic diagram design because I don’t have scanner so I would input the result of the mindmap process from my sketch book into diagram which you can see the result below in Figure 2 with free online mindmap service from http://www.mindmeister.com/.

Figure 2 - Mindmap of "Northern Ireland Deaf Community"

With simple mindmap laying out the rough ideas of where my ideas of features and designs which you can see above, it need more information with research into designs of the brand, features of website need further knowledge to understand the tasks ahead.

Design of the brand

This is generally where majority of my ideas I have in my head are mainly designs of logo and shaping the brand of the major project. I normally create up to three or four A4 amounts of rough sketches with pens on my canvas sketch book A4 or A5 size which some are rubbish, some are good and rest are brilliant in madness itself.

Experimentation of the process can inspire such great results for me which I can explain in my inspiration for monogram which I have created in year 2 for the DES module which I still love and will display the examples of sketches I do that somehow result into “Pacman” result of initial of my name “Christopher Keeley” into result below:

Figure 3 - Iconic "Pacman"

Figure 4 - Personal Logo of Initial of my name of Christopher Keeley into shape of "CK"

The random sketches results are produce with scans result which can explain difference in brightness of some of work below which is patchwork of several papers because I basically sketch on anything if I had idea to design particular logo because I didn’t want to lose it in case it can lead to great design in end of the process.

Figure 5 - Series of Sketch design producing variety of results in random order

Major Project Choice

  I have decide on “Northern Ireland Deaf Community” idea because I did had initial Criticism about lack of research into checking for similar website which had same purpose I had for my website so I would need to carry out research on that area.

Also there was concern about lack of content so I am hoping with providing enough features which wouldbe add later with continuity developments of ideas in brainstorming /mindmapping.

Competition

BritishSignLanguage.com

First website I found on search engine of Google was BritishSignLanguage.com which I have to admit it is quite basic site with lack of designs creativity but it does carry out same features with all letter of the alphabet, single word up to number of 500 with specific search into each area relate to weather, colours, sports etc.

  Figure 1 - British Sign Language Wesbite - http://www.britishsignlanguage.com/

However it does not show links to supports group, only contact for the British sign language and provide message board which is not part of my features for this idea and it is very basic design as well, crude to say at best.

“This version of our CD has been produced following input from our customers and teaching professionals and offers over 1500 words, 40 useful phrases and an interactive quiz that covers 13 topics, including 'pot luck' to test your ability to receive sign.”

“The number of words on this website is less than one third of those available on our CD, which, we consider, offers the best value for content.”

BritishSignLanguage.com; An Online Guide to British Sign Language. 2010. BritishSignLanguage.com; An Online Guide to British Sign Language. [ONLINE] Available at: http://www.britishsignlanguage.com/. [Accessed 8 October 2010].

Also this website seem to show examples in third of the numbers they have in the CD so it seem to be more of selling website rather being library of free information which is opposite of what I want in my ideal project. I feel it is still usage and better to use this idea with further research of the competition permitting.

I found more of similar websites like BritishSignLanguage.com which is selling packs with CD and books about Sign language with no links regarding Northern Ireland so I try to continue search for different website with association for BSL and the hearing impaired disability.

British Deaf Association

This website provide basic alphabet images with clips of sign language for extra visual communication features for the those who are visiting the website which is good feature to add for each particular section of the website providing text and video communication for more accessibility which I seek in this project.

  Figure 2 - British Deaf Association | Home Page - http://www.bda.org.uk/index.php

As you can see image above which is bit cluttered with all the advertisement on right hand side with the video and expanding massive text in centre which did not help with the usability factor of this website.

Figure 3 - British Deaf Association | Area Deaf Association Page - http://www.bda.org.uk/Area_Deaf_Associations-i-22.html

Another thing I found so glaring was lack of links for the support in Northern Ireland Deaf with link which is broken/unlinked at all which is disappointing but prove the point that my idea is viable for the Northern Ireland Deaf Community.

Summary of Competition

I think it is best to continue the development of the idea consider the poor quality and the difference of features and purposes of the websites which provide lack of focus for the Northern Ireland Deaf Community. I believe the idea is justified for major project proposal which I will hopeful achieve the completion of this major project in semester two.

Why not HTML5?

I am aiming to keep the design in Major Project simple and clean with HTML and CSS because of the approach I took up in second year with aids of the DES modules which I greatly enjoy and also with additional of the “HTML and CSS Web Standards Solutions: A Web Standardistas' Approach“ which is written by our lecturers.

I don’t want to do HTML5 while it could provide good research and experiment platform, it wouldn’t be suit to my ethic in design of keeping open standard which HTML 5 is still in development phase with some of the features only available in latest versions of browsers such as Safari, Firefox etc.

You can see the research I have carry out on compability of the browser with HTML5 with image below in which is taken from http://test.w3.org/html/tests/reporting/report.htm which is carry out constant test on improving compability of all browser to improve open standard of HTML5 which is their main objective since their creation of HTML5 project.

Figure 4 – WC3 HTML5 Browsers complaint test results - http://test.w3.org/html/tests/reporting/report.htm

  However those are still subject to changes as you would click on the link above as the test result are constantly changing with new features and changes add onto latest browsers version in release and beta versions.

I would like to sum up the quote which would explain clearly above what I thought of HTML5 in current stage of the WC3 HTML5 project.

“HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. It aims to reduce the need for proprietary plug-in-based rich internet application (RIA) technologies such as Adobe Flash and Microsoft Silverlight. In common usage, HTML5 may also refer to the additional use of CSS3, as both technologies are under development in parallel.”

HTML5 - Wikipedia, the free encyclopedia. 2010. HTML5 - Wikipedia, the free encyclopedia. [ONLINE] Available at: http://en.wikipedia.org/wiki/HTML5. [Accessed 8 October 2010].

So you can see why the need of open standard of not depending on users needing to have certain external modules of software to access certain content which would defeat the purpose of open standard we are seeking in HTML5 itself.

Google Map API

This week, I had good timing with link through twitter from Rebekah

Northey which direct me to this site which require use of JavaScript which is ideal for me to use for my Google Map API usage on this major project idea which you can check the link http://stiern.com/tutorials/adding-custom-google-maps-to-your-website#coordinates with provided image of website below as well.

  Figure 5 - Stiern.com Google Map API v3 Tutorial - http://stiern.com/tutorials/adding-custom-google-maps-to-your-website#coordinates

This is big help as I did try to look thru several search of Google which prompt up results of results of limited blogs not providing enough information on which browsers is best or it only works on HTML5 etc.

I think the feature of custom design bubble of information of clicking on the marker will provide great help of linking supports group and organisation with custom marking because not all of actual address is accurate with some are being miles off target which is great as well.

Reference

BritishSignLanguage.com; An Online Guide to British Sign Language. 2010. BritishSignLanguage.com; An Online Guide to British Sign Language. [ONLINE] Available at: http://www.britishsignlanguage.com/. [Accessed 8 October 2010].

HTML5 compatible web browsers | Oluniyi D. Ajao. 2010. HTML5 compatible web browsers | Oluniyi D. Ajao. [ONLINE] Available at: http://www.davidajao.com/blog/2010/06/05/html5-meet-the-most-progressive-web-browser/. [Accessed 8 October 2010].

The HTML5 test - How well does your browser support HTML5?. 2010. The HTML5 test - How well does your browser support HTML5?. [ONLINE] Available at: http://html5test.com/. [Accessed 8 October 2010

When can I use... Support tables for HTML5, CSS3, etc. 2010. When can I use... Support tables for HTML5, CSS3, etc. [ONLINE] Available at: http://caniuse.com/. [Accessed 8 October 2010

html5.org — HTML revisited. 2010. html5.org — HTML revisited. [ONLINE] Available at: http://html5.org/. [Accessed 8 October 2010].

HTML5 Conformance Test Results. 2010. HTML5 Conformance Test Results. [ONLINE] Available at: http://test.w3.org/html/tests/reporting/report.htm. [Accessed 8 October 2010].

Biography

Last week we were told by the lecturers to create biography as part of process onto our major project proposal, and as I have to admit, but with the lecture this week, where they were expecting us to have good idea and work on it, which help to bring this major proposal into perspective for me.

I had several ideas which I will explain below with developments of the ideas; I was working on topic of the community so I focus on what I can do within my ability and decide to work on ideas below.

Development of Ideas

My first idea was creating nightlife community website allowing the owners of bars and nightclub to create their own style of pages with uses of Facebook access of retaining their information of followers and photos onto website with their own control of content showcasing future events. However this website would be focusing on my hometown – Newry, this idea came around after in my usual waterhole have their own Facebook page with increasing numbers of followers so I would figure it could be good if we can combine all the bars and nightclubs into single local area for website to focus on rather dealing with massive global lists of bars/nightclubs sharing similar names etc.

Another idea is the focus about my disability which I will explain a short story about what happen to me in summer, I was pressured by my family to try contacting deaf community group because I am from Newry and there seem to be lack of one so I try the Northern Ireland Deaf Youth Association. After initial contacts and meeting, I have got more involved but couldn’t help noticing lack of focus on websites, especially multimedia which they seem contacting via paper route, posters and pictures with newspapers rather showing on web. I figure if I could try to create deaf community website to unify all community across Northern Ireland to help expand the awareness of the deaf community for those who spend most of their life in mainstream education like I did.

There was another idea in same focus on my disability which I have to admit my embarrassment about the fact spending my life in mainstream education depending on lip-reading and hearing aids with no knowledge whatsoever at age of 23 right now. I thought it would be great idea to create library of information on website showing the British sign language in alphabet and words in form of uniform images and short movies clips, only issue that would prevent me is the help from the deaf community to create this to expand the knowledge and help others to learn British sign language.

Markdown version of full "Biography"

Christopher Keeley ================== Biography --------- Christopher is aspiring web designer who was profound deaf in both ear since birth and wear two digital hearing, spending his life in mainstream education before joining foundation degree in Interactive Multimedia Design In Southern Regional College. He is what you consider late starter in web designer career. Major Project Proposals ----------------------- ###Newry Nightlife I do have to admit that I enjoy nightlife with my friends back in my hometown in Newry which situated between Belfast and Dublin. I realised this idea after seeing more and more of nightclubs registering themself in Facebook and allow more interaction between the customers and the nightclubs/bars. This is where I could have options of exporting details from facebook of staffs/owners into their own webpages with possible CMS to upload images and fetails with updates extracted from twitter and facebook. I came to realised the possibility of this idea over the summer noticing the increasing numbers of apps exporting information into seperate websites/webpage or sections within facebook. I feel it could allow more of individualise the Nightclubs into specific local website with options to customise the designs to their own choosing. This would be test of how far I could expand my ability this year to master other level of coding like Javascripts/PHP/MySQl and other tools that would be required. ####Pros *Expanding my knowledge of other coding tools *Allowing the nightclubs and bars to stand on their own with rapidly expanding influence of internet *Possible expansion of websites to affect onto other local towns and cities. ####Cons *Could be too much to take on in my limited knowledge of tools outside of HTML/CSS *Could possible not work at all without further reseach to confirm if deadend or not for me. ###Northern Ireland Deaf Community As I did mention about the fact that I am profound deaf in both ear since birth, I grew up in Mainstream education with non-existant contact with people with similar disability as I do and I notice there seem to be lack of specific focus on trying to unite all ages of deaf community so I could attempt to create website that could do. ####Pros *Allowing to unite the deaf community of all ages across Northern Ireland.

*Provide social platform to communicate with similar disability people to social more in their own natural enviroment and communication. ####Cons *Could be too big to handle with requirement of knowledge of PHP and MySQL to cram into single semester ###Northern Ireland Deaf Learning Center I feel this idea have best potential for me to achieve compare to two other idea and could be completed because it would require HTML/CSS to build the website with libaray of images and movies clip of how to sign language. I am currently trying to learn british sign language at the moment so it would be good to learn in both area at same time.

I would also add the interactive of google maps to pinpoint all the location of deaf supports building with links to their websites if possible alongside possible further additional if required.

####Pros *Provide good learning site with large information of british sign language in images and movies format.

*Uses of Google map with modfication to create points of interest for those who seek out deaf supports groups and social group to join in.

*Can be complete within the timeline of Second Semester

####Cons *Could be too small to qualify as Major Project Proposal

*Need assistance of people who have good knowledge of british sign language to create images and movies

*Challenge of Google Map API to create points of interest on Google Map

Five Inspiring Websites ----------------------- ###Simplebits I have become follower of Dan Cederholm philosophy of keeping the design simple after in second year of interactive multimedia design where we had to choose a designer for choice of study on their design knowledge/skills for example and see how they would or could reflect on ourself. Dan Cederholm was the one that does reflect my opinion on web design of keeping it simple as possible without overcomplicating or restraining myself to overcomplicate the design.

Figure 1 - Simplebits Website - http://simplebits.com/

###Google I have to admit it could too easy as choice but it is quite important tool for web designer because you could type any particular design or technique to look up and learn from or look for solution to problems. It saved lot of times and money compare to old days of going to libaray or book store to get specific book that may or not solved your issues. Google is key to libaray of information for the web designers like me.

Figure 2 - Google Website - http://www.google.com/

###Colours Lovers This website is quite effective for me because i could depend on variety of designers choice of colours with array of colours that we can compare in contrast/balance of the colours or finding specific tone of colour that you feel is right for your design. Sure you could try with photoshop colour libaray or swatches and tuning the RGB valve but colour lovers is good libaray system for colours for your designs.

Figure 3 - ColourLovers Website - http://www.colourlovers.com/

###Smashing Magazine I have to admit that one of main designer - Jason Santa Maria isnt one of my choice in second year but from initial look of his website and over the time I gradually start to look to it for point of reference for design trend that I could use for inspiration for new designs or changing current design to new trend to allow people enjoying more out of my website designs.

Figure 4 - Smashing Magazine Website - http://www.smashingmagazine.com/

###Safari Books Online Very cost-effective and can be access anywhere with internet access - it does carry lot of resources that is very essential for designers like me so I would consider this as must have rather inspiritional website for me.

Introduction Lecture

This week we had introduction lecture which this module decide to throw us into deep end and begin the work on major project, they did tell us that the major work project start now rather in January because we need to plan ahead and carry out research and design rather doing on the spot and leaving very little time to implement depending on scale of work which is reasonable.

I had several ideas which I could work on for my major projects as I was already starting to think about in summer to try to gather ideas and create viable projects out of them. The issue was there isn’t that many because I wasn’t sure how big it had to be which they did clear up in the introduction lecture that we don’t want huge project, just try to create professional standard design website with a purpose.

We have to create 50 words biography about myself in person and as a designer for biography and project ideas we have to submit for next week. I can give you my personal biography in 50 words below: