Our first week we had met with our client for our new project for des311, our client came and carried out a quick presentation what they wanted us to do for them, our client was Countryside Northern Ireland which where a charity that protected the countryside. We had to design a brand and a new website for them from scratch so we had to think of colour schemes, layouts, logos, they wanted to make sure there logo was attractive.
Week one started with the task of sorting our class into groups of four for the project, This will allow the four people work on different parts of the project at the same time which will allow more work to be done and get the work done on time. Working as a team will we have to share files to one location so that each member of the group will be able to access all the work and update regularly so I will research into different tools that would help us do this. Also as a group we will need to meet up and contact each other on a daily basis so that work can be assigned and completed and also get decisions made as a group not just one person. I am going to look at different sharing softwares that would allow us to all access work on one location. The first that comes to mind is drop box.
Dropbox is everyones favorite cloud file storing and sharing app. It is really useful and well known because it syncs your files online and across your computers automatically. Dropbox also integrates seamlessly with different Operating Systems. As a designer, we are always in need to share our work such as: PSD, mock-ups with clients, co-workers, teams. With dropbox, it is really easy to share anything with anybody because of the way it works. You just simple copy whatever file you want to share to your public folder and send the link anyone. Moreover, they do not even have to be a Dropbox user. There is no going on the web, logging on every time you want to share a file. Dropbox also allows you to share a whole folder.
Facebook is everyones favourite way of socialising with friends and peers so this will be a useful tool to contact my group and share files with each other Facebook will be a great way to reach one another because Facebook is everywhere on your mobile, computer and app etc. This will be a useful way to communicate with my team to share files.
With Skype, you can share a story, celebrate a birthday, learn a language, hold a meeting, work with colleagues ,just about anything you need to do together every day. You can use Skype on whatever works best for you ,on your phone or computer or a TV with Skype on it. It is free to start using Skype ,to speak, see and instant message other people on Skype for example. You can even try out group video, this will be very usefull for group meetings.
I am going to Research into different charities to give me a better insight into charities such as the countryside NI, I am going to use different resources such as the internet, books and newspapers. First I am going to research the charity that I am looking into and what there objectives are.
They aim to build a campaign network of individuals and local groups across Northern Ireland and seek to help them to counter the pressure of over development in our countryside.
There objectives are:
Basically I am going to look at charities that focuses on outdoors such as wildlife, animals, forrests, the amazon etc, So they look at the protection of animals, trees, homes for animals etc. The charity I am going to look at now is WWF which is World Wide Fund for Nature which is a very simular charity to the one I am looking at. What I am basically looking for at what they do to protect nature but I will also be looking for what they have included in there website for example is there any charity funds, memberships, design of logos etc.
Background information on WWF
The World Wide Fund for Nature (WWF) is an international non-governmental organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund, which remains its official name in Canada, United States and the United Kingdom. It is the worlds largest independent conservation organization with over 5 million supporters worldwide, working in more than 100 countries, supporting around 1,300 conservation and environmental projects. WWF is a foundation, in 2010 deriving 57% of funding from individuals and bequests, 17% from government sources (such as the World Bank, DFID, USAID) and 11% from corporations
I first wanted to look at the design of there logo, this logo is one of the most know charity logos in America and the United Kingdom, so then I asked myself why a Panda? then I bega to researched why they had chosen this certain animal. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF. As the only giant panda residing in the Western area at that time, along with its physical features and status as an endangered species, panda is seen to serve the need of a strong recognizable symbol of the organization. Moreover, the organization also needs an animal that would have an impact in black and white printing. The logo was then designed by Sir Peter Scott from the preliminary sketches made by a Scottish naturalist, Gerald Watterson
I had looked at the WWF website I think that the layout is very professional, I did this because I wanted to get an idea what I can do for my client, as you can see that the website has a membership element aswell as you will be able to adopt and care for the animals, there is also an area for donations which I am looking to do for my group website. Overall the layout is very professional and there black and white color scheme is very relevant as it blends in well with there logo. The website relates to there main objective and that is nature and it hasnt used the most obvious colors such as green and browns they went for a more suttle approach and went for grey white and black which I think overall looks very attractive.
Earthwatch is an international environmental charity which is committed to conserving the diversity and integrity of life on earth to meet the needs of current and future generations. They work with a wide range of partners, from individuals who work as conservation volunteers on research teams through to corporate partners, governments and institutions.
The mission of Earthwatch Institute is to engage people worldwide in scientific field research and education in order to promote the understanding and action necessary for a sustainable environment
Earthwatch is another wonderfull nature type charity, they work with alot of companies aound the world, and there main goal is to protect the enviroment. They also have alot of elements that I would like to use in our group website such as making donations to the website, whats different about this charity that you can volunteer yourself to help, which I think is great, as it allows the user to be involved as much as possible, I might contact my client informing them of this as I think that this would be a great feature to have in the website as the more people helping the better!! they aso have a feautre that you are able to part with them, I like this feature because people or companies are able to easily join the charity and help the enviroment. there are many growing awareness that you can join but its costly from 100- 2000 pounds as your able to travel and help. You can get involed as much as you like, by making donations, fundraising, events, research grants , and jobs and internships.
There website is also very professional and striking, they also stayed away from the basic greens as they didnt us as much they used a color scheme of a dark maroon red and black, I think that the color is quite eye catching but not very attractive as I think its too dark and doesnt relate to the main objective much, there logo also very unique as its a couple of shapes as there is a circle shape, an arrow and triangles, the logo is very different so I am going to research behind there logo to see what made them come up with that idea.
Looking over these websites has gave me a better insight of what my client would like me to do for them, basically looking at these websites, i might stay away from the colors green as its too contriverisal and go for something different and not expected. Features That I will need to be included is that the viewers are able to make donations and also be able to become a member. But this is just a few ideas of mines Im going to research into it more.
This week in the lecture we looked at different design processes as we looked into a creative aspect this would entail creative thinking and looking at different ideas. I asked myself what exactly do people mean when they say creative as many people can express creativity in certain ways as its not all about painting, drawing and sculptures, many people like to express there creativity in other ways such as cupcakes as one of my very good friends Melissa Boyle who is also a talented web designer also expresses her creativity and imagination through designing her own homemade unique cupcakes.
Other people have other ways of expressing themselves such as dancing, cooking, football, building cars, even putting on makeup etc. Being creative is a skill that you can gain, its also what you have inside of you its was makes it you. However you can work on it by practising and using your skills. I once watched a youtube video of a guy expressing his designs using a range of colourful sticky notes.Click here to watch I thought that this video was amazing!! it shows that he has determination and patience to show his expressions.
There are many ways of thinking and coming up with ideas, the previous lecture we were introduced to mind maps and mood boards as connan wanted us to come up with ideas for the logo for countrysideNI This lead me to brainstorm with my group for ideas for our logo, brainstorming would help us generate ideas of one another to come up with one amazing idea and refine it to make an aweesommeee idea. Although I had brainstormed myself and pickled through my own brain to come up with ideas and then do it as a group so that I can really think of what we want to do. Another method of thinking and creating ideas was mind maps. Mind mapping was developed by Tony Buzan and this method is creating a diagram to represent words, ideas and tasks. These are usually arranged around one word which was Countryside Northern Ireland so we had to think ideas that would revolve around this word for example trees, farmers , landscape etc.
The final method I want to discuss is mood boards. Mood Boards can be used on there own as a visualisation or can be paired with the mind map to show the visual aspects. A mood board consists of a collage of photographs, sketches, clippings etc. A mood board can be drawn out or done on a computer, I had created my own individual mood board to show a collage of my own creative sketches on illustrator and put them together as a whole product. I wanted to be a bit different for my moodboard as i created a type of animation showing what I think represent the countryside and I had illustrated them using bold colours as its cartoon like.
As a group we all collaborated together with our mood boards and made one group mood board which helped us with an idea for our logo.
Also This week I am going to research different companies that specialize in brand design. The point in this I need to research logos and designs to get ideas for my own group logo.
Theories of creativity (in particular investigating why some people are more creative than others) have focused on a variety of aspects. The most dominant are usually identified as the four Ps - process, product, person and place. A focus on process is shown in cognitive approaches that try to describe thought mechanisms and techniques for creative thinking. Theories invoking divergent rather than convergent thinking (such as Guilford), or those describing the staging of the creative process (such as Wallas) are primarily theories of creative process. A focus on creative product usually appears in attempts to measure creativity in people (psychometrics, see below), or in creative ideas framed as successful memes. A focus on the nature of the creative person considers more general intellectual habits, such as openness, levels of ideation, autonomy, expertise, exploratory behaviour and so on. A focus on place considers the best circumstances in which creativity flourishes, including degrees of autonomy, access to resources and the nature of gatekeepers.
Man V Machine
Man V machine has created very well know logos for many Televisions channels such as - more 4, Channel 5, Syfy Channel and nickelodeon. There techniques and illustrations are very vibrant and bold, they like to use a lot of bold block colors. Below are only some of the projects they have done.
The logo I am going to look at is the more four logo
Digital channel More4 launched a new identity created by ManvsMachine and Channel 4s in-house agency, 4Creative. The graphic device is also carried across a range of idents featuring installations made up of 400 mechanical flippers...
After winning a competitive pitch, Channel 4 commissioned ManvsMachine to create a new brand identity and on-air look for More4. The package aligns with a re-focussed range of content on the channel. The re-brand is centred round a bold, flexible logo that morphs through a series of flips, folds and reveals. The colour palette reflects the vibrant nature of interiors, food culture, fashion and other contemporary lifestyle programming. Live-action idents see the brand break out into the real world in the form of mechanical flippers. The installations inhabit environments from a domestic staircase to an abandoned fishing boat in Dungeness. To achieve this ManvsMachine teamed up with installation design pioneers, Jason Bruges Studio, to help design and build a flexible system consisting of over 400 individual flipper units.
The redesign replaces the inaugural identity created by Spin for the channels launch in 2005 and will be used in idents and across marketing material. Spins design employed a graphic number "4" housing the word MORE and (to my mind at least) resembled a stylised hand with one finger pressing a remote control. "The original branding of More4 was very bold and uncompromising," says Chris Wood, 4Creatives head of on-air promotions for More4. "The colourways and graphic look gave the channel a unique grown up look that worked perfectly with the original content and ambitions. However, over the years the content of the channel has shifted and with the plans to launch the upcoming scrapbook service, it was felt it was time to redress the gap between the channel branding and channel content."
ManvsMachines new identity moves away from the minimal approach of the previous design and incorporates 15 differently coloured triangular shapes, which also animate, again making up the numeral with the text similarly placed. "We still wanted to create an identity that had a singular strong design feel, but one that had more flexibility and a lot more warmth and tactility," adds Wood. "In addition, in the back of your mind you have to ensure any new look can sit comfortably and hold its own along side the other Channel 4 brands."
I really like it. The design is rather funky and lends itself to all sorts of animation and video editing for example the E4 estings animations. It does look a little arty, but theyre the sort of programmes More 4 generally show; Grand Designs, Location Location Location, Time Team etc..
Spin was founded by Tony Brook and Patricia Finegan in 1992. Patricia Finegan - Managing Director: Patricia moved to London from Dublin in 1983, studied for a degree in Design Management at the University of the Arts, graduating in 1988. Tony Brook - Creative Director: Born in Halifax, West Yorkshire, Tony studied at Percival Whitley College of Further Education and then at Somerset College of Arts and Technology in Taunton. Tony lectures nationally and internationally and is currently an external examiner for the MA Brand Identity course at the London College of Communications. Tony is guest curator of ‘Wim Crouwel - A graphic odyssey’ a major retrospective of the Dutch master’s work currently on show at the Design Museum in London. He was admitted to the Alliance Graphique Internationale in 2006 and is the current president of the UK chapter. In 2009 Tony and Patricia set up Unit Editions, a publishing company with the designer, historian and author Adrian Shaughnessy. Spin has received national and international recognition winning awards in print, television and cinema graphics, digital design, poster design and typography. Exhibitions featuring Spin’s work include: ‘The Brit Insurance Designs of the year’ exhibition at the Design Museum, ‘Communicate’, an exhibition of British independent graphics since the 1960s, ‘Great Expectations’, a Design Council exhibition on contemporary British design, and ‘Stealing Eyeballs’, a group show at the Künstlerhaus in Vienna.
They make thoughtful and apposite responses to the needs of there clients. There work is designed to function across all applications – digital, analogue and environmental. there creations are always bespoke and often involve specifically developed typefaces and marques. A growing proportion of there work is made for the screen – websites, broadcast sequences and films. Yet in many respects, Spin is a traditional design studio. They value intelligent creative thinking and demand high levels of craft and finishing, and they always meet deadlines. In counterpoint to these traditional virtues, there collaborative process promotes experimentation. They see it as a fundamental requirement that they push beyond the boundaries of the commissions they receive to make impactful and effective outcomes and add measurable value. There clients come from many different sectors. They range from the global to the local. Similarly, the projects they undertake are diverse, and range from the small to the monumental. There studio culture is vibrant and we actively involve ourselves in promoting graphic design and raising awareness about the subject through lectures and the books they publish through Unit Editions, a publishing company we set up in 2008. Spin founder and Creative Director Tony Brook is a member of AGI – a professional body comprising the worlds leading graphic designers. Spin has won numerous awards nationally and internationally, though our primary focus is always on ensuring the successful outcome of the individual commissions we undertake, not on adding trophies to our shelves.
Spin was also the creative company that helped create the first design of the more four logo. Commissioned by Channel 4 broadcasting, one of only five terrestrial networks in the UK, More4 forms a major part of the broadcasters portfolio of digital channels alongside E4 and Film 4. Seeking a slightly older demographic than Channel 4, More4 was conceived as its smarter, wittier, older brother. Our graphic approach, with its uncompromising numeral and sock in the eye colour scheme is entirely in tune with the provocative political satire, hard hitting documentaries and fresh independent films that form the backbone of the channels offer. The incredible viewing figures on More4’s opening night make it the most successful launch of any digital channel in the UK and it continues to perform strongly in a very competitive market.
The logo is very creative aswell using shapes to make the number 4 and adding in the logo name, I really like this logo as it was creative. Spin also created the Five logo for the television channel five, Initially there brief was to update the channel’s visual image, but it soon became clear to them that more was required than a wash and brush up, one Channel 5 executive admitted that their many of their viewers were embarrassed to be caught watching their channel. There response, very much in line in line with the channels core values of straight talking was rooted in a clean and structured information delivery supported by a broad, distinct, colour palette. There work with them was the most significant repositioning of a channel we have been involved with. With Spin’s recommendation, all aspects of the channel: name, identity, behaviour and tone of voice changed completely. Freely embracing the channels commitment to populist programming, we enabled them to celebrate light entertainment.
Manual is a design and visual communication studio. There work strives to uncover the intangible essence of a brand and express it through unique visual solutions. Through there process of conceptual design thinking, they help businesses and organizations articulate their unique offering, giving them more value and distinction. While they are passionate about design and continually push themselves and there clients, they like to be collaborative and flexible in there approach. They work with a broad range of clients—from startups to the world’s most revered brands—and maintain a consistently high level of execution and production across print, packaging, and digital media.
Manual creation have had many projects for creating logos, identities, websites, motions, packaging etc. I am going to look at a few of there logos and identities to see what creative aspects they have used.
Slice works with world-renowned industrial designers to create innovative cutting tools for the home and office. Slice engaged them to create a more up-to-date brand mark and flexible system. The identity system needed to be easily applied to multiple packaging forms yet consistently deliver the brand message even in the absence of product and point of purchase materials.
Manual approached the design of the logo and packaging in parallel. We realized there was an opportunity to forge a perfect unity between the logo and the graphic identity as expressed in the packaging. By simply cutting away at the word Slice at an angle, it not only made the logotype more edgy and dynamic, but also allowed them to exploit the angled slice across numerous packaging executions. – The angled slice was further employed as a distinctive graphic element across product brochures, screen printed promotional posters, and trade show exhibition design.
I think that this logo is very clever because its company is knives etc, and the logo represents the brand very well, I like the fact it looks like its been actually sliced, I think this works really well.
PUSH POP PRESS LOGO
Push Pop Press launched in early 2011 to wide acclaim with Al Gores Our Choice digital book. Founded by an ex-Apple user interface designer and engineer, Push Pop Press set off to revolutionized digital books. Their publishing technology allows people to interact with content like never before, using a sophisticated physics-based multi-touch interface. In late 2011, Facebook acquired Push Pop Press.
I really like there logo, is says what it does so it represents the brand very well I like the fact every first letter is the same and that it has a bigger letter p that looks like its been dragged so it really represents its company well.
Bibliotheque are a London based design consultancy. They produce effective and captivating design solutions that are underpinned by conceptual thinking, meticulous attention to detail and innovative production. They produce many designs solutions for Branding and Identity, Print and Communications, Exhibition and Environment, Retail and Packaging and last but not least Posters.
Electrical storm Overview
This is one of the most popular brands that Bibliotheque has created. An initiative sponsored by Shell, using a wind turbine installed on Londons South Bank to promote sustainable energy. The symbol is based on a kinetic abstraction of the wind turbine, which generated all the energy required to power the event. A series of promotional posters was produced, with a range of coloured papers providing maximum impact within a restricted budget.
M.A.D -- Make a Difference
Bibliotheque worked with Gill Hicks MBE, a survivor of the 7th July London Bombings, to create an identity and visual language for her organisation, M.A.D. (Making A Difference) for Peace. M.A.D. exists to communicate the importance of individual responsibility in creating a world in which extreme conflict is ended. The MAD logotype expresses the urgency of the message alongside a playful and illustrative typographic language that reflects Gills creative and passionate approach to building peace.
SEA are an award winning Brand communications agency working across all media. There reputation for innovative and effective design touches all disciplines from Brand Stategy and Positioning, Corporate Identity, Brand Art Direction and Digital Media. There understanding of how brands are created has amassed international clients such as Adidas, Selfridges, Jamie Oliver, EMI, Matthew Williamson, King Sturge, Global Cool and Maitland.
Jamie Oliver logo
I am going to look at some of the logos and identities that Sea has produced. First I am going to look at the global brand for Jamie Oliver and packaging design. Jamie Oliver is one of the nations best-loved chefs, with his ever-growing popularity and expanding business ventures. SEA created the brand and comprehensive guidelines for Jamie Oliver that could maintain consistency and position him globally across publishing, endorsements and packaging.
Gordon Ramsey logo
Gordon Ramsay has become one of the nations most iconic and celebrated chefs. SEA devised the brand identity and strategy, product packaging and art direction for the michelin-starred chef. I like this typography, the font is very bold and round, its spacious, researching these font types will help me look at a certain font for my own brand.
Marque is a branding consultancy with a contemporary view of the world who work collectively across studios. The branding division of Starworks Group, there specialisations are positioning, identity and communications. To these they bring energy, dedication and sensitivity. There most successful work has been for brands who also share there approach. Brands that are driven to be about individual preference, to be entrepreneurial in their outlook and that cherish the crafted qualities within the products they offer.
Begg are recognised as the manufacturer of the finest cashmere accessories in the world. Based in Ayrshire, Scotland, they are renowned in the textile industry for producing a unique cashmere material using a combination of contemporary design coupled with technology, craft and process that dates back many hundreds of years. Unsurprisingly, their clients include other very well known French and Italian Craft Houses.
In recent years however Begg has been faced with an interesting and familiar problem. With the demise of the Multi Fibre trade agreement, countries with a large cheaper labour forces have been handed the potential to dominate the textile industry. In response to this and in order to sustain growth, Begg have devised a strategy to strengthen its own brand. With this in mind, Marque was brought on board to help launch Begg own branded products. The result is a perfect combination of craft and dynamism, evoking the spirit of the brand – the identity evolving into a beautiful array of foil blocks, die stamps and textured paper stocks – the photography and art direction looking at the cashmere as art.
DixonBaxi are an independent creative agency working with some of the worlds most interesting companies across TV, advertising, print, digital and the ways they overlap. there approach is driven by strategic insights, by capturing potential, and by looking for the spark that inspires and engages diverse audiences internationally. What they do is common, how they do it is not. Getting under the skin of a project, challenging the ordinary, our combination of energy and intelligence, the range of our execution and the depth of its effect.
MTV2 RE BRAND
They created a positioning to inspire an irreverent, bold and strongly opinionated tone of voice. Entirely statement driven the new approach fused audience comment with channel opinion. This allowed new ways of communicating and creating dialogue with the audience by using online content to inform screen graphics, the information system and ways to navigate the channel.
The idents became short, ballsy statements that filtered in and out of the music clips. This fluid approach to TV eschewed traditional structures to create a more dynamic way of delivering content.
They created over 300 statements and developed a system that can be updated with content from the MTV2 website. It allowed comments made by viewers to be integrated into the identity keeping the channel fresh, current and relevant.
As part of there initial research and design studies we created a triptych of paintings to reflect the world of the MTV2 audience. Tapping directly into the audience they met them in the real world and on the streets. The resulting found imagery and information formed the basis of the channel strategy.
LAST FM BRAND
Social music site Last.fm allows users to connect with other listeners with similar music tastes, to custom-build their own radio stations.they created an identity and website design to organise and clarify the Last.fm technology making it a more accessible, music driven experience. It aids the user in exploring the site and sharing with other users
A complete identity and design overhaul for terrestrial TV channel Five as part of a Network rebrand. Each component of the channel has been redesigned to create a surprising and seamless Five experience. More vocal, expressive and creative. Five has got its colour back.
The new logotype is at the heart of a completely new network identity, navigation system, visual look and comprehensive on and off air guidelines for both technical and creative applications.
A key part of our strategy was to avoid the typical logo driven idents so they developed Brand Bursts. Fun, eclectic and stimulating they are a reflection of the brand tonally rather than logo devices. Each is a different take on a facet of Five. They will become a rolling process with ongoing commissions making the channel everchanging and always evolving.
They approached some of the best creative teams and production companies in the UK, US and beyond. Over 100 submissions were narrowed to a set of twenty ideas that went into production. Teams as varied as Partizan, Aardman Animations, Buck, Flynn and Rokkit were selected to create bursts.
They are a creatively led multidisciplinary design studio based in London. There goal is to create work that makes there clients and everyone at the studio proud. It’s the reason for there name.
The creation of brand identity systems that dont always require as many applications as full programme. These tend to include brand creation, mini guidelines, stationery and website design and build
GUY AND MAX LOGO
Guy & Max is the product of two brothers’ quest to create a collection of faultless precious metal and diamond jewellery. The brothers have very different yet complimentary skill sets: Max trained as a contemporary furniture designer and uses that knowledge to create unique, creative, yet timeless jewellery; whilst Guy is steeped in the family’s rich heritage in the diamond trade. The brothers approached them with a brief to bring the branding up to luxury brand status. Through discussion they began to draw more analogies with high end fashion brands than with jewellery firms. They created an elegant set of marques and brand attributes that can be engaged for different applications; including a roundel based on Tolkowsky’s ‘Round Brilliant’ and a refracted word marque. We collaborated with Jason Tozer to create some super-macro diamond photography for an online lookbook and series of printed mailers. Other applications include website, packaging, store front and stationery. They wanted to reinforce the unique nature of their brand; in particular the way they design their pieces. Max trained as a furniture designer and thinks about creating jewellery in a very non-traditional way. We researched all sorts of existing jewellery brands and felt like the Guy&Max identity should lean more towards fashion than the more traditional jewellery set. This opened the door to other creative innovations like the collaboration with Jason Tozer. He created sumptuous images that dont show the jewellery at all, but instead reflect Guy&Maxs collective passion for both creativity and diamonds.
FOUR WALLS LOGO
Fourwalls is a modern, flexible and friendly post production company based in Soho. they already had a history of working with the companys two directors across a number of projects when they approached us to create a new identity and website. The brief asked for a clean and contemporary identity and a portfolio style site, supported by a user friendly CMS. theyve employed custom coded java script, using jQuery, to create elegant animations as the site organises projects around a tight grid.
Sonic Editions makes high quality music photography available at affordable prices; working with some of the worlds best photographers and music archives to offer limited edition prints of artists across all musical genres.
The identity wants to feel discerning, sophisticated and slightly upmarket, with executions providing a neutral visual platform for the images. The brand needs to feel equally at home in music and other areas of interest in order that the Editions approach can be extended beyond Sonic, into other areas in the future. The website needs to take into account the white labelling of affiliates.
They wanted to create a monogram that could work as a standalone marque, as well as in a type lock up with Sonic Editions. The rationale for this approach was multi-layered; it responded to the need for sophistication whilst also giving good flexibility for the badging of affiliate relationships. The brand is often seen in partnership with NME, Getty Images or Rough Trade, and the clean monogram style sits comfortably alongside a diverse range of partners
Logo Design Love
Logo Design Love is a website (and a printed book) devoted to the design of logos and brand identities. Launched as a side-project in January 2008, the blog is usually updated once or twice a week with news, features, opinions, etc.
Ollo is currently being soft-launched as a new telecoms brand providing high-speed internet access to emerging markets
The logo is the first to exploit the new multi-touch hardware of smart phones and tablets. Custom software allows for interactive manipulation of the logo to become a creative tool in building the visual language. Playing with the interactive logo allows the designer to create an infinite number of brand-orientated digital assets that can be integrated into the brand.
My own thoughts
well I think its a nice simple little identity, but not a brand, yet. But a brand is something that is built over time and can only truly be shaped by the customer/potential customer perceptions/opinions. The visual element is one small, but vitally important, strand of the brand building exercise. I love the manipulation concept of this logo. Everything is getting more and more interactive these days so this very refreshing to see. A logo you can move and reshape – genius.
DC Entertainment, a Warner Bros. Entertainment company and home to iconic brands DC Comics, Vertigo and MAD, revealed today a new brand identity. The new identity is reflective of the company’s mission to fully realize the value of a rich portfolio of brands, stories and characters, distinguished by incredible breadth and depth across publishing, media and merchandise. A new logo for DC Comics was also introduced, closely aligning with DC Entertainments new mark.
The design of the new DC Entertainment identity uses a peel effect, the D is strategically placed over the C with the upper right-hand portion of the D peeling back to unveil the hidden C symbolizing the duality of the iconic characters that are present within DC Entertainments portfolio.
My own thoughts
I think its very smart, very clever. Feels like DC might be moving away slightly from the comic world and incorporating a more adaptive and grown up feel.Probably due to their increasing amount of film work and merchandising.Overall I Like it.
The new AOL brand identity is a simple, confident logotype, revealed by everchanging images. Its one consistent logo with countless ways to reveal. The new brand identity was fully unveiled on December 10. The new identity is uniquely dynamic. There business is focused on creating world-class experiences for consumers and AOL is centered on creative and talented people employees, partners, and advertisers. We have a clear strategy that we are passionate about and we plan on standing behind the AOL brand as we take the company into the next decade.
Although the AOL logo itself will be constant, the backgrounds will change continuously in an effort to suggest the breadth of AOLs content.
The period in the logo was added to suggest confidence, completeness, said Sam Wilson, managing director at the Wolff Olins New York office, by declaring that AOL is the place to go for the best content online, period. Tim Armstrong said he liked to describe the period as the AOL dot because the dot is the pivot point for what comes after AOL, whether its email, websites or coming offerings that will surprise people.
The constantly changing images behind the logo are also intended to elicit surprise,” said Sam Wilson and Jordan Crane, creative director at Wolff Olins New York. An advertising campaign to promote the new look is being considered, said Maureen Marquess, chief of staff at AOL in New York, as is the role to be played by the AOL brand character, known as the running man.
My own Thoughts
As an identity, its far too ambiguous to even be considered a logo, right? The only seemingly definitive feature is an image which it will reverse out from which seems more a graphic implementation than anything else like reaching the finish line before tying your laces. Sure it may become more identifiable based on the 3 tier heights of the characters a Cap, x-height lowercase and cap height lowercase certainly creates a unique visual rhythm, but Im not so sure about the success of this. I fear another redesign in a couple of years or so.
A mood board is a type of poster design that may consist of images, text, and samples of objects in a composition of the choice of the mood board creator. Designers and others use mood boards to develop their design concepts and to communicate to other members of the design team. Mood boards are often used by graphic designers to enable a person to illustrate visually the direction of style which they are pursuing. However, mood boards can also be used to visually explain a certain style of writing, or an imaginary setting for a storyline. In short, mood boards are not limited to visual subjects, but serve as a visual tool to quickly inform others of the overall 'feel' (or 'flow') that a designer is trying to achieve. Creating mood boards in a digital form may be easier and quicker, but physical objects often tend to have a higher impact on people because of the more complete palette of sensations physical mood boards offer, in contrast with the black & white or colour-prints of a digital mood board.
How do I create one?
The first thing you should do is evaluate the project and pick the mood board style that will work best. There are many different ways to present a mood board. The direction you choose will be based on the time allotted, personal work habits and most importantly your clients personality.
Style 1: Loose Collage
If they are big thinkers who arent obsessed with the details, chances are they will love this part of the process and wont require refined mood boards. A loose collage will work just fine to convey the type of look and feel you are going for. An example of this style is below:
This is the easiest way to create a mood board because it can be thrown together quickly and does not force you to make decisions about smaller details such as fonts or specific colours. Grab bits of inspiration from anywhere you choose. Scan in things you find around you or search online for suitable pictures and textures. Sometimes it is helpful to include screenshots of other sites with a similar look and feel.While this is the most time-efficient and fun style to make, it can unfortunately be confusing and distracting to clients who do not fully grasp the idea.
Style 2: Refined Template
If your client has not worked with many designers or marketing people, or if they are extremely detail-oriented, you may want to take a more formal approach. In this style, a template is created to showcase the different elements. An example of this style is below:
A color palette is defined, font treatments such as a heading and subheading are chosen, and items like button styles and photography can also be worked in. A standardized template will help your client to focus on the featured elements.
What are the benefits?
Faster mockup production
Some clients will argue that they dont want to pay for mood boards and would rather go straight to mockups, but a few short hours spent up front can save countless hours down the line. With a visual guide created and a clear vision of where youre headed it’s much easier to jump right in to the visual prototyping process. There is no blank-canvas syndrome to deal with, and no gnawing feeling that you are wasting your time on a concept they might not like. Best of all, there are no big surprises. Since using mood boards I have yet to run into a project that was a complete do-over.
Smoother client buy-in
Additionally, early client participation makes them a bigger part of the project. When clients feel involved they are more likely to trust you. Mood boards make it clear that you are listening to them and considering their input. They also gain insight into the thinking behind your decisions, dispelling the all-too-common notion that designers choose everything on a whim. Knowing why you picked something will often keep personal preferences (ie/ the clients favorite color is purple so she would like to see that as a background) from creeping in as change requests.
Less frustration, more fun
Mood boards are so much fun, they hardly feel like work. Designing loosely lets you brainstorm, explore and play with different styles without all the limitations a layout (and coding realities) will later impose. They also keep revision cycles to a minimum, something every designer can appreciate.
A mind map is a diagram used to represent words, ideas, tasks, or other items linked to and arranged around a central key word or idea. Especially in British English, the terms spidergram and spidergraph are more common, but they can cause confusion with the term spider diagram used in mathematics and logic. Mind maps are used to generate, visualize, structure, and classify ideas, and as an aid to studying and organizing information, solving problems, making decisions, and writing.
The elements of a given mind map are arranged intuitively according to the importance of the concepts, and are classified into groupings, branches, or areas, with the goal of representing semantic or other connections between portions of information. Mind maps may also aid recall of existing memories
By presenting ideas in a radial, graphical, non-linear manner, mind maps encourage a brainstorming approach to planning and organizational tasks. Though the branches of a mindmap represent hierarchical tree structures, their radial arrangement disrupts the prioritizing of concepts typically associated with hierarchies presented with more linear visual cues. This orientation towards brainstorming encourages users to enumerate and connect concepts without a tendency to begin within a particular conceptual framework. The mind map can be contrasted with the similar idea of concept mapping. The former is based on radial hierarchies and tree structures denoting relationships with a central governing concept, whereas concept maps are based on connections between concepts in more diverse patterns. However, either can be part of a larger personal knowledge base system.
This weeks lecture concentrated on the differences between a logo and a brand, we covered shapes and their symbolic meaning and looked a little at colour theory. Political and national significance of symbolism is vital when countries, companies and individuals wish to associate themselves to a particular country. On these occasions the colours from that countries national flag are usually used as part of this national identification. Where there is conflict, such as Northern Ireland, certain colour combinations can be problematic, especially if the company or organisation wishes to reach out to the whole community.
Branding is all about how to create an effective brand. This week we looked at all different aspects such as symbolism, shapes, colours and fonts. This lecture was very helpful as it took us out of our comfort zones as we discussed that the logo doesnt exactly have to have trees or show what the charity means for example Samsungs logo doesnt have a mobile icon in it so it doesnt exactly have to represent the charity in that way. This lead me on to discuss the difference between a logo and a brand as some think that the logo and the brand are the same which i have discussed below.
What is the difference between a Logo and a brand?
Some would believe that the logo is the brand, hence there is no difference. But the fact of the matter is the logo is merely the face of the brand and the brand is essentially a companys reputation, its perception in the marketplace. Creating a brand by definition is somewhat misleading as every company has a brand whether they want one or not. What they can do to some extent is develop and guide their brand. To do this they must first understand where their brand sits at this point in time. Knowing this allows the company to determine whether they like their brand or whether theyd like to move it in another direction. They could take any number of initiatives to achieve this, the most effective i believe is a differentiation strategy. By analyzing the competition, choose a road that separates you and positions you as a leader in your category
Creating a logo is traditionally designed in a vacuum with no consideration to a differentiation strategy, but more to the tastes and whims of a graphic designer, who really doesnt understand your brand or at the very least has a passing gut feel. Since the logo is the face of the brand it must accurately reflect the brand values and personality if it is to resonate with its audience. To view the brand logo an accurate perception of your brand should take place. How many logos do you see in a day that bear no relation to the company they represent? This is the disconnect that a poorly developed brand logo suffers from. Examples might be highly technical logos for companies where traditional service are brand values not technical innovation. The only reason for this design direction is the designer and clients desire to look modern and high tech. The color palette is based entirely on this year color trends. The result is a disconnect. The logo must reflect the brand. If a company wishes simply to design a cool logo then they are ignoring what its job is to do. It should never stand alone from your brand.
Top 10 logo design tips
Paul then thought it would be useful for us to look at Logo Design Love’s ten tips for a good logo design as they give the best straight-up guidelines for designing a good logo.
1. A logo doesnt need to say what a company does
Restaurant logos dont need to show food, dentist logos dont need to show teeth, furniture store logos dont need to show furniture. Just because its relevant, doesnt mean you cant do better.
The Mercedes logo isnt a car. The Virgin Atlantic logo isnt an aeroplane. The Apple logo isnt a computer. Etc. Etc.
2. Not every logo needs a symbol
Sometimes a client just needs a professional wordmark to identify their business. Dont be afraid to ask what they think.
3. Two-way process
Remember, things might not always pan out as you hope. Your client might request something you disagree with. If that happens, try giving them what they want, then show them what you believe is an improvement, and why. Theyre less likely to be so resistant if they already see how their thoughts pan out.
4. Picasso started somewhere
You dont need to be an artist to realise the benefits of logo sketching. Ideas can flow much faster between a pen and paper than they can a mouse and monitor.
5. Under-promise, over-deliver
If youre unsure how long a task will take to complete, estimate longer. Design projects are like construction work — you piece lots of little elements together to form a greater whole, and setbacks can crop up at any time.
6. Leave trends to the fashion industry
Trends come and go, and when youre talking about changing a pair of jeans, or buying a new dress, that’s fine, but where your brand identity is concerned, longevity is key.
Don’t follow the pack. Stand out.
7. Work in black first
By leaving colour to the end of the process, you focus on the idea. No amount of gradient or colour will rescue a poorly designed mark.
8. Keep it appropriate
Designing for a lawyer? Ditch the fun approach. Designing for a kids TV show? Nothing too serious. I could go on, but you get the picture.
9. A simple logo aids recognition
Keeping the design simple allows for flexibility in size. Ideally, your design should work at a minimum of around one inch without loss of detail. Look at the logos of large corporations like Mitsubishi, Samsung, FedEx, BBC etc. Their logos look simple and are easier to recognise because of it.
10. One thing to remember
Thats it. Leave your client with just one thing to remember about the design. All strong logos have one single feature to help them stand out
The Countryside NI as different brand names and it was a tough decision to decide to which one to go for Countryside NI or Campaign for the protection of the countryside northern ireland we will have to come up with a brand that would suit around one. as I discussed above they had discussed in the lecture that in a typographic brand or logo can be enough meaning the logo does not always need a symbol. logos and brands Such as Samsung, Coca Cola, etc do not need an icon however other such as Apple, Blackberry, Android have got there legendary logo and icon and has made millions as it shows there brand on so many products. So I was thinking to use a symbol for the countryside NI because they can use there brand on different products such as t-shirts and they can promote there symbol through advertising on bill boards etc.
When looking at the typography for Countryside NI I had researched and wanted to find a font that could represent to the organisation really well. When thinking for font to use for the Countryside NI I thought of green and earth so I had researched some fonts.
What do you do with type? Read it! So why do so many websites make it so damned difficult to do just that? Be it tiny font sizes, crammed line-height, or just plain ugly fonts, it seems that a lot of sites out there are determined to not let you enjoy their content! By making my type readable, I immediately jump ahead of at least half of the competition, which is fortunate, really, because it's not that hard!
When deciding what typeface to use on my clients website, it's important to remember: don't over think it. I know that many designers hate using Helvetica, because it is wildly overused. I agree with this, but there's one very important piece of information this statement leaves out: why. People overuse Helvetica because it's just so damn good. It fits right in with virtually every design imaginable, it works well in small, as well as huge sizes.
As a general rule, designers like to set their body copy at the very least at 12px. Most, however, chose a larger size like 14px, which is even better for readability. Font-sizing is really quite easy to decide on for body copy, but it's the titles that start to get complicated. How big should your titles be? It depends. In my observation and creation of websites, I've come to the conclusion that a title should only be as big as it needs to be. This means that you should try out different sizes until you find one that is just big enough to draw the attention you want to it, but no bigger, unless huge text is what you're going for, in which case go right on ahead.
While not strictly-speaking typography, color is a very important part of every website's type. I'm not talking about color schemes, but rather about the contrast needed to insure readability on your site. Black text on a white background (or light background) is widely considered to be the most readable color for text. I'm not saying I should go and set everything to black-on-white, just that when i am designing, I should be aware of the contrast of my text. It could come back to bite me if am not careful.
Shapes and forms
In the lecture we looked at the meaning behind shapes and what sort of feelings/emotions they portrayed. This is something that I had never really considered before, and so it was interesting to learn that I could use shape to resemble emotions and modify the consumers perception, much the same way as using color. Therefore I decided to research the meaning behind shapes. I looked at a range of shapes to see what the meaning is behind them.
Shapes have an endless variety of characteristics, each communicating different messages to your audience. You’d be hard pressed to design any web page without creating shapes. Even if your page is nothing more than paragraphs of text you’re laying down shapes on the page.
3 types of shapes
Geometric shapes are what most people think of as shapes. Circles, squares, triangles, diamonds are made up of regular patterns that are easily recognizable. This regularity suggests organization and efficiency. It suggests structure. Geometric shapes tend to be symmetrical further suggesting order.
Natural/Organic shapes are irregular. They have more curves and are uneven. They tend to be pleasing and comforting. While they can be man-made (ink blobs), they are more typically representative of shapes found in nature such as a leaves, rocks, and clouds. On a web page organic shapes are generally created through the use of illustration and photography. They are free form and asymmetrical and convey feelings of spontaneity. Organic shapes add interest and reinforce themes.
Abstract shapes have a recognizable form, but are not real. They are stylized or simplified versions of organic shapes. A stick figure is an abstract shape depicting a person. Typographic glyphs are abstract shapes to represent letters. Icons are abstract shapes to represent ideas and concepts. Some abstract shapes have near universal recognition. Think of some of the icons you see in the software you use daily.
I looked at the circle shapes which is a very popular shape to use in design, the symbolism behing means depending upon era, culture,region and your perspective circles may represent: life, motion, female, beginnning, potential and cosmos.The circle symbol meaning is universal, sacred and divine. It represents the infinite nature of energy, and the inclusivity of the universe. . Circles have no beginning or end. They represent the eternal whole and in every culture are an archetypical form representing the sun, the earth, the moon, the universe, and other celestial objects between. Circles are used to suggest familiar objects such as wheels, balls, many kinds of fruit. They suggested well-roundedness and completeness.Circles have free movement. They can roll. Shading and lines can enhance this sense of movement in circles. Circles are graceful and their curves are seen as feminine. They are warm, comforting and give a sense of sensuality and love. Their movement suggests energy and power. Their completeness suggests the infinite, unity, and harmony.Circles protect, they endure, they restrict. They confine what’s within and keep things out. They offer safety and connection. Circles suggests community, integrity, and perfection.Because they are less common in design they work well to attract attention, provide emphasis, and set things apart .Behind researching the meaning of shapes will also help me allow to figure out what type of shapes to use in the clients logo. Circles would be a great representation for the Countryside NI.
The square is a very strong and stable shape as it can represent many elements in different religions.Some conceptual insights into the stabilizing energy of the square include: Earth, security, structure, masculine and order.
We can branch off from there by observing the four-sided structures that surround us in our environment. Like:
Triangle symbolism speaks to us of magic, and creativity. Here are some other attributes for this symbol, Combination, Creation, Manifestation, Illumination.Triangles can be stable when sitting on their base or unstable when not. They represent dynamic tension, action, and aggression. Triangles have energy and power and their stable/unstable dynamic can suggest either conflict or steady strength. They are balanced and can be a symbol for law, science, and religion. Triangles can direct movement based which way they point. They can be used to suggest familiar themes like pyramids, arrows and, pennants. Spiritually they represent the religious trinity. They can suggest self-discovery and revelation. The strength of triangles suggests masculinity. Their dynamic nature make them better suited to a growing high tech company than a stable financial institution when designing a logo. Triangles can be used to convey progression, direction, and purpose.
Using Shapes in Web Design
We use shapes to add and sustain interest in a design. Shapes of different visual weight can be used to create focal points in a design and direct the flow of a design. Shapes organize elements by separating some and connecting others. Shapes can be used to convey depth by varying their size and position within a design. Larger shapes will appear closer and smaller shapes will appear further away. Shapes that are located lower in a design will seem closer and those higher up further away. Overlapping shapes is another way to create a sense of one in front of the other to add depth to your design.
Shapes like lines are an essential building block in our visual vocabulary and grammar. Try to create a design without using at least one shape. It’s impossible as even the blank page is a shape. There are an infinite variety of shapes and shape combinations. Most of the shapes you use and encounter will be geometric so try to work in organic shapes to create interest where appropriate. Abstract shapes are symbols representing organic shapes and are common to logos and icons. They can carry a lot of meaning due to their connection with more concrete natural forms and can communicate quickly and effectively and because of this some are overused. Look around you and observe shapes in designs and nature and think about what they are saying to you, what they make you feel, what they are communicating. Do they enhance or hinder the message of the designs you see? Keep pen and paper handy and scribble and doodle various shapes. Notice the shapes you draw, how they affect you, and how you can use them in your designs.
One of the key elements of building a strong brand is color selection. Every color has a different feel and various associations. By choosing a color or a combination of colors for your brand identity, you will take on those associations. Colors will evoke certain emotions and feelings towards your brand so it is vital to choose a color that will represent your identity effectively.
Research reveals people make a subconscious judgment about a person, environment, or product within 90 seconds of initial viewing and that between 62% and 90% of that assessment is based on color alone. This is why colour matters
If you own a color in your industry, this color will symbolize your product. This can act as a great identifier. For example, if you sell physical goods, your packaging will stand out from the competition. The color will also be recognizable on any promotional media and your logos.
Where to start
There is a great new tool which can help out with color selection called Cymbolism. It’s an interactive survey of color and word associations. Every page loads a new word, for which you have to select a color you feel best represents it. The results are then aggregated and you can see most popular associations either by color or by word.
To help you select the right color for my brand Ive aggregated the results from Cymbolism, and also provided examples of logos that use each color:
Think fire and blood, Red rushes to us with messages of passion, primal urges, action, pleasure, vibrance, radiance, and love.
A nice subdued blend between the aggressive red and the high pitch of yellow. Orange is about harmony, aspiration, sociability, contentment, and intelligence
Worshipped in the form of the sun, Yellow is all about radiating creativity, protection, intellect, positivity and clarity.
The fresh start of spring brings waves of Green and with it comes attributes of youth, sentimentality, nature, adventure, growth and health.
Look to the sky for the meanings of Blue, open spaces, freedom, imagination, expansiveness, inspiration, and sensitivity.
After looking at the meaning behind shapes and colours this will help me to decide what shapes and colours to use for the logo, The colour green would be a great representation as it indicates nature.
This week in the lecture we were looking at branding guidelines, the reason for this being that writing our branding guidelines for Countryside NI is the next step in our project for the module. We looked at some examples of well known companies brand guidelines and what sort of things they included to give us an idea as to what we need to put into our brand guidelines. This week in my research I wanted to look into brand guidelines in more depth. Let’s first consider the word guideline. A guideline by definition is “a general rule, principle, or piece of advice” - so guidelines would be a set of these. It is already easy to understand the concept of brand guidelines from knowing what a guideline is. Guidelines for a brand will be a set of general rules, principles, or pieces of advice for the use of a brand. First I had to understand who will be using the guidelines which would be countryside ni, what will they gain from using the guidelines? where and how will it be accessed? and why the guidelines are being produced. First i had picked one big idea which promotes the brand I will explain how the following brand guidelines will help communicate this idea to the brands client also we will live the brand which means designing the guidelines in the look and feel of the new brand design. Before I started working on the details, We would first create a pagination and have it agreed my the group. We will also crate a clear section numbering system which will make a clear reference to it in the body copy. We will create section dividers containing a table of contents for each section. we will also include an introduction upfront to explain why the guidelines have been produced and how adhering to them will strengthen our brand. We will also ensure that its easy to understand and make clear and creative. Within the guidelines will show examples of how the brand should look across a full range of different media. if our brand has been mishandled in the past, we will include a dont do section showcasing common errors such as colours not to use, not to change the format, rotation etc. Basic contents for brand guidelines should include:
Foursquare has recently released a brandbook that contains their identity standards. A book like this is one of the hallmarks of any growing company. It defines the proper ways to use the logo and wordmarks and defines the companys color palette, among other things. I want to take a look at is one which was covered in class. Foursquares Brand Book, a very straight forward, short, and to-the-point set of guidelines.
The aspect of these guidelines which really grasped my attention was how clean and well structured the layout is. I also found interesting as it wasnt very long as it only covered 15 pages which was great as they got straight to the point, but considering this after browsing through you get a clear understanding of the company and their brand, how to use it and how to not. Therefore,I think that this would be a great example to work from for our own branding guidelines as it will be a stepping stone to help us achieve great standards. There brandbook contains a content page, introduction, logo usage, incorrect logo usage, icon usage, incorrent icon usage, colours, copy and tone of voice, typography, crown usage, badge usage, iconography, and finally there trademark.
This week our task was to look into CMS (Content management systems), I was very unfamiliar about about this area and the technical specification for the countryside ni said it was necessary to include it into the website. A Content Management System is a tool that allows those who are familiar with web authoring as well as those who are not, to create, edit, manage and then publish content such as text, graphics, video, documents etc by creating a division between layout and content. The main advantage of using a Content Management System is that this content can be easily and quickly updated or modified. It also means that a client can easily update or modify there own website without having to contact the designer and wait for them to do it. This would be a very good element to have for Countryside NI as it needs to be easily accesses and edited as we don expect our client to actually go into the code and change the code because they wouldnt have the skills and knowledge to do this so we need to make it as easily as possible, therefore I am going to look at CMS in order to find the right one for my client.
(A content management system (CMS) is a computer system that allows publishing, editing, and modifying content as well as site maintenance from a central page. It provides a collection of procedures used to manage work flow in a collaborative environment. These procedures can be manual or computer-based. The core features of Content Management Systems vary widely from system to system; many simpler systems showcase only a handful of features, while others, notably enterprise systems, are much more complex and powerful.
There are a range of different content management systems, however there purpose and functionality remains the same.They vary in technologies used, organization structure, performance, and license. You’ve probably heard of popular content management systems such as Drupal, WordPress, Movable Type, Joomla!, and Textpattern, but if you want to try a platform thats a little less main stream , there are excellent alternatives.
ExpressionEngine is a powerful and easy-to-use content management system. ExpressionEngine is known for its flexibility and intuitive Template Engine that lets developers easily mold the CMS into its intended use. It has a built in caching feature that significantly reduces server load (helpful in times of high traffic). Check out the Showcase section on EEs website to see live sites that use ExpressionEngine.
Concrete5 is a solid content management system thats a breeze to use. You can edit a web page live by entering "edit mode", which makes the regions and elements on the web page you are viewing editable. It has a very robust administration panel with a built-in system for gathering statistics so you don’t need to install a plugin/extension or use a third party application like Google Analytics to monitor your site traffic.
Radiant CMS focuses itself for use in small teams. Its designed as a simple and elegant CMS akin to 37 Signals applications, holding out on complicated and unnecessary features to provide users a straightforward interface for creating and editing website content.
CushyCMS is a "plug-and-play" content management system that doesnt require you to install anything to get it working, which can greatly reduce your maintenance cost and development time. With CushyCMS, you define which areas are editable, making it a safe option to your not-very-tech-savvy clients. CushyCMS is currently being used by about 10,000 websites and is gaining popularity as a no-hassle, user-friendly CMS.
Symphony, created by Overture, is a CMS designed for developers, utilizing XSLT to provide developers flexibility in customizing Symphony. If you dont know much about XSLT, Overture provides a large number of tutorials and screencasts on their resource center. With that said, Symphony isn’t for everybody and those looking for a content management system that requires little technical expertise should probably consider another option.
MODx is both a content management system and a PHP web application framework. MODx puts a high emphasize on web standards, allowing you to build XHTML 1.1 strict compliant websites easily. It comes with a build-in CSS menu builder for hassle-free site navigation development. For less-experienced users, MODx comes with a graphical user interface installer so you can get up and running quickly.
WordPress is a free and open source blogging tool and a dynamic content management system (CMS) based on PHP and MySQL. It has many features including a plug-in architecture and a template system. WordPress is used by over 14.7% of Alexa Internet's "top 1 million" websites and as of August 2011 manages 22% of all new websites. WordPress is currently the most popular CMS in use on the Internet
After researching different Content management systems I had looked into a few furthermore I really like the cushy content management system because I found that its the easiest one to use and my client that does not have much coding skills will love the fact that the CMS is easy to use. Cushy would be a far less complicated management system than say wordpress because thinking realistically they wouldnt know how to use it or wear to go to edit pages because I didnt even no myself so I dont expect my clients to know what wordpress is. So being realistic I decided to use a easy, straightforward content system. as all you need to do is log in, select the page you want to edit, the web pages are all listed so its easy to see your webpages then, you select which paragraph you want to edit, then click publish and show the live page and thats it!! easy as that. So this content management would be most appropriate for my client.
Using Social Medias
This week the class had the pleasure of a guest lecture on social media from Jonny Campbell.So I wanted to do a bit of research and see what I could find on the topic and how it could be applied to the project we are working on for the module.
Social media includes web-based and mobile based technologies which are used to turn communication into interactive dialogue between organizations, communities, and individuals. Andreas Kaplan and Michael Haenlein define social media as "a group of Internet-based applications that build on the ideological and technological foundations of Web 2.0, and that allow the creation and exchange of user-generated content." Social media is ubiquitously accessible, and enabled by scalable communication technique.
Social media is defined as "websites and applications used for social networking". From this I take that I should look more specifically at social networking and what exactly is social networking? It's the way the 21st century communicates today. Social networking, also referred to as social media, encompasses many Internet-based tools that make it easier for people to listen, interact, engage and collaborate with each other. Social networking platforms such as Facebook, MySpace, YouTube, LinkedIn, Twitter, blogs, message boards, Wikipedia and countless others are catching on like wildfire.People use social networking to share recipes, photos, ideas and to keep friends updated on our lives. In many cases, you can use social networking tools from mobile devices, such as Blackberries and iPhones, as easily as from a PC or Mac.
I then wanted to look at if social networking is good for business in my case for Countryside NI as apart of there requirements they want a media presence on the web, so I decided to look into this further on why social networking is good for business.
Social media marketing is a rapidly changing environment, as we all know. But the good news is that your customers are embracing social media as a normal part of their lives. Even the over-50 population is adapting at staggering rates. The following 26 stats should impress upon you the importance of developing a social media strategy for your business. #1: There are now more than 800 million active Facebook users, with over 200 million added in 2011. Notice the growth trend traced by Ben Foster.
Social Networking is another way to advertise yourself and your business for free or at a very low cost. it will help you expand your reach and target customers using these types of social medias, while incurring very little additional overhead costs. Social Networking is a very inexpensive means for advertising what your business is and does and what services and products you offer.
USING THIS TO OUR ADVANTAGE
One of the main aspects of our project that was required by Countryside Northern Ireland was that they wanted us to come up with ideas on how to increase there social presence and come up with how social media could be used to promote there organisations message, and to draw in new customers and keep those who are already following the campaign informed. So as a group we need to include the social media in to the website so that news and events can be shown faster. Also using social medias will show users that the organisation is relevant and it will allow new people to follow. The social media will also make the organisation become more popular and may become better known. Like I says facebook is like wildfire and once a few people will have then there friends will know about it then there friends will have it etc.
Promoting through social medias
Getting your business known through networking has always been a good idea. With social networking sites, you have an opportunity to network online, to find key contacts and potential customers you might never have met in person
Most people consider the Internet as a place to learn, work, or play. As time goes by, more and more people get connected to it. And so, the means it can be utilised keep on growing exponentially. No wonder why many companies are using this technology to put their businesses online to reach more potential customers.
Social media is one of those tools that provide consumers a new way to manage information. Through social media, technology has allowed entrepreneurs and marketing people to provide consumers a voice. Online communities have a closely connected group of users who can help promote branding and improve a consumers impression or awareness about a product. By utilising these social networks through an array of content targeting strategies or tools, businesses can significantly obtain a lot of interest and awareness. The social media can also trigger word of mouth marketing. With consumer generated contents, people can tell the others whether they consider a certain product good or bad. And as they encourage everyone to participate, the potential of increasing brand awareness is definitely on its maximum. If you want to start promoting your business through social media, you can start with blogging, forums, and social networking sites. Experts say that blogs became the platform for consumers to stop cursing whatever they see on TV. Through blogs, they can write about what they think about the product. At an entrepreneurs point of view, blogs can also be a place where they can leverage other people by sharing their expertise on a certain matter. For example, if your brand has something to do with air-conditioning and you want to promote your product using blogs, you can write something about choosing the best type of air-conditioning system. When people regard you as somebody who knows the product very well, they will most likely trust you and buy your product or in our case will donate to countryside NI.
Social networking sites like Facebook and Twitter can also help you promote your business. Surveys show that nearly 80% of users would rather add the brands as their friend than letting companies advertise these to them. The bottom line is that promoting your business through social media can significantly help you leverage sales by allowing your consumers to get more close to your business. Bridging the gap between consumers and the brands will create major impacts in your business. And the only way to do this is to let consumers be in control.
Stages of using social media to promote your organisation
In a recent presentation, social media guru Beth Kanter of Beths Blog described the different stages of using social media to promote your organization. They are: Listening, Engaging, Social Content, Generating Buzz, Movement Building and Multi-Channel.
Stage 1: Listening - You are curious about what is happening online and what people are saying about you and the issues you care about on the internet.
Some great listening tools include:
--RSS Feeds and following blogs
--Setting Google Alerts with keywords
Stage 2: Engaging - Interacting with users online.
You can engage by:
--Using Facebook for interactive listening. Use conversation starters to engage your audience and have two-way conversations by asking questions and replying to posts.
Twitter: --Use hashtags, ask questions, reply to posts, share links to news items related to your mission, and connect with other Twitter users interested in your cause. Check out the Twitter ladder of engagement:
--Reaching out to partners and building relationships with influencers on social media and Reading and commenting on other blogs in your issue area
Stage 3: Social Content - You are moving beyond just listening and engaging; now you are adding more content to the mix. This can be by writing original blog posts and posting digital media like photographs and video.
Provide links to connect with others and share content.
Co-create, remix, and share content, collaborate! and Integrate content between social media spaces (for more on this, check out this guide to cross posting for advocacy).
Stage 4: Generating Buzz - People are talking about you, your campaign, and your issues. You may be losing more control of the conversation.
Stages 5 & 6: Movement Building and Multi-Channel - A full-blown movement!
Once youve examined what stage you are in you can start thinking about moving to the next stage. maybe its time to start interacting with people who care about your organization and your issue area. Ready to take the plunge and create a video or share photographs? etc
The last lecture looked at functionality in its broadest terms and reviewed the 'features' that the client has suggested. Functionality referes to how your site will function rather than its technical capabilities.We Discussed as a group and produce a short functionality list e.g. 'Ability to automatically post notifications to social networking sites when a new blog is posted' or 'Members login area for obtaining additional information'etc So I decided I wanted to research into how to make your website very functional and what features to include to make it functional and also meet my clients requirements.
Utilizing your website means consistently updating and improving the site to be most effective. There are many important features to consider for improvement such as Content, Interaction, Professional Design, Functionality and Usability. With every message you convey to your users, you want to also convey a consistent message throughout all your marketing platforms. Even through design and functionality, you are still able to convey important messages to your customers. For example, if you are an IT company, it is even more imperative to be up to date with the latest technology. The functionality and structure of your website may make or break the decision of your customers. If you consider your website a valuable asset to your company with high standards, quality, and authenticity you want to convey this through the features of the website as well as the content.
Design (The First Impression)- Compelling visual design is an important attention grabber for your viewers. It is the First Impression, as you may call it, that the website will receive. Remember, the website is the online company Identity and plays a valuable role in your marketing and branding campaigns. A Crisp, Fresh, Professional Design can go a long way. You can optimize your website by changing colors, fonts, images, rearranging content, adding logos, action items, etc.
Functionality and Usability (For the benefit of the User)-Functionality is a way to keep your customers returning to your site. Functionality of your website is not only for your benefit but for the customers. For example, some websites have a “search” feature on the homepage that allow your customers to quickly find what they specifically want to inquire more information on. How easy is it to navigate through your site? Navigation is very important in the usability of your website. It needs to be simple, yet effective for your customers to find what they are looking for, in the fastest way possible. Technology should be a tool that is used to make things simpler, faster, and more efficient. People greatly appreciate when you save them time. By designing a website for the viewers needs you are staying true to your branding message of “Customer Focus” as well as utilizing technology to build trust and authenticity for your brand.
Interactivity (Engaging Customers)- A prime example of keeping customers engaged is by Adding a Blog, News Feed, or Multimedia Page to your website. This allows you to gain trust from your visitors and communicates the message that you are not afraid to offer company information and helpful resources. Remember online marketing is successful by giving, not only receiving. Be interesting and provide people with information that has value and substance. Be proactive with your customers and keep them fully engaged in who you are and what you have to offer.
Content (Too Much is Too Little)- It is vital to keep your content simple and to the point. Fluffy and wordy descriptions can be a turn off for people. If you go with too much content then people may feel that you are trying to oversell your products and exaggerate your services. Prioritize your information in a structure that is relevant. What message do you want people to grasp? What text should be BOLD? Keep it simple to the point. A good message can be short and still be accurate.
A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. The wireframe depicts the page layout or arrangement of the websites content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, colour, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like. Wireframes can be pencil drawings or sketches on a whiteboard, or they can be produced by means of a broad array of free or commercial software applications. Wireframes focus on The kinds of information displayed, The range of functions available, The relative priorities of the information and functions, The rules for displaying certain kinds of information and The effect of different scenarios on the display
We Discussed as a team the best layout for our group website. We already have settled on some design decisions like the location and type of navigation, positioning of logo etc. For my wireframes I wanted to research the best layouts to use within the websites.
A unique, usable and interesting web design can really spark interest in your company or product. Navigation can be presented in an unorthodox way, background images can be used, dynamic elements such as Flash or jQuery can be used to enhance the user experience, along with a variety of other tweaks. However, it is often difficult to have a beautiful website that is not only unique, but is usable and intuitive.
Why your layout is important
One of the most important things you need to consider when thinking of your website is a good design and layout. Your website will be the center of your online business. It will represent your company. When you're doing business online, your customers cannot physically see you like they would if you had an actual store or office building they could visit. This means that they will be judging you by your website design and content, so this is where a well designed layout will come in.
If you were running a business offline you wouldn't allow your sales associates to dress in casual wear while they are dealing with your customers, would you? Professionally dressed associates tell your customers that you care about the quality they receive. This is because first impressions are vital, and with an online business your website is your first impression. If your web design and layout is professional looking, it gives your potential customers the impression that you have given every detail the attention it deserves and that you care about being professional. It shows them that you are focused and organized. Another important aspect of the layout is how easy it is to navigate. Nothing will send your customers running to a competitor faster than a website that is difficult to navigate. If the customer can't find the information or product they are looking for on your website quickly, then they are going to search elsewhere. Carefully consider your navigation when you are planning your layout. You will also want to be sure that anything related to your company is designed and laid out well. Whether it be business cards, letterhead, or brochures, every small detail is very important. As your business grows, the above mentioned items will become the "face" of your business, and you don't want it to give the impression you only spent five minutes throwing it all together. A professional quality web design and layout is vital if you want to make that excellent first impression because first impressions are what keep your customers on your site longer, lead to sales, and keep them coming back. If you take the time to consider the design and layout of your website before you design it or hire someone to do it for you, then you will bring success to your online business.
Week 8 was our crit section, this was our time to get feedback on our initial designs for our website however our client did not turn up so therefore we got some feedback from our lectures instead. The feedback was good, they liked out logo and brand, they liked the layout etc. After the lecture we started back to the drawing board to decide which designs we wanted to use out of each design from each member of the group. we then came up with our final design for our website. I am now going to take my chance and research different software that we want to use to create our website.
HTML5 is the hottest thing in web development. I wanted to discuss the background surrounding HTML5 development and point to the advantages and disadvantages to using the language today.
HTML5 is the newest version of the HyperText Markup Language that was developed in the late 80's in order to describe documents that linked to each other. In it's early days, HTML's role was simple...to help describe a document's structure and to allow cross-linking of documents.
There's a couple of great new approaches that are taking place in the HTML5 description.
The Rise of WebApps
First, the language is being built around WebApps...small focused applications that can run on a browser or as a mobile application. The new version of HTML has features like offline storage or the ability to handle data even when the app is no longer connected to the internet, geo-location or the ability to detect and work with the location of the user as well as excellent rich media support...providing easy to implement audio and video elements.
More descriptive semantics
The original goal of HTML was to develop a language that could describe the structure of a document. As the web grew, developers realized that oftentimes they were describing the same types of elements. For example...a header, a footer, nav, articles, sections, etc. HTML5 recognizes where the language has developed and incorporates those elements into the language with new tags for that type of content.
Richer Media Elements
Why not HTML5?
I wish we could all be using HTML5 today, but the reality is that there's a few problems that prevent the language from use in modern websites.
The main problem with HTML5's acceptance is that only modern browsers support it. By modern, I mean almost everything except for Internet Explorer. The new version...IE9 offers excellent support, but as of this writing it's not quite out of beta. Even if it were, the majority of people will still use older versions of IE for quite some time. There are things you can do to make the language play nice with older browsers, but none of them are perfect.
The Language is a Spec
Another problem is that although parts of the language are very stable, the language itself is considered a work in progress, so technically, any of the elements could change at any time. The language is not expected to be completed for several years, which complicates things further. Thankfully, a lot of the language is considered stable and ready to use. I think it's such a great move forward, that you should develop a Graceful Degradation approach to writing your HTML. That simply means writing HTML that will work with older browsers, but will offer users with more modern browsers an enhanced experience.
Media Licensing Issues
Another ugly fact about HTML5 is that because of licensing issues, rich media has to be compressed in multiple formats in order to be compatible with most browsers. So you'll probably use something like mp3 audio for webkit browsers (safari, chrome), and ogg for mozilla (firefox) browsers. It involves a bit more work and it is a pain, but hopefully those issues will be resolved soon.
Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.
Sass is a Cascading Style Sheets (CSS) metalanguage. It is a scripting language that is interpreted into CSS. SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called "the indented syntax" uses a syntax similar to Haml. It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, "SCSS" uses block formatting like that of CSS. It uses curly brackets to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss respectively
CSS3 consists of a series of selectors and pseudo-selectors that group rules that apply to them. Sass (in the larger context of both syntaxes) extends CSS by providing several mechanisms available in more traditional programming languages, particularly object-oriented languages, but that are not available to CSS3 itself. When SassScript is interpreted, it creates blocks of CSS rules for various selectors as defined by the Sass file. The Sass interpreter translates SassScript into CSS. Alternately, Sass can monitor the .sass or .scss file and translate it to an output .css file whenever the .sass or .scss file is saved Sass is simply syntactic sugar for CSS. The official implementation of Sass is open-source and coded in Ruby, however, other implementations exist, including one in PHP for Drupal. The indented syntax is a metalanguage. SCSS is a nested metalanguage, as valid CSS is valid SCSS with the same semantics. Sass supports integration with the Firefox extension Firebug.
Unlike HAML, SASS retains most of the same feel when writing the code as vanilla CSS. It simply adds more power and better organizational tools, making it an easy choice as a go-to replacement. You can teach someone the basics of SASS in about 30 seconds: use two spaces to indent everything, put the colon before the declaration and no semicolon afterwards
Basic Example: Building a Menu the SASS Way
The best way to start explaining the power of SASS may be through one of the more common styling tasks one encounters: styling a menu. Here we will assume a menu structure like this:
To style this menu in CSS, we might do something like this:
SASS allows you to use indentation to indicate hierarchy, saving much repetition and space. The same code in SASS looks like this:
Hierarchical selectors mean that if you indent something, the selector it falls under will automatically be prepended to it, so the two examples above generate the same output. You’ll also notice !menu_bg in the SASS code. SASS allows you to declare constants that can be reused throughout the code, a very useful feature when dealing with colors. Now we have our basic setup for the menu, but let’s handle some better cases. I want the color to change when I hover over the menu options and I want to highlight the current menu option (we’ll assume that the
This isnt too bad, but our selectors keep getting longer and longer. Lets look at the same thing in SASS.
The ampersand (&) in SASS is a shortcut to insert the entire parent selector at that point. By using &.current I am saying the parent selector with a class of current. &:hover means “the parent selector when hovered.This makes it easy to write complex selectors in a compact, easy-to-read manner. Another great thing about SASS is it has built in CSS color math. Note where I declared :background = !menu_bg - #111111. That is equivalent to subtracting 1 from each of the values of the constants color, which in this case yields #116699. This is great, because now I can change the color of the menu and the hover state will automatically change without me having to manually find it and recalculate it for a new color. Note that whenever you are using constants or performing calculations you need to add the equals sign to your declaration.
I found that using the sass it really easy to use and way faster to design your website as my creating the variables you are able to duplicate and use them over again which is very useful when creating my new website I would recommend using it because its less time consuming.
This week we looked at usability on the web and discuss the findings from experts in the field such as Jakob Nielsen, Steve Krug and Jeffery Zeldman
What is Usability
Usability means making products and systems easier to use, and matching them more closely to user needs and requirements.
Usability is about:
Effectiveness - can users complete tasks, achieve goals with the product, i.e. do what they want to do?
Efficiency - how much effort do users require to do this? (Often measured in time)
Satisfaction what do users think about the products ease of use?
which are affected by:
The users - who is using the product? e.g. are they highly trained and experienced users, or novices?
Their goals - what are the users trying to do with the product - does it support what they want to do with it?
The usage situation (or 'context of use') - where and how is the product being used?
Usability should not be confused with 'functionality', however, as this is purely concerned with the functions and features of the product and has no bearing on whether users are able to use them or not. Increased functionality does not mean improved usability!
Why is Usability important?
Usability is the measure of the quality of a user's experience when interacting with a product or system - whether a web site, software application, mobile technology, or any user-operated device. According to Usability Expert Jakob Nielsen: On the Web, usability is a necessary condition for survival. If a web site is difficult to use, people leave. If the homepage fails to clearly state what a company offers and what users can do on the site, people leave. If users get lost on a web site, they leave. If a web site's information is hard to read or doesn't answer users' key questions, they leave. Note a pattern here? There's no such thing as a user reading a web site manual or otherwise spending much time trying to figure out an interface. There are plenty of other web sites available; leaving is the first line of defense when users encounter a difficulty.
This section contains not only traditional accessibility issues, but anything that might keep a visitor from being able to access the information on a website. If no one can load your site, or the type is too small to read, all of the usability in the world won't matter.
1. Site Load-time Is Reasonable-- Call me old-school, but I still like to see sites come in under 100KB (60KB is even better). If a site takes forever to load, most people will just leave. Yes, many of us have broadband now, but that makes our patience even thinner.
2. Adequate Text-to-Background Contrast--Dark-gray on light-gray may seem stylish, but I'm not going to ruin my eyesight to read your blog. Eyes and monitors vary wildly, so keep your core copy contrast high. Good, old-fashioned black-on-white is still best most of the time.
3. Font Size/Spacing Is Easy to Read---Opinions vary on the ideal size for text, but err on the side of slightly too big. Poor readability increases frustration, and frustration leads to site abandonment. Also, make sure your line spacing is adequate - white-space is a designer's best friend.
4. Flash & Add-ons Are Used Sparingly---No matter how great your site looks, people won't wait 5 minutes for a plug-in to load. Use new technology sparingly and only when it really enhances your goals. Sticking to standard HTML/CSS is also a plus for search engines.
5. Images Have Appropriate ALT Tags ---Not only do sight-impaired visitors use ALT tags, but search engines need them to understand your images. This is especially critical when you use images for key content, such as menu items.
6. Site Has Custom Not-found/404 Page --- If a page on your site doesn't exist, a white page with "404 Not Found" is a good way to lose a customer. Create a custom 404 page, preferably one that guides your visitors to content.
A key question when someone first comes to your site is "Who are you?" It's important to answer it quickly, and make the paths to obvious follow-up questions ("What do you do?", "Why should I trust you?", etc.) clear.
7. Company Logo Is Prominently Placed---Put your logo or brand where it's easy to find, and that usually means the upper-left of the screen. People expect it, and they like it when you make their lives easy.
8. Tagline Makes Company's Purpose Clear---Answer "What do you do?" concisely with a descriptive tagline. Avoid marketing jargon and boil your unique value proposition down to a few words. This is also a plus for SEO.
9. Home-page Is Digestible In 5 Seconds---In usability, we often talk about the 5-second rule. There's some disagreement over just how many seconds you get, but website visitors are a fickle bunch, and they need to get the basic gist of your home-page in just a few moments.
10. Clear Path to Company Information--the good old "About Us" page may seem boring, but confidence is important on the web, and people need an easy way to learn more about you.
11. Clear Path to Contact Information---Similarly, visitors want to know that they can get in touch with you if they need to. It's also hard to do business if no one can contact you. Preferably, list your contact information as text (not in an image) - it'll get picked up by search engines, including local searches.
Once people generally know who you are and what you do, they need clear paths to the content that interests them. Information architecture is a huge topic, but these points cover some of the basics.
12. Main Navigation Is Easily Identifiable---Almost every site on the web has had a main menu since the first browsers came on the market. Make your main navigation easy to find, read, and use. If you have two or more navigation areas, make it clear why they're different.
13. Navigation Labels Are Clear & Concise---Don't say "Communicate Online With Our Team" when "Contact Us" will do just fine. Your main navigation should be short, to the point, and easy for mere mortals to grasp.
15. Company Logo Is Linked to Home-page ---This may sound minor, but people expect logos to link to home-pages, and when they don't, confusion follows. I've seen video of users clicking on a logo over and over, with no idea what to do next.
16. Links Are Consistent & Easy to Identify ---The underlined, blue link is a staple of the web. A little artistic license is ok, but consider at least making your links either blue or underlined. Links should stand out, and you should use them sparingly enough that they don't disrupt your content.
17. Site Search Is Easy to Access --- If you have a site search, make sure it's prominent. Usability guidelines tend to prefer the upper-right corner of the page. Keep the button simple and clear - "Search" still works best for most sites.
You've heard it before - Content is king. If you don't want the kingdom to crumble, though, content needs to be consistent, organized, and easy to skim through.
18. Major Headings Are Clear & Descriptive---Most people don't read online, they skim. Use headings (major and minor) to set content apart and keep it organized. Headings should be clear, and for SEO benefit, using heading tags (h1 h2 etc.).
19. Critical Content Is Above The Fold --- The "fold" is that imaginary line where the bottom of your screen cuts off a page. Content can fall below the fold, but anything critical to understanding who you are or what you do (especially on the home-page) should fit on that first screen. Average screen resolution these days is about 1024x768, depending on your audience.
20. Styles & Colors Are Consistent --- Make sure people know they're still on your site by being consistent - confuse them and you'll lose them. Layout, headings, and styles should be consistent site-wide, and colors should usually have the same meaning. Don't use red headers on one page, red links on another, and red text somewhere else.
21. Emphasis (bold, etc.) Is Used Sparingly --- It's a fact of human cognition: try to draw attention to everything and you'll effectively draw attention to nothing. We've all seen that site, the one with a red, blinking, underlined "NEW!" next to everything. Don't be that guy.
22. Ads & Pop-ups Are Unobtrusive --- Ads are a fact of life, but integrate them nicely into your site. Don't try to force ads and pop-ups down peoples' throats. Also, do people a favor and make your ads clear. If you blur the line between ads and content too much, your content may suffer.
23. Main Copy Is Concise & Explanatory --- This isn't a lesson in copywriting, but look at your home-page - can you say the same thing in half as many words? Try to be concrete and descriptive and avoid jargon - nobody cares if you can "leverage your synergies".
24. URLs Are Meaningful & User-friendly --- This is a point of some debate, but meaningful keyword-based URLs are generally good for both visitors and search engines. You don't have to re-engineer an entire site just to get new URLs, but do what you can to make them descriptive and friendly.
25. HTML Page Titles Are Explanatory --- More importantly, your page titles (in the title tag) should be descriptive, unique, and not jammed full of keywords. Page titles are the first thing search-engine visitors see, and if those titles don't make sense or look spammy, they'll move on to the next result.
Jakob Nielsens Usability findings
These are ten general principles for user interface design. They are called "heuristics" because they are more in the nature of rules of thumb than specific usability guidelines. These principles where written by Jakob Nielsens
Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
Match between system and the real world
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
User control and freedom
Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
Recognition rather than recall
Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
Flexibility and efficiency of use
Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
Help users recognize, diagnose, and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.
Dont make users think
Many people in the usability community regard Steve Krugs book Dont Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition as the laypersons usability bible. This book explains briefly and concisely everything one needs to know about getting started with web usability. For more advanced users, its a great refresher course.
here are some of the information that this book entails.
1. Usability Means
Usability means making sure something works well, and that a person of average ability or experience can use it for its intended purpose without getting hopelessly frustrated.
2. Web applications should explain themselves.
As far as humanly possible, when I look at a web page it should be self-evident. Obvious. Self-explanatory.
3.Dont Make Me Think
As a rule, people dont like to puzzle over how to do things. If people who build a site don’t care enough to make things obvious it can erode confidence in the site and its publishers.
4.Dont waste my time
Much of our web use is motivated by the desire to save time. As a result, web users tend to act like sharks. They have to keep moving or theyll die.
5.Users still cling to their back buttons
Theres not much of a penalty for guessing wrong. Unlike firefighting, the penalty for guessing wrong on a website is just a click or two of the back button. The back button is the most-used feature of web browsers.
6.We are creatures of habit
If we find something that works, we stick to it. Once we find something that works — no matter how badly — we tend not to look for a better way. Well use a better way if we stumble across one, but we seldom look for one.
7.No Time for Small Talk
Happy talk is like small talk content free, basically just a way to be sociable. But most Web users dont have time for small talk they want to get right to the beef. You can, and should, eliminate as much happy talk as possible.
8.Dont lose search
Some people (search-dominant users), will almost always look for a search box as they enter a site. These may be the same people who look for the nearest clerk as soon as they enter a store
9.We form mental site-maps
When we return to something on a Web site, instead of replying on a physical sense of where it is, we have to remember where it is in the conceptual hierarchy and retrace our steps.
10.Make it easy to go home
Having a home button in sight at all times offers reassurance that no matter how lost I may get, I can always start over, like pressing a Reset button or using a Get out of Jail free card.
Usability debate - How Little Do Users Read?- Jakob Nielsen
People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences. In research on how people read websites we found that 79 percent of our test users always scanned any new page they came across; only 16 percent read word-by-word. (Update: a newer study found that users read email newsletters even more abruptly than they read websites.)
As a result, Web pages have to employ scannable text, using highlighted keywords (hypertext links serve as one form of highlighting; typeface variations and color are others), meaningful sub-headings (not "clever" ones), bulleted lists, one idea per paragraph (users will skip over any additional ideas if they are not caught by the first few words in the paragraph), the inverted pyramid style, starting with the conclusion and half the word count (or less) than conventional writing.
We found that credibility is important for Web users, since it is unclear who is behind information on the Web and whether a page can be trusted. Credibility can be increased by high-quality graphics, good writing, and use of outbound hypertext links. Links to other sites show that the authors have done their homework and are not afraid to let readers visit other sites. Users detested "marketese"; the promotional writing style with boastful subjective claims ("hottest ever") that currently is prevalent on the Web. Web users are busy: they want to get the straight facts. Also, credibility suffers when users clearly see that the site exaggerates.
Designing for users
Usability testing is a technique used in user-centered interaction design to evaluate a product by testing it on users. This can be seen as an irreplaceable usability practice, since it gives direct input on how real users use the system. This is in contrast with usability inspection methods where experts use different methods to evaluate a user interface without involving users. Usability testing focuses on measuring a human-made product's capacity to meet its intended purpose. Examples of products that commonly benefit from usability testing are foods, consumer products, web sites or web applications, computer interfaces, documents, and devices. Usability testing measures the usability, or ease of use, of a specific object or set of objects, whereas general human-computer interaction studies attempt to formulate universal principles.
I am going to look into more depth Design is history. I wanted to research the history of design because I i find it very interesting to see the techniques that designers used in before the 1500s.Design is History, is a great overview on centuries of design. Part of the graduate thesis of designer Dominic Flask, Design is History was created as a teaching tool for young designers just beginning to explore graphic design and as a reference tool for all designers. It is supposed to provide brief overviews of a wide range of topics rather than an in-depth study of only a few. It is a constantly evolving, changing, expanding reference library.
Design is history?
A designer. A curious individual. A friend. I have always had an interest in creation as a form of expression. Eventually that love evolved into an interest in visual material and the desire to communicate. Since then I have dabbled in photography, painting, illustration and graphic design. I work as a graphic designer and spend my life enjoying it as much as I can. I have a desire to teach and thus have been on the path to a career in education for the past several years. I created this site in an effort to share with others what I have learned on my own.
1450 printing techniques
I decided I wanted to look at 1450 printing techniques to see which techniques they use just for some inspiration for my own typography for my client website.
There are a variety of printing techniques that designers can use to solve problems and create visual materials. Some are older than others, some are not as easily available as they used to be and others are much more expensive and often out of a clients budget. Regardless of the specifics or availability, all of these types of printing are still in practice today. It is important to know what you can do with printed materials in order to select the best possible materials and processes for the project
A form of letterpress, Wood Block printing is one of the oldest techniques for printing and has a long history or development in both Europe and Asia. It is a relief process in which an image is carved in reverse into a piece of wood, inked up and paper is pressed down on top of it to transfer the ink and image. It is one of the rarest forms of printing in use today, due primarily to time consumption. However, there are many sets of type still in existence that were created from woodblocks and are often used in letterpress poster printing. For more information on wood type visit the Hamilton Wood Type Museum.
Invented in the 15th century, movable type is the process of setting type by hand for printing on a letterpress machine. The type can be made of either wood or metal and letters were cut individually by craftsmen called punch cutters. This style of printing was the first developed that could rapidly, a relative term, produce multiple copies of lengthy printed materials and books. It remained the standard printing technique until photo typesetting came about in the 1950s.
Letterpress is still alive today, although it exists on a much smaller scale and usually only in specialty shops. The process often now involves photopolymer plates that can translate a digital design into a raised plate for use with vintage presses. It has seen a revival of success in recent years in the fine art, craft, and design worlds and is often used to create wedding invitations and posters. However, it remains a very flexible and reliable printing method that can be used for almost anything.
Phototypesetting has all but been rendered obsolete by the personal computer and digital typesetting, but for several decades it enjoyed a success as the standard in typesetting and printing. It is a process in which the type is generated on a photographic piece of paper. The paper was processed and ready for paste up, which is the process of creating a layout. When a layout is camera ready it was photographed to create a negative that could be used for offset printing.
Offset printing is still the most commonly used method of printing and is often called offset lithography. Offset printing is created using plates generated for each color used in the printing process. Some projects may call for 2 colors, some may use a standard 4 color CMYK process and others can require even more than that with specialty spot colors, varnishes and a variety of coatings also available. There are two kinds of offset printing called Sheetfed, in which individual sheets are fed into the printer, and Web, which prints from large rolls and can be used to quickly produce very large quantities of printed materials such as newspapers.
Typically operating with web presses, flexography does not use the standard plates of offset lithography. Instead it uses rubber plates and water based inks which dry quicker and allow for faster production times. Faster drying times also allow for more effective results on materials like plastic which does not absorb ink like paper does.
Engraving is perhaps the most expensive of all printing techniques as it is also one of the most time-consuming. It is typically used for fancy gala invitations or business cards of high-ranking officials in large corporations. The engraved image is first carved by hand or machine onto a metal plate. The engraved spaces are filled with ink and the paper pressed on top of it. The result is slightly raised, crisp images and saturated colors that are nearly impossible to reproduce with other techniques.
Thermography may look and feel a lot like engraving when the final product is produced, but the details that are present in the engraving process fall short in thermography. While the details may only be noticed by designers, typographers and people who pay close attention, they are noticeable. However, thermography is much more cost effective. The process involves laying down ink, adding thermography powder, then using heat to raise the image slightly off of the page.
Silkscreen printing, or screen printing for short offers a wide range of brightly colored inks and is often used for printing t-shirts, posters and other promotional materials. The process involves a design being laid on top of a screen (originally made of silk although a variety of materials are now used) which is coated with photo emulsion and exposed to light. The emulsion that is exposed hardens and the rest can be washed away leaving a stencil of sorts that ink can be pulled through using a squeegee.
The common household printing solution, inkjet is a feasible solution for small print runs and is available to the general public at an affordable cost. The process involves a printer which communicates digitally with a computer of some sort and physically sprays the ink onto the paper. It normally is used with 4 to 8 inks in a CMYK process and can produce richly saturated colors on a variety of materials
Digital printing is a process that uses toner, rather than ink, which sits on top of the piece of paper instead of being absorbed by it. While the quality has increased dramatically since its inception, it still can not match the quality of offset lithography, especially in small details, typography and color-matching. The fact that they do not require unique plates means that they can create individual designs that may have varying details quickly and at a lower cost.
Methods of testing your website
There were almost no good options for testing cross-browser compatibility of websites. The tools out there usually had significant drawbacks either in cost, capabilities, or time required. Lately, though, there have been a lot of newcomers to the browser testing world, some of which offer truly excellent services.In this section I have listed 7 fresh and simple tools for cross-browser compatibility testing, tools that actually make this stuff pretty easy. Not only that, but every single one of these tools can be used for free.
#1- Xenocode Browser Sandbox
The Xenocode Browser Sandbox is a game-changer for browser testing on Windows-based machines. With a single click of your mouse you can have an open and working browser without any installation. You can test in various IE versions, Firefox, Google Chrome, and even Safari. And really test, too, not just screenshots. To top everything off, the entire service is provide free of charge. Zip, nadda, nothing. Alas, this isn’t yet the perfect solution. There is currently no Macintosh support, which is definitely a significant problem. I’ve heard rumor that this may be coming in the future, though, and at that time this service will be in a class of its own.
#2- crossbrowser testing
Free 5 minute test sessions for registered users, and a lot more than that for paid users. CrossBrowserTesting.com makes things as easy as logging in and selecting an available machine with the browser/os you want. Once you pick your machine and browser you can begin your testing. You can use a web-based java applet to connect to their remote test machines, or you can use a local VNC client if you have one installed. Their system allows full testing of a sites interactivity and, like Xenocodes solution, is not just screenshots.
This is a free downloadable windows program that is still in the early stages of development. That being said, it is a single free resource that will allow you to fully test all of the relevant versions of Internet Explorer. Just download and install their free browser, and you can easily select which IE rendering version you want to browse in. The program even allows comparing two different versions side-by-side. Did I mention its free?
#4 - BrowsrCamp
With all of the IE-Only test sites out there, it was about time someone joined in and created a site that allows testing on Safari/Mac. The free version of their service offers near-instant screenshots on the newest stable release of safari, and though its lacking a bit in browser versions it definitely makes up for it in rendering speed. For a few dollars extra, they offer the ability to take over an entire machine and perform much more in-depth testing.
#5 - Litmus
Over a period of just a few months, Litmus has risen in popularity to become one of the most favored cross-browser testing tools on the market today. Unfortunately, their free options are very limited and only allow testing in IE7 and FireFox 2. The paid version of their app is significantly more robust, and allows testing in dozens of browsers and even email clients. Unfortunately again, with a single-user subscription starting at $49/mo, this isn’t cheap either. For those who need a robust test suite, though, it can be worthwhile.
#6 - NetRenderer
NetRenderer is a slightly more humble-looking option for testing IE compatibility. Like many of the other services, NetRenderer creates screenshots of your website in various browsers. It currently supports everything from IE5.5 all the way to IE8, and creates your screenshots very quickly without needing to wait.They also provide a browser toolbar that allows you to quickly test any of the pages you are visiting with their service. This is also a free service, and they don’t even offer a paid version of the tests.
#7 - BrowserShots
BrowserShots has become one of the most common methods of testing lately, and with good reason. They allow testing in almost any browser/os, including some very rare combinations. The free version of the app only has one limitation- you must wait for paid users to get access first. Because of their popularity, though, it can be very slow to receive the test screenshots at certain times of day. Since they rely on member computers to provide the screenshots, the more popular the browser/os combination you select the faster youll receive your renders. Unless everyone else is trying for the same one :-)
Promoting your website for free
Now we have created the countryside NI website, now what? I do a search for our website but it does not appear in any search engine. It is not in Google, Yahoo! or any other directory. There are a lot of services that can help but they cost money. Social networking is a good way to promote your site which I discussed earlier but sometimes people do not have the time for that. What can be done to help promote your website without spending a whole lot of time and money? And for free, fast and easy.
1. The Best Free Search Engine
It is no secret, Google is the most popular search engine. From the novice to the expert; young and old; millions of people use Google to find what they are looking for. So getting your website indexed is very important. The best part, submitting to Google is free, fast and easy. However, before you submit you should search Google to find out if your website is already in Googles index. To do this:
Go to Google.com and enter your domain name into the search box.
When entering the domain name type it exactly as it was registered. For example, if you wanted to find out if MakeUseOf was indexed in Google you would type www.makeuseof.com
If your site was indexed the first result will be your domain name. In this case you do not need to resubmit.
If you site was not indexed, submit using the form above. It may take up to 3 weeks for your site to get indexed. Dont keep resubmitting during that time. If your site is not indexed after 3 weeks, resubmit it.
2. The Best Free Directory
The next place to promote your website is Yahoo! Although it is not as popular as Google, Yahoo! is the best directory. It is also free, easy and fast to submit your site to Yahoo!.
Just like in Google, you should check to see if your website is already in the Yahoo! index. If your site is listed you do not need to resubmit. However, if your site is not found make sure to add your site to Yahoo!, rechecking in a few weeks to make sure it has been indexed.
3. Email Signature
At the bottom of your email, add a signature that includes your domain name. Just in case you need help with adding an email signature Ive added some information for the most popular applications:
4. Yellow Pages Directory
Yellowpages.com has a free listing that will remain active for 12 months. This is a good place to promote your site - and it is free, fast and easy.
5. Google Local Business
Last, but definitely not least - Google Local Business. When you submit your website to Google Local Business, it is eligible to rank in the local business section. The section is displayed before the organic search results, toward the top of Google. For example, I did a search for: dentist in dana point ca. Local business search is displayed just below the sponsored link section, with a map inserted to the left of the listings.
If you are going to submit to Google Local Business you will need either a business phone number or a business mailing address. Toward the end of the submission process you will be given a PIN number. You will need to use this PIN to complete the submission. If you opt for a postcard, the PIN will be mailed. However, choosing the phone option, the PIN will be displayed and an automated phone call will be made. Importantly, if the number is not a business line you will have to take the postcard route. Either way, it is free, fast and easy.
Well thats it times up! are you ready? do you feel lucky? its deadline time!!! eeeekkkk.. This week we had to create a screencast and finish up our clients website to present to them that friday, there were late nights, alot of red bull for this time right now for our feedback to get our rewarding comments for our hard work! from our client, the day came and guess what? THE CLIENT DID NOT SHOW UP!! can you believe it? very unprofessional of our client to do so!! well thats what the industry entails. so all that hard work, late nights and gallons of redbull we did not get any usefull feedback. So this week I am going to research how to work with bad clients and how to make it better for yourself as a web designer.
It is often the case that designers are competing for projects, and the client is selecting who to work with based on experience, rates and other factors. At the same time, designers should be deciding if the client is a good fit for them. While there are many ways to determine this, there are some classic red flags to look for... things a client might say that are a sign of only more trouble once the project is yours. If you hear any of these red flags, it certainly doesn't mean you should automatically end the relationship. Use your judgement and the look at the situation as a whole before making decision.
1. Everything is Easy or Quick
We've all heard it before... I just want a simple website or Can you design a quick poster? In some cases, the client actually thinks something is easy because they don't have experience with design. In other cases, the client may be trying to downplay what they need in order to keep your costs low. Either way, it is a red flag that can first be handled with an explanation of why the project or task is time consuming. While we don't need clients to completely understand every technical aspect of the design process, or that we may stay up until 4 A.M. obsessed with their project, we also don't want them thinking we're just throwing this stuff together. See how the client reacts to your explanation to determine how to proceed.
2. Promise of Future Work
Potential clients will often try to obtain your services at a lower rate by promising to hire you for projects in the future. While it is up to your judgement to determine whether or not the offer is genuine, remember the only guarantee (or close to one) is the initial project. Even if a client is sincere about their intentions of working with you on an ongoing basis, it will ultimately be the work you do for them and how your relationship progresses that decides if you continue to work together. If you feel the client has good business sense and that there really is potential to gain a long-term client, giving them a break on the first job may be worth the risk. Just remember there is always a chance you never hear from them again.
3. Unrealistic Deadlines
Be wary of clients that want everything ASAP. Sometimes turning down such work is easy, because what they want in the time they want it just can't be done. Other times, it is possible to pull it off but only if you sacrifice your current work (and existing clients) to get it done. Keep in mind that a client that wants their first project done right away will probably want their next one finished just as quickly, always leaving you scrambling to finish work. If you really want or need such a project, consider charging rush fees and explain that you have to put other work aside. You may also want to find out why the work needs to be completed so quickly to determine if this is a trend or a one-time rush job.
4. Questioning Your Rates
Look out for clients who question your rates, as that is an early sign of distrust. There is a nothing wrong with a client telling you they can't afford what you have quoted, but that is different from them telling you it shouldnt cost so much. Clients should understand you are quoting fairly and accurately (assuming you are) based on the scope of the project. While they will most likely get a wide variety of quotes from other designers, your costs coming in higher doesn't mean you are cheating them. Finalizing a rate for a project is one of the trickiest aspects of landing a deal, but it is also a good test of how effectively you and your client can communicate.
5. They Fired their Last Designer
This is a tricky one, because you will probably only hear one side of the story, and it will be about how bad their last designer was. This may be 100% true and you might be just the designer to step in and save the day. Remember to also question what happened with the last designer... was the client too difficult to satisfy? You probably shouldnt just walk away from a job if you hear this, but take a look at the full story. Does the client also have unrealistic expectations or confusing requests? Is it difficult to agree on the terms of the contract? Find out what went wrong so you're not next.
6. You Don't Get It
Youve done many projects in the past. You're great at listening to your clients requests and coming up with a plan. Then how come you have no idea what this new client wants after several discussions? A client who can't clearly convey his or her goals and expectations will probably be difficult to communicate with throughout the project.
7. The Disappearing Client
Many designers have experienced projects that drag on and on, with little or no communication for weeks or even months at a time. Often, an early warning sign of this is the same behavior during the early stages. Does the client respond promptly when you call or email with questions, or do you wait too long and have to follow up before getting answers? Sometimes this is a sign that they are speaking with several designers and shopping for the best price, or perhaps they are too busy to be committed to the job at this time. If you see this problem developing but want the work, consider putting a project schedule in your contract that includes deadlines for the client, with cancellation clauses.
8. Spec Work
One of the easiest red flags to spot is the request for spec work. This means a client asks to see designs for their project before having to make the decision to hire you. Since they don't intend to pay a fee for such work, you may invest time and resources without getting anything in return. You should be selected based on your portfolio and experience, and come to an agreement regarding payment before starting on design. It is also likely that a client has asked several designers to come up with concepts, while spending little time with each of them to explain what they are looking for. In the end, both parties benefit by choosing to work together from the start.
9. Unorganized from the Start
Watch out for clients who appear Unorganized from day one. In order to finish a project on time and on budget, both designer and client need to be organized and able to communicate. If a project outline from a client is unclear, or if they cannot provide content on time, it may be a sign that the entire project will be frustrating.
10. Trust Your Gut
The last red flag is that gut feeling that a client is trouble. Trust your instinct, especially if you have already worked with a variety of clients. This may be more difficult when starting out, but as you take on more projects, especially those you wish you had walked away from, you will learn when to turn down a job based on any of the factors above and your own experience.