PLA N T E R E R
O G S Å
D I N
M A D
Final project | Århus Business Academy
http://wp.cat.dk/ — valid until 01.10.2010 Author: Bogdan Alexandru Prigorie Company: CAT-productions Type: confidential
|
|
|
Tutor: Louis Thonsgaard
Project period: 02.2010 - 10.2010
Date: 20.05.2010
|
Signature:
Preface My name is Bogdan Prigorie and I am a Multimedia Design & Communication student at Århus Business Academy, 4th and last semester of the AP degree program. 1. Personal design portfolio www.prigix.com 3. CAT Productions www. cat.dk 2. Design team for most of the projects that were part of our AP Degree program. The other members of the team are Stilyan Rusev and Bianka Banova.
After a few years of working on various design projects as prigix1 or as part of websynth2, I finally got the opportunity to work as myself through a 3 ¹⁄₂ month internship at CAT Productions3. The gained experience and knowledge have surpassed any expectations, succeeding in being a key person for developing some of their most important multimedia projects. With no further ado, in the next pages I will present and dissect the creation process of one such product that enabled me to broaden my horizons and become a true multimedia designer.
I would also like to use this opportunity to thank Louis Thonsgaard, Hans Nielsen and Henning Christensen for the support, mentorship and guidance.
Table of contents Stage 1: Pre analysis......................................... 5
Presentation design...................................... 24
Project description....................................... 6
Navigation structure.................................. 24
Target audience............................................ 6
Graphic design............................................ 24
Project plan................................................... 6
Web layout analysis..................................... 34
Stage 2: Research........................................... 11
Golden ratio.............................................. 34
Vision statement........................................ 12
Symmetry.................................................. 34
Mission statement...................................... 12
Stage 3: Completion...................................... 37
Project message.......................................... 12
Content Management System.................... 38
Communication environment.................... 12
Thematic framework.................................. 38
User profiles and scenarios........................... 13
Cascading Style Sheets................................. 39
First target group, 6-18 years old................ 13
CSS for a cross-browser web site................ 39
Second target group, >25 years old............. 14
CSS for content management.................... 40
SWOT analysis............................................ 15
Styling up a web page................................. 41
Sociological research.................................... 16
Usability testing........................................... 43
Needs model.............................................. 16
Usability test results................................... 44
Society logic............................................... 17
Design manual.............................................. 47
Privacy and security issues.......................... 17
Web site colors............................................ 48
Intellectual property and copyrights........... 18
Web site measurements................................ 49
Trend research and implementation........... 19
Web content guidelines............................... 50
Stage 3: Design.............................................. 21
General conclusion...................................... 52
Information design...................................... 22
Bibliography................................................ 53
Header and menu items............................. 22 Content and sidebar................................... 23
Stage 1: Pre analysis
5
Chapter 1: Pre analysis
Project description “Planter er også din mad!” was started by 'Fødevareministeriet' and 'Kulturministeriet', but also involving 'Kulturarvsstyrelsen' and 'Planteavlsdirektoratet'. The purpose of this project is to develop educational material for schools, gymnasiums and museums in Denmark to increase the knowledge of 'our living cultural heritage' and especially 'knowledge of the genetic resources of plants'. The realization of the project has been given to 'Dansk Landbrugsmuseum Gl. Estrup' in Auning, which is a museum for agriculture and cultural history of farming in Denmark, while the deadline is 1st of August 2010. The educational materials will be subject specific and will be interdisciplinary, integrating informal learning environments for schools, museums, retailers and producers, brought together on an online learning platform.
Target audience Because the project is an educational product, there will be two different audiences, those who will learn from it and those who will teach. The educational materials are to be used in public schools and the gymnasium. There will be three levels for the public schools plus one AT-level for the gymnasium. This means that the first target group will include children between 6 and 18 years old, while the second group will be comprised of adults which are at least 25 years old.
Project plan 4. The Holistic Open Multimedia development Method, as presented in the “Developing multimedia” book.
6
For our project planning, the HOME4 method was chosen, thus the process is organized in four main stages — Pre analysis, Research, Design and Completion —, each with its respective tasks as follows:
Chapter 1: Pre analysis
Pre-analysis 02.02: Introduction.
04.02: Project plan.
February 2010
10
11
12
4 15 1 6 13 1 17
18 22.02: Graphic design – the main concept and its process, additional themes.
03
06 07 08 09
18.02: Information design – select, brief and structure information/ establish navigation structure.
03.02: Project description/ Target audience.
05
Design
01 0 2
04
21 22 23 24 20 9 25 1
26
28 27
Research 08.02: Vision/ Mission/ Message statement. 09.02: Communication environment. 10.02: User profiles/ scenarios. 11.02: SWOT analysis. 12.02: Sociological research – needs model, society logic. 15.02: Privacy and security issues/ Intellectual property and copyright. 16.02: Trend research and implementation.
7
Chapter 1: Pre analysis
2 23 24 25 2 26 21 0 2 2
April 2010
11
5 16 1 7 14 1 18
19 8
13
26.04: Creating custom style classes for content management.
12
21.04: Additional XHTML/CSS programming, client and server side .
05.04: Web layout analysis – golden ratio, symmetry.
0
07 08 09 1 06 0
16.04: WordPress as CMS implementation/ installing the Thematic framework.
03
Design
05
Completion
01 0 2
4
7
28
30 29
07.04: Advertising materials and campaign (print/digital). 14.04: Web site design manual and guidelines.
Chapter 1: Pre analysis
Completion 03
11.05: Engage product test.
0
05 07 08 09 10 06
May 2010
14.05: Design project report and CD-ROMs. 19.05: Print project report and CD-ROMs. 20.05: Hand-in project.
11 1
2
13
15 16 17 1 8 14 19
23 24 25 26 2 2 27 21 2 0
01 0 2
4
8
29
31 30
03.05: Populating web site with content and media.
9
2
Stage 2: Research
11
Chapter 2: Research
Vision statement The vision of the projects is to make children interested in food and plants through a hands on experiences by visiting museums, where they can connect the present with the past, and get interested in the future. Moreover, a virtual learning environment will be created to act as a bridge between the different user groups, enabling them to acquire knowledge and share experiences.
Mission statement The project aims to facilitate children to acquire knowledge of 'our living cultural heritage' and especially 'knowledge of the genetic resources of plants' with the aid of modern and up-to-date tools and education materials.
Project message “Learn how and why to include vegetables in your diet for a healthier life!�
Communication environment
5. Styregruppen are in charge of creating a marketing plan until the official launch of the project.
12
The project will feature an online learning platform that will use the CMS power of WordPress and the functionality of the Thematic framework, thus being extremely accessible to people that do not have web development skills to update the content of the web site. Furthermore, there will be various illustrations, pdf's, video and other media that will enrich the user experience, while an advertising an marketing5 campaign will ensure the promotion of the project in teacher magazines and on different relevant web sites once released on the 1st of October 2010.
Chapter 2: Research
User profiles and scenarios It is imperative to understand the target audiences before we begin to make decisions regarding the final web product. The target audience may be existing users or, in the case of a new site, new users. User profiles (also referred to as user personas) are an excellent way to document and illustrate realistic sample users. User personas can be used in conjunction with user scenarios to offer a comprehensive picture of a sample user and their interaction with the site and help keep the project team and clients focused on the users and their needs.
First target group, 6-18 years old Maria Garde is a 15 years old girl enrolled at Svendborg Gymnasium. She has an older brother, while her mother works at the city hall and her father is an accountant. She is very cheerful and outgoing, but she also does her homework and has excellent grades. Being full of curiosity, she will keep asking questions and look for an answer whenever she is not sure about something. In her spare time, she likes to play with her friends, eat ice-cream, listen to music and sometimes her father drives the whole family to the shopping center. One day in biology class, the teacher presents to the class a new web site that they will use to learn more about the genetic origins of some well known plants, and how these are connected to Denmark's heritage. After the introductory part, they are asked to read a chapter about carrots and then make some exercises. Because Maria likes to learn about new things, she doesn't waste time and quickly finds the respective section with a minimum number of clicks. She finds it easy to go through the information and she especially enjoys all the colorful illustrations that support the content. After she is done, she downloads the exercise pdf and starts working with the newly acquired knowledge. When she is done, she finds that she has some time left, so she wants to share what she just learnt with her friends on Facebook. Maria thinks it is very easy to achieve this due to the one-click method incorporated in the web site, so she will definitely use it again when the time comes.
13
Chapter 2: Research
Second target group, >25 years old Søren Larsen is a 32 years old teacher at Handelsgymnasium in Horsens. He has a degree in Agrobiology from Aarhus University. He has a wife who is also a teacher, and a 5 year old daughter. They have a 4 room house on the outskirts of the city, and a big garden where Søren likes to grow his own vegetables. He also likes long walks at the beach, fishing and picnics. Moreover, he really enjoys spending time with children and teaching them more than just biology which sometimes is boring for them. One day he decided to take some radishes from his garden an have a practical lesson with one of his classes. He will talk about how they can help them stay healthy and grow big and strong, due to the Vitamin C concentration and lack of fat and cholesterol. The lesson will conclude with a baking session, in which the children will learn how to make a radish cake just like the people half across the world in China. Søren will prepare everything for the very special lesson and he will even take some photos and share the experience with other teachers through the web site. If everything will go smoothly and the children will enjoy it, he will even write a new chapter about radishes and post it on the learning platform. This will be considerably easy due to the administration panel and the power of the CMS, the only requirements being to write the actual content, upload some photos and use the right styles made available through the interface.
14
Chapter 2: Research
SWOT analysis Strengths • The reputation and experience of the involved parties; • Originality and innovation of the project; • Direct participation of the targeted audiences;
Weaknesses • Limited budget; • User testing difficulties due to the project's schedule; • Lack of brand presence;
• High quality content and media; • Technical advantages through the use of an intuitive CMS system;
Opportunities • Could include additional subjects and partners; • Possibility of expansion to other Nordic countries, becoming an international project; • Positive response to new ideas from end users;
Threats • Budget cuts; • Change in educational priorities and regulations; • New competitors may emerge; • Change in technology trends and developments;
15
Chapter 2: Research
Sociological research Before proceeding to any decision making, having a sociological research based on the needs and society logics of our target audiences will help us acquire a better understanding of our targeted audiences and how to implement the concept in a most suitable way.
Needs model 6. http://en.wikipedia. org/wiki/Maslow%27s_ hierarchy_of_needs
In order to establish the needs of the groups we are targeting, we need to use the Hierarchy of Needs6, which is a theory in psychology, proposed by Abraham Maslow in his 1943 paper “A Theory of Human Motivation�. Maslow subsequently extended the idea to include his observations of humans' innate curiosity. His theories parallel many other theories of human Developmental psychology, all of which focus on describing the stages of growth in humans.
Self-actualization Esteem Love/belonging
morality, creativity, spontaneity, problem solving, lack of prejudice, acceptance of facts self-esteem, confidence, achievement, respect of others, respect by others friendship, family, sexual intimacy security of: body, employment, resources, morality, the family, health, property
Safety Physiological
breathing, food, water, sex, sleep, homeostasis, excretion
In our case, the users from both our targeted audiences will seek the top level of the pyramid, searching for self-actualization and intellectual growth through the educational product we are developing. Thus, by using the online learning environment, they will acquire new knowledge and will expand their creativity with the help of various exercises, enabling them to achieve new heights.
16
Chapter 2: Research
Society logic Society logic is another essential part of a sociological research that helps establishing a marketing strategy. As different the basic human needs are, so are the society logics. Since the industrial revolution, sociologists have recognized and introduced three main society logics that can be recognized in nowadays life. The Industrial Society, the Dream Society and the Creative Man Society. The different society logics imply different methods of visual communication. For example, the Dream Society logic is driven by the emotional and social needs, satisfied by storytelling, human relationships and emotional context. But in our case, the group of people that we are targeting is relying to the society logic of the Creative Man which is driven by the highest need in the Maslow’s hierarchy – the need for personal growth. Such need is satisfied through expressing individualism and creativity. Considering the society logic that our target groups refers to, we need to develop a product that is creative and which can be individualized. Thus, there will be different templates for different age groups, the possibility to use various types of media and share with others through social networks.
Privacy and security issues Privacy and security issues are two different problems with different solutions. A security issue occurs when a hacker gains unauthorized access to a web site's protected coding or written language. Privacy issues, those involving the unwarranted access of private information, don't necessarily have to involve security breaches. By using WordPress as a CMS, the security is one of the best there are, due to the enormous community that is behind it and helped its development through the years, while the web server will be carefully chosen to minimize risks from their side. Moreover, the administrators that will need to keep the content of the web site up-to-date will have limited access to the database and other parts of the application that will present a high risk of breach.
17
Chapter 2: Research
As far as privacy goes, due to the fact that the web site is a free and open learning environment for anyone who is interested in carrots, peas and cereals, there will be no required registration, thus there will be no private data collected. Although, the “Lærervejledning” will be limited to teachers that will have a user and a password, in order to have administrator privileges over the content and media that is present on the web site. Furthermore, the online platform will work with Flickr, YouTube, Issuu, Facebook and RSS feeds, but at least for the launching version, comments and discussion will only be available in 'Lærervejledning'. Student projects, photos and video will not be present in the project, but there will be inspiration material to work with in Google Docs.
Intellectual property and copyrights Intellectual property refers to creations of the mind: inventions, literary and artistic works, symbols, names, images, and designs used in commerce. Intellectual property is divided into two categories: Industrial property, which includes inventions (patents), trademarks, industrial designs, and geographic indications of source, and Copyright which includes literary and artistic works such as novels, poems and plays, films, musical works, artistic works such as drawings, paintings, photographs and sculptures, and architectural designs. All the materials and media that will be present on the respective web site will be free to use by anyone, while the copyrights will belong to the project itself and its administrators who will create and maintain the content. In case of the media used through third-parties like Youtube and Issuu, these will be protected by the copyrights made available by the services that will host them.
18
Chapter 2: Research
Trend research and implementation Considering the different age groups of the targeted audiences, the web site needs to fulfill two design objectives at the same time. First, it needs to be professional, clean and highly usable as it is an educational7 web site, both for children and teachers. Second, it needs to be modern, alive and even playful, as long as it does not get in conflict with the first set of rules.
7. Showcase of educational web sites presented on Smashing Magazine http://www. smashingmagazine. com/2010/03/19/ showcase-of-academicand-higher-educationwebsites/. Fig. 2 and fig. 3 show examples of educational web sites as listed on Smashing Magazine.
Fig. 2
Fig. 3
A trend research has been made to have an update on the new8 web design trends that have emerged in 2010. By keeping in mind the two objectives stated above and the possible limitations of the Content Management System (CMS for short) framework, we decided that our project would benefit from the use of: serif fonts, texturized background, minimalistic and grid-based layout.
8. Web design trends as presented on Web Designer Wall http:// www.webdesignerwall. com/trends/design-trendspredictions-in-2010/.
• Serif fonts (Fig. 4) - in the last decade, most web sites were designed in either Verdana or Arial (sans-serif fonts), but that is going to change in this new decade. Serif fonts will get more attention. Even though not all sections of our product will use serif fonts, it will help differentiating the materials for students from those of the teachers. Fig. 4
19
Chapter 2: Research
Fig. 5
• Texturized background (Fig. 5) - subtle and texturized (particularly the light noise) backgrounds will gain more popularity this year, slowly replacing other kinds of backgrounds like those that are imagebased. Furthermore, considering the style of our product, a very soft effect will improve the white space and it will give a more tactile sensation. • Minimalistic and grid (Fig. 6) - minimalist and grid designs are not today’s new. They have been popular for the past couple years and it is predicted to grow even more in 2010. Moreover, it will ensure the clean and structured feel of the web site.
Fig. 6
20
Stage 3: Design
21
Chapter 3: Design
Information design 9. The ultimate in SEOready themes, Thematic is a highly extensible, WordPress Theme Framework featuring 13 widget-ready areas, drop-down menus, gridbased layout samples and plug-in integration. http:// WordPress.org/extend/ themes/thematic
Considering the use of a CMS framework9, the content of the web site will be split in four main categories: header(also including the menu), main content, sidebar and footer.
Fig. 7
Header and menu items 10. The labels and the actual page structure of the menu may change or be updated until the official project launch.
The header (Fig. 7) will hold the background texture and picture, the name of the web site, the menu10 and links to social networks. Lærervejledning: contains the materials and media needed by the teachers which are split in the same way as the student’s section: • Indskoling • Rodfrugter • Bælgplanter • Korn • Mellemtrin • Rodfrugter • Bælgplanter • Korn • Udskolingen • Korn • Gymnasiet • Korn Besøgsmuseer: information about partner museums and events.
22
Chapter 3: Design
Besøgsproducenter: information about related product manufacturers. Lærervejledning: contains the materials and media needed by the teachers which are split in the same way as the student’s section: • Indskoling • Rodfrugter • Bælgplanter • Korn • Mellemtrin • Rodfrugter • Bælgplanter • Korn • Udskolingen • Korn • Gymnasiet • Korn Facebook, Flickr, Youtube, Digg and RSS feed link that enable users to connect through different types of social communities and platforms.
content and sidebar The online learning environment will include different types of content such as text, images, .pdfs, movies and other. Moreover, there are four categories in which the information is brought together: undervisningsmateriale, lærervejledning, opgaver and info. Each of these will be identified by a specific icon11, color and in some cases, font. • Undervisningsmateriale • Lærervejledning • Opgaver
11. Although these are graphical elements, the icons are part of the information design due to the fact that these were already made, thus becoming prerequisites for my involvement in the project.
• Info
23
Chapter 3: Design
12. Serifs are known to make reading lengthy material, such as books and magazines, more sustainable for longer periods of time. It also helps with eye strain/fatigue, and we all know that we need our eyes! http:// www.thedesigncubicle. com/2008/12/10common-typographymistakes/
Moreover, the undervisningsmateriale will use serif fonts due to the big amount of text, thus easing12 the readability for children while the other sections of the web site will use sans-serif fonts. The sidebar will consist of different widgets that will add more flexibility and usability to the overall experience. There will be a widget for searching, one for an index of the chapters and lessons, another for showing the relevance of the current lesson to different subject (such as biology, Danish, history, mathematics) and so on.
Presentation design Navigation structure
13. On web sites that have a lot of pages, breadcrumb navigation can greatly enhance the way users find their way around. In terms of usability, breadcrumbs reduce the number of actions a web site visitor needs to take in order to get to a higher-level page, and they improve the findability of web site sections and pages. http:// www.smashingmagazine. com/2009/03/17/ breadcrumbs-in-webdesign-examples-and-bestpractices-2/
24
Due to the use of a CMS framework, the menu is horizontal, at the top of the page by default. Moreover, it has the ability to show menu items in drop down lists, on multiple levels. The menu is divided in two sections: the main navigation on the left, and the social network group on the right. Furthermore, there will be content dependent links such as Chapter index in the sidebar and breadcrumb13 trails under the main navigation, which will rely on the page that is active at a given moment.
Graphic design After all the research and communication tasks have been completed, the trends have been refreshed and the CMS framework has been visually deconstructed, we started adding graphic elements and giving visual weight to the different parts of the web site. The design needed to be simple, smart and compatible with the framework, thus I started with the navigation design, slowly moving to the header and content.
Chapter 3: Design
Fig. 8 illustrates the basic modifications and styles that have been applied to the Thematic framework.
Fig. 8 (Fig. 9) After deciding on the font characteristics and sizes, I incorporated sharp edges with round ones, as the web site wants to bring two different target groups together. Moreover, a color treatment has been applied to maintain the theme created by the icons mentioned earlier in the chapter.
Fig. 9
25
Chapter 3: Design
(Fig. 10) The menu style has been adapted to the CMS framework, and a photograph has been included in the header to further support the idea behind the project.
Fig. 10 (Fig. 11) I started expanding the design downwards to the content elements to have a better understanding of the design as a whole. The heading is highlighted by a colored background in the same style as the menu buttons. Moreover, a shadowed line has been introduced above it to create a more 3D, out-of-the-box effect. An image example is also present, featuring a soft border, following the main concept of the design.
Fig. 11
26
Chapter 3: Design
(Fig. 12) Another section has been introduced to fill the vast whitespace and to better mimic the actual content that will be present in the final product. Also, the heading have been changed. They now include a small version of the icons responsible for the different sections of the content categories.
Fig. 12
27
Chapter 3: Design
(Fig. 13) The headings now combine the colored background and the icon to further add weight and relevance. The header has been given a texturized background as a more discrete version of the colored photograph to create visual contrast.
Fig. 13
28
Chapter 3: Design
(Fig. 14) The header has been simplified and a footer has been added, the style following the header to create a whole, a contained layout.
Fig. 14
29
Chapter 3: Design
(Fig. 15) Index layout: The header has been modified to a color photo and a textured background, reducing contrast. Social icons have been added to the right of the main menu and the sidebar has been adapted to the theme.
Fig. 15
30
Chapter 3: Design
(Fig. 16) Teachers home page: A different content style has been created for the teachers, acting like an index of the whole web site, with relevant pictures and short descriptions for ease of navigation.
Fig. 16
31
Chapter 3: Design
(Fig. 17) To show the flexibility of the CMS, an alternate version has been created for a more focused target group that is comprised of users from udskoling. A bigger photo in the header, more cool colors and rounded corners have been added among other modifications to better suit the chosen age group.
Fig. 17
32
Chapter 3: Design
(Fig. 18) Even after the CMS implementation started and the design has been adapted, there have been minor changes to the concept to better suit the framework and its function. Thus, until the project will be completed, other adjustments to the design may occur. Fig. 18 shows the index page of the web site, as of 02.05.2010. For the latest version, visit the online beta site at http://wp.cat. dk.
Fig. 18
33
Chapter 3: Design
Web layout analysis Fig. 19 illustrates the different types of techniques used to create a balanced layout. The analysis is based on the final layout concept, but the latest version of the design may present small modifications. Moreover, the actual layout has been dimmed to 75% of it’s opacity in order for the frames and numbers to stand out.
Golden ratio The golden ratio (also known as the golden proportion, divine section, etc., or as the rule of third, which is more popular, but slightly different) is used in various fields like mathematics, painting, architecture, music and web design to create balanced and harmonic works, that have a natural flow. In this project, the main content width is in golden proportion with the total width of the web site: 610 px * 1.618 (golden ratio) = 986,98 ~ 985 px.
Symmetry Symmetry is a way of organizing the composition in order to make it harmonic and aesthetically pleasing by means of proportion and balance. Three of the basic symmetry types are translatory, rotational and axial. The translatory type consists of the repetition of an object using the formula “1+1+…”. As you can see in Fig. 19 (indicated by the numbers 1, 2, 3 and 4), the symmetry is present in the main menu buttons, social network icons, main content and sidebar headings. The axial symmetry consists of two mirroring parts which start out by counterbalancing each other compositionally, thus often creating compositions that are statically in balance. In our case, whenever a picture is present in the main content, it creates axial symmetry with the text that flows on its side.
34
Chapter 3: Design
Fig. 19
35
Stage 3: Completion
37
Chapter 4: Completion
Content Management System Picture copyrights go to http://fran6. deviantart.com/art/ WordPress-Wallpaper-onWood-70739548.
14. In computing, a content management system (CMS) is a document centric collaborative application for managing documents and other content. A CMS is often a web application and often it is used as a method of managing web sites and web content. http://en.wikipedia. org/wiki/Content_ Management_System 15. As a result of the survey on CMSwire. http://www.cmswire. com/cms/micro-cms/ results-most-popularcms-in-technoratistop-100-002198.php
16. A theme framework is a theme that is designed to be a flexible foundation that can serve as a parent theme for building child themes. http://codex.WordPress. org/Theme_Frameworks
38
Using a CMS14 to power an online product is both easy and demanding. It will greatly improve the consistency of the web site, help with Search Engine Optimization and exponentially ease the process of updating and maintenance. On the other side, it is more complicated in the development phase, because it is a very extensive and complex system that needs to be adapted to the project needs, without compromising its functionality. For the project at hand, WordPress has been selected from the multitude of available CMS’s because it is simple, extendible and open source. Moreover, it is one of the most popular15 platform used by bloggers and businesses alike. Moreover, WordPress is well known for its ease of installation. Under most circumstances installing WordPress is a very simple process and takes less than five minutes to complete.
Thematic framework Although it is possible to create a WordPress theme from scratch, considering the magnitude of the project, it would be unproductive and time consuming. The alternative is to use a framework16 as the basic structure and functionality of the web site, and build the rest from there. The chosen framework is Thematic which is a free, open-source, highly extensible, search-engine optimized WordPress Theme Framework featuring 13 widget-ready areas, grid-based layout samples, styling for popular plug-ins, and a whole community behind it.
Chapter 4: Completion
After the WordPress CMS has been installed with the Thematic framework as its skin, we have started customizing it to the project’s needs. The Photoshop layout has been sliced and optimized for web, then all the files have been given to the PHP17 developer in order to prepare the core of the web application.
17. Due to the complexity of the core programming, a freelance expert has been contacted to lay out the foundation of the web site.
Cascading Style Sheets Once the layout structure and supporting code has been adapted, it was my duty to ensure everything is in its place and cross-browser. All of this was achieved through the use of CSS12 files. Moreover, there was a need for special styles that will be available for administrators to use through the admin panel when inserting new content on the web site, by selecting them from a list.
CSS for a cross-browser web site Because Thematic is such a well developed framework, there is little to no headaches when it comes to style sheets, and because they are split up on categories, it is very simple to find the file that you need. The parent file is called style.css which keeps the most important styles that need to be customized, but it also imports all other CSS files needed to reset13 the default browser values, the typography attributes, the grid system, image and plug-in styles: @import @import @import @import @import
“../thematic/library/styles/reset.css”; “../thematic/library/styles/typography.css”; “../thematic/library/layouts/2c-r-fixed.css”; “../thematic/library/styles/images.css”; “../thematic/library/styles/plugins.css”;
18. Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language.
19. The goal of a reset style sheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. http://meyerweb.com/eric/ tools/css/reset/
Although the reset.css does most of the work when it comes to cross-browser issues like margins and padding that differ from one browser to another, there was one bug that was missed out. The problem occurs in Safari, due to the use of floats on the main content and sidebar. Thus, it looks off-centered, the content being shifted almost outside the screen space.
39
Chapter 4: Completion
After some thought and unsuccessful try-outs, I reached a solution which consists of clearing the floats in the main wrapper, thus removing the unwanted space.
CSS for content management (Fig. 20) The home page of the administration panel in WordPress.
Fig. 20
Due to the fact that after the completion of the project all administrators will have little to no HTML/CSS knowledge, we need to offer them a way to style their content in a very approachable way. Although it is easy to use the WordPress built-in admin panel, it doesn’t give a lot of options for customizing the content on a page. To solve this problem, we used a plug-in that allows us to create styles to be later shown in a drop-down list when adding/editing a page. This way, all they need to do is choose an appropriate style for the desired effect. (Fig. 21) The Edit page, showing the drop-down menu with all available styles for content customization.
Fig. 21
40
Chapter 4: Completion
Even with CSS styles made easy, there still is no complete control over the final outcome if the administrators will not pay attention to the styles they select. Further more, if they will insert media from outside the CMS like YouTube or Issuu, they need to be careful how they customize it on the respective web site, because once embeded, the style cannot be changed from the WordPress administration panel.
Styling up a web page Through the process of adding the content needed to launch the product, I have developed different styles for the various page elements that will help future administrators upload content and at the same time, maintaining layout consistency throughout the web site. Although this will be limited by the lack of custom XHTML, most of the problems have been solved by using different display types and floats assigned to paragraphs and some other automated tags. The following code extracts show some of the classes and how they work: .header-green, .header-blue { clear:both; color:#FFFFFF; display:inline-block; height:30px; margin-top:35px; padding-left:50px; width:600px; z-index:800; }
These are the section headers, holding the title and respective icon/color. A display:inlineblock is used because we have a background image that needs to completely be visible. Otherwise it would be cut off wherever the title ends. The margin acts upon the box itself while the padding is for the title, in order not to overlap with the icon.
.header-blue { background:url(“images/headblue. png”) no-repeat scroll 0 0 transparent; font:20px “Times New Roman”,Times,serif; } .pfloat{display: block; width: 285px; float: right; padding-top: 10px; }
When this style is selected, the paragraph floats to the right side of the page. This is needed especially when there has to be an embeded flash object such as an Issuu pdf with a description on its side.
41
Chapter 4: Completion
.entry-content div embed, .entrycontent div object { margin-left:-10px; position:relative; } .entry-content embed, .entrycontent object { margin-left:-1px; position:relative; }
.opgavedld:link, .opgavedld:visited, .opgavedld:active { background:url(“images/opgavedld. gif�) no-repeat scroll 0 0 transparent; clear:both; color:#E2001A; display:block; float:right; font-family:Verdana,Geneva,sansserif; font-size:14px; height:32px; margin-bottom:18px; margin-top:-15px; padding:8px 0 0 40px; text-decoration:underline; width:auto; } .opgavedld:hover { color:#E85236; } .opgavedld:active { color:#666666; }
42
Because custom styles can be applied exclusively to paragraphs through the administration panel, the only solution for styling flash elements was by accessing the embed and object tags directly. I used CSS specificity (the more specific a selector, the more preference it will be given when it comes to conflicting styles) to style the same tags in two different ways because an Issuu pdf and a Youtube video needs to be displayed differently. Luckily the automated code for embeding videos from Youtube uses a div, so the paths are not the same. The following three sets of styles are made for customizing a download button used for indicating the presence of an exercise file that needs to be copied to a local computer. All link instances - link, visited, hover and active - are the same, except the text color which changes on mouse hover. As described, the button is comprised of a floated box with an icon aligned to the left of the text to which the style is applied.
Chapter 4: Completion
Other styles have been created for the various plug-ins and widgets that have been added to the WordPress framework to add more functionality and improve the overall user experience, while maintaining a design consistency. Some examples are as follows: .breadcrumb { background:none repeat scroll 0 0 #CCCCCC; border-bottom:10px solid #666666; padding:0 0 20px 25px; }
This style applies to a plug-in that generates the breadcrumb trail just below the main menu. Although the links inherit the style from the customized defaults, a gray border has been added to the bottom to separate the content area.
.flexistyle, .flexistyle ul ul { color:#666666; }
Flexipages is a widget that is used to display the subpages of the current page, as well as its siblings. The color has been changed to the default link value, and a indentation has been given to each sublevel for a better understanding of the relationship between the pages.
.flexistyle ul, .flexistyle ul ul { margin-left:20px; }
Usability testing In general, usability refers to how well users can learn and use a product to achieve their goals and how satisfied they are with that process. It measures the quality of a user's experience when interacting with a product or systemwhether a web site, a software application, mobile technology, or any useroperated device. It is important to realize that usability is not a single, one-dimensional property of a user interface. Usability is a combination of factors including ease of learning, efficiency of use, memorability, error frequency and subjective satisfaction. Furthermore, we have carefully considered all results of the preliminary user testing and we will decide which of them can be solved in a practical way, the objective being to improve the overall user experience.
43
Chapter 4: Completion
Usability test results There were a total of four people that participated in this preliminary usability test. Three of the users are from Romania and one from Denmark, one is a female and the other are males. The age range is between 20 and 32 years old. For the non Danish speakers, the web site was translated with the translation tool from Google. http://translate. google.com
• Please give me your initial impressions about the layout of this page and what you think of the colors, graphics, photos, etc. Most users think the background is too simple and cold, while the header is very lively and attention grabbing, considering that a different color or a pattern would be an improvement. Moreover, some of them think that there is too much text on a given page, and it hard to tell which is the active page. Overall, they agree that including media like Issuu and Youtube is a plus. Most of them also enjoyed the illustrations. • Without clicking on anything yet, please describe the options you see on the home page and what you think they do. The first thing thy recognized was the main menu at the top of the page and that the sections are visually divided by the use of different color. Some of them have noticed the breadcrumbs as well, while others do not recall ever seeing this element before. Again, it is impossible to tell the current page judging from the side navigation. Moreover, some of the users also recognized the social network icons. • Without clicking on anything yet, if you were exploring, what would you click on first? Half of the users would click on the first main menu item, while the others would either access the second or the last main menu item. • What do you think is the purpose of this site? All of the users consider the web site as an educational platform judging form the type of content and that it revolves around plants. • Who do you think this site is intended for? The majority thinks the web site is intended for children from the primary and secondary schools, while some of them even consider the teachers as a target audience.
44
Chapter 4: Completion
Yes
No
1. The overall site is attractive.
100%
0%
2. The site's graphics are pleasing.
100%
0%
3. The site has a good balance of graphics versus text.
75%
25%
4. The colors used throughout the site are attractive.
50%
50%
5. The typography (lettering, headings, titles) is attractive.
100%
0%
6. The homepage's content makes me want to explore the site further.
25%
75%
7. It is easy to find my way around the site.
100%
0%
8. I can get to information quickly.
75%
25%
9. It is fun to explore the site.
50%
50%
10. It is easy to remember where to find things.
100%
0%
0%
100%
12. Information is easy to read.
100%
0%
13. Information is written in a style that suits me.
50%
50%
14. Screens have the right amount of information.
25%
75%
15. The site is designed with me in mind.
50%
50%
16. The site's content interests me.
25%
75%
17. The site's content would keep me coming back.
25%
75%
18. The site has a clear purpose.
100%
0%
19. I always felt I knew what it was possible to do next.
50%
50%
20. It is clear how screen elements (e.g., pop-ups, scrolling lists, menu options, etc.) work.
100%
0%
11. The homepage is attention-getting.
45
Design manual
47
Design manual
Web site colors The colors that have been used throughout the web site are borrowed from the initial icons that were developed for this project, in order to maintain coherence among the different graphic elements and the project itself. Furthermore, there are a few shades of gray that are used for the background and black for most of the text. All color values are expressed in HEX code. #cccccc
#666666
1
2 3 4 5 6
#1e55a5
7 #e86f28
#5b4365
#57a954
#cccccc
8
#35gf65
The first color is actually a texture made by applying a noise filter to the base HEX value of #cccccc.
48
Design manual
WEb SITE MEASUREMENTS Due to the fact that we are using a CMS framework, the width of the web site is set to 960px by default, although it can be changed. In our case we just made a few minor adjustments to better suit the overall concept layout. Moreover, there is extensive use of padding(between 10px and 25px) on most of the elements to give more space to the content and make it easier to follow. 560px
140px
560px 37px
140px 235px
330px 25px
45px
32px 560px 25px 560px 25px
49
Design manual
Web content guidelines Additionally, there are other important elements that need to follow some guidelines in order for the web site to maintain a visually appealing design. Moreover, due to the fact that these elements will be added or edited by the future moderators, it is necessary that they will use the correctly throughout the web site, and always use the appropriate format and style from those that were carefully created and added to the style list, in the administration panel. • Title and title-serif must be used at the very beginning of a page, when a new chapter starts, followed — if necessary — by sub-title or sub-title-serif. • Header-blue, header-green, header-red and other styles that start with the word “header” must be used at the very beginning of a page if there is no title, and anywhere else when a new section starts. Furthermore, it is very important to use the headers appropriately, depending on the subject that follows, for example: header-blue must only be used together with a “Undervisningsmateriale” section. • Subheader-blue, subheader-green and other sub headers can be used when there is a break in the line of thoughts, but does not make another section. As the use of headers mentioned above, these are content dependant, thus they need to be used appropriately. • Paragraph and paragraph-serif must be used on all body text. Moreover, it is important to keep in mind that the “Undervisningsmateriale” uses only serif fonts while “Lærervejledning” uses sans serif. • Unordered, unordered-serif, ordered and ordered-serif are list styles. There are serif and sans serif style types for both ordered and unordered lists. Just like the paragraph styles, they must be used according to the web site section. • Img-border and img-right-border are image styles. The first one applies a frame border to any kind of pictures, while the second has an additional effect, it floats the image to the right. As an exception, illustrations do not require a border, thus they do not require these classes.
50
Design manual
• Opgavedld must be used whenever there is a link that enables users to download study materials, such as .pdf's. When integrating media like Issuu documents and Youtube videos, there are some special requirements in order for the styles mention in the previous chapter to work properly. • When choosing to embed an Issuu element, it is necessary to opt for a 600px or 300px width, two-up layout and a white background. Furthermore, you need to paste the copied embeding code using the HTML view in the administration panel. • In case you have to insert a Youtube video, make sure to choose a maximum width of 600px and de-select the “Include related video” check box. Just as the Issuu embeding, it is important to paste the code using the HTML view in the administration panel.
51
General conclusion More than three months have passed since I started my internship at CAT Productions and I feel that I reached another level of understanding the process, requirements and quality standards that are demanded by the current market. This was achieved by working on various types of projects, culminating with one of their biggest clients from this year, Gl. Estrup and their educational project that I have documented through this report. Moreover, with the knowledge and theory acquired during the last two years, and with the practical experience and guidance of the Art Director from CAT, I am now able to create a suitable and high quality multimedia product. The working environment and the positive attitude of the other employees have contributed to my real life experience both on a personal and professional level, thus knowing what it takes to be a real Multimedia professional in a full service advertising company.
52
Bibliography • Nyt Teknisk Forlag - Developing Multimedia - A Ho¬listic Approach by Marie Oosterbaan and Louise Harder Fis¬cher • Internet Marketing: Strategy, Implementation and Practice (3rd Edition) by Dave Chaffey • Creative man, The Copenhagen Institute for Futures Studies, edited by project manager Klaus Æ. Mogensen • Symmetry - the Forbidden Fruit of Picture Composition in Film by Louis Kristoffer Thonsgaard • Don't Make Me Think! A Common Sense Approach to Web Usability by Steve Krug • PHP with MySQL Essential Training by Kevin Skoglund • WordPress Codex http://codex.wordpress.org/Main_Page • Thematic, A WordPress Theme Framework http://themeshaper. com/forums/
53