Finalreport by ghania ahmed

Website URL: privat.bahnhof.se/wb166637/td2660/index.html

Student Names: Ghania Ahmed Ahmed El-Jabory

Class: CLmil-v11e

Tutor: Ditlev Skanderby

Group 13 CPH Business

TD2660 Tranen Drenge

Final Project Multimedia Design and Communication http://privat.bahnhof.se/wb166637/td2660/index_da.html Ghania Ahmed : http://web412.webkn.dk/Portfolio/Index.html

Student Names: Ghania Ahmed Ahmed El-Jabory

Ahmad El-Jabory: http://privat.bahnhof.se/wb166637/ahmad/portfolio/

Class: CLmil-v11e Tutor: Ditlev Skanderby URL: www.td2660.dk

Table of content 01 : Introduction Problem formulation Product

3 4 5

02 : Project Mangement Development Method SWOT Communication plan / Analysis Risk Analysis

6 7-8 9-12 13-14

03 : Analysis AIDA model Usercases User test Competitors Stakeholder Anlysis

15-16 17-18 19-20 21 22-23

04 : Design brief Design brief Selection of Design

24-28 29-32

05 : Design process Navigation diagram Wireframe Project Plan

33-34 35-36 37-38

06 : Design Design documentation 39-41 Logo proposals 42-46 Layout 47-48 Posters / Printed media 49 T-shirts design / Printed Media 50 SEO 51 07 : Conclusion Problem formulation Particular conclusion Sources Annex

52-54 55-58 59 60

#01 [Introduction]

Clear and accurate definition of a project is one of the most important actions you can take to ensure the project’s success. The clearer the target the more likely you are to hit it. Defining a project is a process of selection and reduction of the ideas and perspectives of those involved into a set of clearly defined objectives, key success criteria and evaluated risks. As every education Multimedia Design also has learning processes and one of the learning process is internship’s. We should have an internship in which we should work for a company and solve several different tasks that have purpose as the opportunity to practice our professional skills and have a sense of social within the industry. In the period of our internship we were working for a company named IT SHOPPEN, which is a company that handles different types of technology and design related projects and products. IT SHOPPEN creates website for private clients and alongside they sell products related to technology such as Laptops, Computers etc. During our internship, we have learned that design is a very important element, when you have to present or sell a website to a client. While completing our internship and working with different projects, we had been assigned to create a website for an existing club (TD2660) which is associated with our company. TD2660 is a community centre / club for the young generation where members of the community tend to gather for group activities, social support, public information, and other purposes. The aim is to create and work preventive activities are in accordance with the target group’s needs. This is their quote for their club “This approach enables the creation of a recreational that the target audience is perceived as a real alternative in relation to ‘hang on the street’. This is important because the streets are risks as unfortunate groups, crime and abuse. The aim is also that the target audience has something sensible to do in their spare time, they meet others and create relationships that they respect each other and that there is a good tone all the while”.

#01 [Introduction] Problem formulation Problem formulation is the most important factor for a project. This part of the project allows you to understand the main problem which the company is facing through the parts that we will be working on. This automatically shows what the main factors are that need to be improved or even developed in a new manner. The target group for Tranen Boys is mostly bilingual boys between 10-18 years who are vulnerable or in the gray area. By the end of this report these questions should be answered in the conclusion and the results should be shown in the report. Main overall problem: • How can we broaden TD2660’s popularity through the visibility of their website? 1. This is our main focus because TD2660 does not have an official website therefore their visitors / member’s level is on a low scale. 2. Popularity is very important for a company / centre, this is one of the main reasons why a company holds its place in the business therefore we have chosen to focus on their popularity. 3. This problem is for the centre owners overall. Sub Questions: • How can we make TD2660 more stable in the market business? • How can we make the users find the website easy to navigate through? • How can we make sure that this website becomes user friendly? ‘A problem well defined is a problem half solved’ -Unknown

#01 [Introduction] Product

Here is the list product that we intend to develop during the project: • An facebook page. • Online banners. • Offlines posters. • Offline T-shirts. • An official website for TD2660. www.td2660.dk/ We have chosen to create an outstanding professional layout for TD2660. To create a professional feel for the website we have decided to work on these parts of the website: 1. Information Architecture 2. Navigation 3. Tone (writing style) 4. Layout 5. Typography 6. Colors 7. Imagery We have chosen to work on the features listed above because these are in our point of view the most important parts for a website; these features allow the website to be user friendly look and feel for the users. Look-and-feel (Digital communication) describes the way the branding and communication messages are reflected the design of a website therefore these factors are our main focuses for the website.

#02 [Project Management] Development Method

MUL/MIL STUD 2011 (CL) / Resources / 1. semester / tr11mul02 - efterĂĽr 2011 / Project Management / Intro to PM

Development processes and methods allow to showcase the development of a project or a product and how the product got to the final chosen point. Development method is a very important factor in project management, which makes it necessary for it to showcase the exact steps taken in order to achieve the final point of the product. We have chosen to use a prototyping model for our project because in our consideration this is the most reliable method that we can use for this project. This method shows how we concluded to our last step of the process model and achieved the final decisive part of the project. How we implemented this prototype to our project in steps: 1.Designing a couple of different ideas for the website for our company. We put our ideas together and explained it to our company. 2.After designing our ideaâ&#x20AC;&#x2122;s we had to choose one of the ideas and build the website. 3.At the end we had to test the website to make sure that everything which we had to include in the website is included and the entire website works as accordingly.

All these steps were updated after receiving client feedback from a various customer which will use the website once it is completed. This involvement was a necessity which we have to precede because of our company but this part of the development process which a little difficult because we had to keep up with all the feedback from the client and make

#02 [Project mangement] SWOT anaylsis

MUL/MIL STUD 2011 (CL) / Resources / 1. semester / tr11mil02 - fall 2011 / Organization SWOT analysis (alternatively SWOT Matrix) is a structured planning method used to evaluate the Strengths, Weaknesses, Opportunities, and Threats involved in a project or in a business venture. A SWOT analysis can be carried out for a product, place, industry or person. It involves specifying the objective of the business venture or project and identifying the internal and external factors that are favorable and unfavorable to achieving that objective. Identification of SWOTs is important because they can inform later steps in planning to achieve the objective. SWOT analysis is an extremely major factor in project management because an SWOT analysis allows the company to see and understand what can be an improved to use as a defense to the threats which can be occurred in the future. It also allows the company to see what are the strengths are which allows the company to expand on them factors and enable to strengthen the strengths that it already has. But alongside these two factors it also allows to ensure what opportunities are on the horizons for the company and if it is agreed upon then it can be put into action to make sure that these opportunities are taken advantage off and that means improvement for the company.

#02 [Project mangement] SWOT anaylsis As you can see above TD2660 has a lot of strengths because it has been in the community for a very long period which has enabled it to gain and has been accepted by the government because they are working to give the youth of the community a better future and work with them on their outlook towards the community itself therefore this is a very major positive point that this club has on its side therefore it has been placed in the strengths section in the analysis. Another strength that this club has is that it has professional staff that has the necessary supporting knowledge and social-worker status which enables the club to have a friendly environment because of which the youth is attracted to the club and wants to become a daily member for the club. But along with strengths TD2660 also has weakness which is again a very important section in itself because this allows the SWOT analysis to take place for the club. TD2660 has a minor weakness which can be resolved in a period of time as it has been listed above and that is if there is an outburst or a conflict in a member or group of staff that can become a weakness because it can cause to lack of staff members available for the members of the club. Threats is also a turning point in SWOT analysis because this enables the company to see what major threats it can be facing in the future and this mostly involves competition between two types of same businesses which is the same thing which is involved as an threat for TD2660 it also has threats from a club which represents the same mission and activities. Overall SWOT analysis enabled us to see the major strengths, threats, opportunities and weakness in the company and because of this we were able to see with a wide and broader view. This analysis is also good to identify which stakeholdÂŹers and actors that may be involved in the project to further strengthen internal and external opportunities. In this way you can easily create an overview of the options available to create a better product that can survive the threats which are now found in the surrounding world environment.

#02 [Project Management] Communication plan / Analysis

MUL/MIL STUD 2011 (CL) / Resources / 2. semester / tr11mil02 - spring 2012 / Marketing / Slides and exercises

Communication between the company and its users is very significant because it enables the relationship between the company and its users therefore we have chosen to create a communication model and a communication plan. By using these both methods we will be able to show and describe exactly what our communication is based upon for the users.A communication model allows showing the important elements in a communication plan in its most segments. It does not show the details of a message rather it presents only those elements which are related to the object of sending a message. But through a communication model you are able to see what the planning will be for the communication plan therefore a communication model is very important because it in itself defines how an communication will take place between the sender (company) and its receiver (users / audience). This model is an useful factor in project management because it allows to have an stable ground build for the project to see how the communication will take place. We used this model to display who the sender is and how we will get the message across to our users.

#02 [Project Management] Communication plan / Analysis

Communication plan Sender TD2660 Message The message TD2660 wants to send to their users is that TD2660 is a trustable local community center which can provide the youth of the local community a better future by working with them in a friendly environment. They will ensure that the youth of the community does not proceed in any crimes outside or inside the community. This message will be sent to the audience through the website and other media products. TD2660’s message is “Working with the future of tomorrow , today”. Recipient / Target Audience Our products are designed for our primary target group which is mostly boys aged between 10-18 years who are vulnerable. This target group has been set by the company and the local kommune of Brøndby Strand. The reason this target group has been set is because these are the ages that are a requirement for members who want to join the club and these are the ages that we want to grab attention of through our media products.

#02 [Project Management] Communication plan / Analysis

Media We will in this project make use of the following media; a website, poster, flash banner, Facebook page and a T-shirt for the club. The website will become the official website for TD2660. This website will have a professional look alongside having an attractive outlook for the target group. The poster which we will create will spread more awareness for the club and will be hanged in the club, bus stands, buses and other local community centers and will be provided with a QR code that users can scan and that leads them to the website. A third media which we will use to raise awareness about the club is an online is a flash banner which will be seen at various news websites and takes the user to the website if he or she chooses to click on it. The fourth media which we will use is a Facebook page for TD2660 to get as many people to use this media source and through this media we can easy come out to our target audience. Here, users can interact with one another and follow the TD2660 events. This will be the most effective media source because social networks are something which is very common between the ages that we have chosen as our target audience. The final media source which we will use is official t-shirts for the club this will allow to spread awareness on a higher scale then our other media sources because it will become a trademark for the club and it can be shipped out to other countries as well if it becomes a success alongside that the members of the club will free more as if they are a part of the club with the t-shirts.

#02 [Project Management] Communication plan / Analysis Effect The desired effect of this project is to be to give more people a wish to gain more members for the club and alongside help the target audiences remain as a member at the club. Noise There are a few factors that could prevent the message to reach out to the users. That could be the financial factor. To get a well-functioning business to work, one will have to earn money. Lack of financial support from the stakeholders /companies because all of this media sources will need an investment from stakeholders which might become a problem later on if it is not discussed at the very point. This might be the only problem which can be occurred but it can also be resolved within a level of understanding between stakeholders. Receiverâ&#x20AC;&#x2122;s image of the sender The receiver, which is the target group, should have a clear image of TD2660.dk. Informational and guiding website and an easy access to it all through the Internet.

#02 [Project Management] Risk analysis

MUL/MIL STUD 2011 (CL) / Resources / 1. semester / tr11mul02 - efter책r 2011 / Project Management / Intro to PM

Value consequences 1.A minor issue in the project that creates irritation 2.Issue that cause delays, necessitating a revision of the plan and budget 3.Serious issues that prevents the project implementation, and consistency can be closure of the project Risk analysis is a technique to identify and assess factors that may jeopardize the success of a project or achieving a goal. This technique also helps to define preventive measures to reduce the probability of these factors from occurring and identify countermeasures to successfully deal with these constraints when they develop to avert possible negative effects on the competitiveness of the company.

#02 [Project Management] Risk analysis For our project risk analysis was a very important segment because it enables us to see what possible problems we can be facing as a group for the project and how we can prevent the problems. As we are only two group members we did not have a lot of problems to prevent because we had selected certain days for meeting etc. But below you can see the possible problems which we could have faced and which problems could have been the most high valued throughout the whole project. As you can notice the highest valued problem that we have listed is if a group member does not have the tool or software needed to create the media file or to complete the report such as InDesign CS6 can become a problem because if the group member decides to start the work at a late time then he or she is not able to contact the other group members and if the hand in is close then it could be a problem therefore we have decided to set the highest value for this problem as this is the problem which we faced during the project.

#03 [Analysis] AIDA Model

MUL/MIL STUD 2011 (CL) / Resources / 2. semester / tr11mil02 - spring 2012 / Communication

AIDA is an acronym used in marketing and advertising that describes a common list of events that may occur when a consumer engages with an advertisement. The base of brand promotion also. • A - Attention (Awareness): attract the attention of the customer. • I - Interest: raise customer interest by focusing on and demonstrating advantages and benefits (instead of focusing on features, as in traditional advertising). • D - Desire: convince customers that they want and desire the product or service and that it will satisfy their needs. • A - Action: lead customers towards taking action and/or purchasing. In this project we have decided to create an AIDA model for the website which we have created for TD2660. We will base the entire AIDA Model on the layout, functions etc. of the website. AIDA model enables us to see how we attract the attention of our users and what will be beneficial for us through the layout of the website.

#03 [Analysis] AIDA Model

URL: http://www.TD2660.dk/ Attention The website is good at capturing user’s attention. The large font with white background at the homepage attracts attention as soon as the user opens the website and they are able to see what the website is about. The white background allows everything else on the homepage to attract the user’s attention therefore alongside the font size; the pictures are the side allows attracting attention as well. Interest To maintain the interest of the users we have focused on various factors such as font, functions, font size, images size and images. We choose to maintain interest of our users through this because we had to keep the background white therefore we put more effect into these. Alongside these factors we grab attention by using different functions such as for the gallery’s page and the function on the home page. Desire By including information we cannot make the users desire to become a member at the club but by including the images of some tournament’s that took place and other events that were held at the club in the home page , gallery page we are able to make the users desire to become a part of the club. Action The action that the user can do is not too many as this is more of an informational website but this website includes blogs for the users with which they can interact.

#03 [Analysis] User cases

MUL/MIL STUD 2011 (CL) / Resources / 2. semester / tr11mil02 - spring 2012 / Interaction Development

“A use case is a list of steps, typically defining interactions between a role (known in UML as an “actor”) and a system, to achieve a goal. The actor can be a human or an external system.” This is the definition of what a use case is and a use case is very important in a project because it allows to show how an user of the website will function through the website or achieve a certain function / part of the website that they want to achieve through a certain number of steps that is listed to show the interaction between the user and the website. This is the use case that we have created for our project and listed a function that we consider as a very easy interaction function. Name - Use case for the prototype. Identifier - UC1 Description - This use case describes the process that occurs when a user will see information about a certain article such as Tunge Drenge Skal Blive Lettere and find out when these articles were published and have a read about it. Goal - The goal is to find out when the article was publish and read a little more about them.

#03 [Analysis] User cases Basic Course Preconditions 1. There must be a laptop in front of them. 2. There must be an active Internet connection available to the user. 3. The user must be active on the website. Actors - The user 1. Use case begins when the user enters the articles page. 2. The user presses the box containing the articles heading â&#x20AC;&#x153;Tunge Drenge Skal Blive Lettereâ&#x20AC;?. 3. The user can now read when it was published at the very bottom of the article and read about the article. 4. The user decides to look other articles and read about them. 5. The user has to click on the article that he / she wants to read about. 5. Use case ends when the user has found and read the information sought.

#03 [Analysis] User test 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â&#x20AC;&#x2122;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. While creating this website we were asked to show our website to our manager and at that time it was not fully finished but by the looks he was giving us, we thought a user test is a very crucial part for the website. A user test allows us to see the website through the userâ&#x20AC;&#x2122;s eyes and that plays a huge role in the finishing of a website because it allows us to reconsider some of the parts that they give low points to or something that they are totally unsure about in the website. To start this test we asked 5 people to do a Gangster test on the subpage http://td2660.dk. They were asked to score the site based on 5 questions regarding the navigation, functions and layout. The users testing the website are asked 6 questions and should rate the specific site 0-3 points where 3 are highest and 0 lowest. The highest score possible is 18 points, so the higher the average score is - the better the website is.

#03 [Analysis] User test The questions asked were these: 1. The website identification: What website is this?? (Look for a logo or other signs of identification) 2. Sections: What are the major sections of this site? (Look for the website’s sections or departments) 3. Page name: What sub-page am I on? (Look for a title or a name) 4. Local navigation: What are my options at this level? (Look for local menu) 5.”You are here”-indicators: Where am I in the scheme of things? (Look for a bread crumb or overview) 6. Search function: Where can I search? (Look for a search function) And these are the results:

As you can see from our results you are able to see what the problem is in our website or in other words in which section users are finding it difficult to achieve a higher score on. By focusing on this user test we made a few changes a prototype of the website in order to see whether this problems can be resolved or not and we came to final result that these problems can be solved in a easy manner with just a few minor adjustments to the website.

#03 [Analysis] Competitors Being a local community center in itself is a competition because you have to fulfill the needs of the community which changes almost every day and for our target group ages their needs change every day therefore it is a competition in itself to keep up with our target group but otherwise there are more other competitors that we have to consider and focus on and make sure they are not reaching our standards of popularity amongst the communities youth. Other local centers are a threat to us if we consider our competitors. There are four other clubs that are in the same community as our center therefore it is hard for us to keep up with our daily members because the youth is divided and we have to come up with new ideas to be sure that we are giving opportunities for different activates that cannot be accessed in other community centers. Overall our main competitors are other local clubs which offer the same activates that we offer. But to overcome our competitors we have a lot of schemes in order to accomplish that and that will be by the help of our stakeholders and the companies that are support our every tournament that takes place.

#03 [Analysis] Stakeholder MUL/MIL STUD 2011 (CL) / Resources / 3. semester / 04 Communication & presentation (kommunikation & formidling) / Effective Communication

#03 [Analysis] Stakeholder Stakeholder is a person, group or organization that has interest or concern in an organization. In this case these above stakeholders have interest / partnership with our organization. Stakeholderâ&#x20AC;&#x2122;s normally affecting the organizationâ&#x20AC;&#x2122;s actions, objectives and policies. Our listed stakeholders accompany our organization and the activates that are held at our club. Every stakeholder is not equal because some of them support us finically while other support us with different types of tournaments or requirement. Stakeholders are a important part of a organization because of these stakeholders an organization is able to keep steady in the field of business. We have learnt a lot about stakeholders in our education and because of which we are able to say that stakeholders are a major part of a project and we used this our project by researching about our organizations collaborations. Overall these stakeholders allow the club to function finically and allow different activities and tournaments to take place in the club therefore stakeholders are a very important part of an organization.

#04 [Design Brief ] Design Brief MUL/MIL STUD 2011 (CL) / Resources / 2. semester / tr11mil02 - spring 2012 / Visual Identity and Branding / Design Briefing

A design brief is a written document for a design project developed in concert by a person representing the business need for design and the designer. The document is focused on the desired results of design â&#x20AC;&#x201C; not aesthetics. Design briefs are commonly used in consulting engagements, when an independent designer or a design agency executes a design on behalf of a client. They are less common when the designer is in-house. it is commonly used in Environmental Graphic Design, in schools across the world. Images The images size is different per page but the format is the same which is JPEG except the logo which is a PNG. Logo = PNG Other images = JPEG.

#04 [Design Brief ] Design Brief Logo This logo is their official logo therefore we did not choose the outlook of the logo. But logos are an majorly important factor in a website because of this a website or a company is recognized between its target group and other companies as well therefore we could not change the logo. The logo is a very simple logo which has a black and white shade to it. It is kept very relaxed as it does not have any leveled writing or layout because the feel that we want to give to our target group is that this club allows you to come as you are and it is an easy going place which does not require any sort of requirement. The logo symbolizes an easy going environment. Functions This website has a lot of function because it is an informational website but alongside it allows users to blog therefore it needed to have a few functions which are easy to navigate through and looks professional at the same time. Subpage functions – these functions are almost on every page because we wanted to keep our target groups attentions seek on the website and they do not have to keep scrolling at the top main bar to get back on the page that they were on therefore these functions are included in every page of the website. Gallery page function – This function is the most common function which is mostly found on every gallery page therefore to be on the safe side we also chose this to make sure that our users do not get tired of the old traditional way of looking at pictures. Our function allows the users to click on an image which then gets enlarged and you are able to slider to the previous image or the next image. Articles function – Considering that the center has a lot of articles issued we wanted to make it as simple and easy to navigate through as possible therefore we included this function. After landing on the articles page the user is able to click on an image which is related to the article which then takes the user to the article.

#04 [Design Brief ] Design Brief Colors White, grays, black (text), bright blue. Here we are dealing with three neutral colors; white, black and gray and one primary color; blue. The neutral colors are most often used to enhance the primary and secondary colors in the scheme, however in this design it seems that the neutrals are used as colors and not enhancers. The light gray header is too light to enhance the blue logo, and the fact that the main color in this design is white; it turns out a bit bland overall. White is, when used correctly, a very good stand in for black, that has a tendency to seem very hard or heavy, however it should probably have been a lighter shade of white in order to make the logo pop out a bit more. White is easily perceived as a neutral color; a few references could be cloudy weather, iphone and dust, it should therefore not be used as a defining color. Clearly the intention has been to create a design that induces trust and a feel of professionalism

#04 [Design Brief ] Design Brief Fonts Font is the most important thing in a website because it gives a feel to a website; it allows the website to give a first impression to the user who opens it the first time. To give a professional look to a website fonts play a big role in the way a website is presented. In this website we used the following fonts. • • •

Open sans Arial Calibri (body)

Opens sans is a font which is a sans-serif typeface designed by Steve Matteson and commissioned by Google It was designed with an “upright stress, open forms and a neutral, yet friendly appearance”, being especially designed for legibility across print, web, and mobile interfaces. After researching about this font we considered that this font will be a good option to have as a family font for the main parts of the website because it will allow the website to have a user friendly yet a professional look. Arial is a font that is to be seen everywhere weather on a PC (windows) or a MAC. Yet it is not the most best font for an informational website because it is said that most news websites use the Verdana font such as BBC etc. therefore we did not use Arial font as an font family. Calibri is not a font which we used for a lot of places in the website but it has been used in some sections of the website because this font is not a very popular font and we wanted to be on the safe side and use a font which many users eyes are used to off therefore we did not use this as our main font for the website.

#04 [Design Brief ] Design Brief Tone / language of communication The language that we are going to use is going to be English for the project part but otherwise it will be in Danish, there will be a language option in the website that will enable users to choose between the two languages English and Danish. The language production will be easy to read and understand. The tone will be Standard English and not English which is difficult to understand because our target group are not going to pay attention if it is too difficult to understand. Website The website is a full screen site designed for screens with a resolution at 1366 x 768 px as this is the most common used resolution these days. The website is coded to be best seen in the newer Chrome, Firefox and Explorer browsers as these are the ones that are most used. The content is boxed in a container (sitewrap) sized 900 x min-700px (without footer) but the design is created to fill the screen around that box, so that people with larger screens get a full experience as well.

#04 [Design Brief ] Selection of Design In our process of finding the right design for TD2660 we went through several ideas for the layout and the outlook of the website. We have a lot of sketches and not all of them are relevant, so we have picked out a few that shows a development towards the final product. Here you can see and read a bit about each of them. Mock up 1:

This was our first sketch and as you can see above we first chose to use a light greyish background instead of a white one because we thought it indicates the same meaning which a white background would meaning that it will still highlight the other features that we wanted our target audience to pay attention too but we did not proceed with it because it was really diffcult to see the text with a background this color. We also thought to have the division lines between the main menu black so it would go alongside the logo. But overall when we included al the images and other features it did not look as we thought it would because of the colors choses we made.

#03 [Design Brief ] Selection of Design Mock up 2

This was our second mockup in which you can see that the whole layout of the website was completely different to the official website. We decided to place the logo on the right hand side instead of the left because this time we made 4 rules for website layouts and how it should be for our target audience. The 4 rules were: • Your Web site should be easy to read • Your Web site should be easy to navigate • Your Web site should be easy to find • Your Web page layout, design, and labeling should be consistent throughout the site

#03 [Design Brief ] Selection of Design To make the information on the website easy to read we placed it inside the text box on the right hand side next to the picture placed because when someone opens an website at the first time mostly their eyes to towards the middle of the website. We decided the include the main menu (global menu semester 2) on the right hand side of the website because we thought at the beginning that it would be an easy way for our target audience to navigate through the website but when we showed a few teenagers our website they were not found of the menu bar placement therefore we did not proceed with this layout. SEO is an plus for an website to be easily found over the website which we have included in the website because this website will be found on Google, yahoo etc. therefore we needed to include the SEO because even though this is a part of the project but it will be on search engine’s for time to come and we included the SEO for it to become easily found over search engine’s but we will mention this more later on in the report. Search engine optimization (SEO) is the process of affecting the visibility of a website or a web page in a search engine’s “natural” or un-paid (“organic”) search results. Even though this layout did not work out to become our final website we still followed the 4 rules which is shown above for our final website.

#03 [Design Brief ] Selection of Design Mock up 3

This was our final mockup in which we did not change a lot before the official website besides the grey background because we thought white would be a better color and it will give a professional look to the website plus we thought about the color schemes in which we found out that if we are aiming the website to our target audience we should either use light colors or strong colors therefore we thought rather than using strong colors such as red, blue , orange and light green , white would be a better solution alongside our manager wanted us to use white as a background color because he did not approve of strong colors. Overall this website was a better solution then all the other mockups and was approved by everyone.

#05 [Design process] Navigation Diagram

MUL/MIL STUD 2011 (CL) / Resources / 1. semester / tr11mul02 - efter책r 2011 / Project Management / Intro to PM

To create a user-friendly navigation it is both linear and simple, we have chosen to use the Hierarchical navigation structure. The hierarchical navigation structure is veludbredt on dissemination pages and as this is what TD2660 stands for, we see a logical connection to make use of this structure.

In our product we have decided to create just one menu which is our global menu. This global menu will be set at the top right hand side of the website. When you are already on a page the highlighted color will be light blue so our users can see what subpage they are on. Credibility allows a website to seem as a trustable source to the users therefore it is important that the user feels that the information comes from a reliable source. Navigation structure for this menu is simple and allows users to read more without having to start from the start. We kept this navigation diagram very easy to understand so that our target audience does not have any type of problem while navigating through our website. In our project navigation diagram was an important segment of the whole project because it allowed us to understand and think about how this interaction between our users and the website has to be functioned and how it will affect our project and our product as a whole.

#05 [Design process] Navigation Diagram Global Menu

#05 [Design process] Wireframe A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose. The purpose is usually being informed by a business objective and a creative idea. The wireframe depicts the page layout or arrangement of the websiteâ&#x20AC;&#x2122;s content, including interface elements and navigational systems, and how they work together.

#05 [Design process] Wireframe

The wireframe usually lacks typographic style, color, 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. Based on our navigation structure we have created this wireframe in which you are able to see the navigation, layout, design etc. of our website. As you can see on this wireframe it allows giving a wider image of the website through this diagram and we only have one global menu in the website which you are able to see in this wireframe as well on left hand side of the website. Our homepage allows users to skip through all the pages that include the main pages which are listed at the very top of the homepage the purpose of that is the users are able to see what this website provides without having to click on the pages listed at the global menu because of which it was kind of hard to design this wireframe because it needed to show how the exact layout is or would be of the websites homepage. Alongside the global menu you are able to see the logo at the top right hand side of the websites homepage. We have chosen to place a moving image in the middle side of the page, as this is the most typical emerging way to showcase a wears out. The image is very important to be placed in the middle because it has to be an eye catcher for the page. We have placed many images at the bottom space of the website to work as an eye catcher because we have to make sure that in any way possible we connect to our target audience as this is one of the hardest target audiences to attract because their moods are always changing. The social networks are placed at the very bottom of the homepage because it is the most common place for them to be placed on a website and whist scrolling through a website a user defiantly looks at the very bottom of the page for many reasons which could include reading terms and conditions or copyrights etc. therefore we have placed it there because we were certain that our users would look there and we could connect with them through social networks. We have also included a language option for our users which are able to be seen at the very top and the bottom of the pages layout.

#05 [Design process] Project Plan

For this project I have created two different Gantt charts in which you are able to see what we considered our overall time would be spent on our project and the second one you are able to see how long it actually took for us to finish each task for the project. In this project plan you are able to see the result of the following question: • Why? - What is the problem or value proposition addressed by the project? • What? - What is the work that will be performed on the project? What are the major products/deliverables? • Who? - Who will be involved and what will be their responsibilities within the project? How will they be organized? • When? - What is the project timeline and when will particularly meaningful points, referred to as milestones, be complete? The problem in this project is that we need to complete the whole project and time is the problem for us besides that we have other projects concerning the finical management in which the company is involved rather than the project itself. Finical problems occur for the company if we do not proceed with the website in a certain time given and money is time in the finical management it is the key point.

#05 [Design process] Project Plan

The works that will be performed in this project are the following: • Website • Report. This two are the main parts of this project which took the most amount of time during the project and they need the most work to be done for as well. These work did not take any finical management to be completed but they do have risk involved which is a major part of a project plan and those risks are the “if”’ of the project which means what if we do not stick on the timetable created and taking more time than it was commanded to on a particle part of the project. There were only two people involved in this project plan which is the group members involving Ghania and Ahmed. We had all the responsibility of the project as an overall. We then divided some responsibilities between each other but of course we were in control of what the other person is doing and what information is being used in to finishing the task given. In our project we did not have a lot of milestones because everything in this project needed special attention but one of the main things that needed special attention was the T-shirt design because this was something that we have not done before therefore it was hard for us to complete this task. Critical path of our project plan is the “T-shirt design” which took the longest time of the project for us to complete and the shortest time that took us in this project on a task was the “diagrams” task for the report.

#06 [Design] Design Documentation MUL/MIL STUD 2011 (CL) / Resources / 2. Semester / tr11mul03 - forĂĽr 2012 / Design & visualisering

This is our finished verion of TD2660. In this version we have made several changes from when we started to view the the website in the report you are able to see the changes throughout the report aswell. This is our final version because we are sure that this website answers the questions in itself to the ones we have listed above in the problem formulation. This website has everything that we were looking to include in the website such as user friendly menu. To create a user friendly menu we saw and reasearched a lot about user friendly website menuâ&#x20AC;&#x2122;s and this was what we came to through our research that people tend to get confused when they open a website and they have to navigate through a flash menu which is very confusing for them or even a drop down menu because something people just want to go into a website receive the information that they need and close it but if these features are used for the menu it is common for them to get confused and not being able to receive the information that they want and Search engines can easily follow them and rank your site higher, plus your customers easily understand and will follow them. Therefore as an result we used a simple HTML menu. To the final website we changed the fact that the menu was only at the very top right hand side of the website because in the final website you are able to view the menuâ&#x20AC;&#x2122;s by the following options :

#06 [Design] Design Documentation MUL/MIL STUD 2011 (CL) / Resources / 2. Semester / tr11mul03 - forĂĽr 2012 / Design & visualisering

Global menu or the main menu:

This change was not something that took place at the very last point because the only change that happened to this menu is that before it was designed to be set on the left hand side and now in the final website it in on the right hand side. Scroll through menu:

This scroll through menu allows you the user to see the different pages on the website through this scroll menu. The user just has to click on â&#x20AC;&#x153;see more activates availableâ&#x20AC;? then they will be landed on the page.

#06 [Design] Design Documentation MUL/MIL STUD 2011 (CL) / Resources / 2. Semester / tr11mul03 - forår 2012 / Design & visualisering

Changes The recent changes made are that we have added a search function in the global menu item. However, the search function located to the right of the menu. We have included a Facebook like button for the gallery pages and the main facebook fan page. Alongside we also included a Facebook comments tag on the gallery page. Translation function is one of the things that we were unsure about inserting into the website but we did anyway because we thought we never know which type of nationalities want to join the club and therefore to be on the safe side the included a translate function in the website. This function allows users to translate the website in two languages Danish and English.

Here is the finished version of the website “Tranens Drenge”, which is complete. As part of the improvement of the TD2660 visual identity we have created a new website. We believe that this website is more modern, ver¬satile, welcoming and inspiring than the former. The website is often the face of the company and is therefore a key factor in how to brand themselves in relation to cus¬tomers and competitors. We have chosen to keep the website simple, but still creative.

#06 [Design] Logo Proposals MUL/MIL STUD 2011 (CL) / Resources / 1. semester / tr11mul03 - efterĂĽr 2011 / Application tutorials etc

In this project we could not design the logo as we desired to because the club already has a logo which we were not allowed to change. The logo that we have used in the website is a PNG formatted picture which is black and white with a little emphasis on the form of font that is used in it. But we were still asked to produce logos and if they were considered as better solution they will be considered to replace the official logo. Since logo represents an organization and because of which an organization is reconsidered we did not want to produce a result which did not even represent the center therefore we spent a lot of time researching about how other community centers have designed their logos , we looked at examples etc. While designing our logo solutions we considered about the color scheme because a logo color allows to give a sense of the organization in the first look at the logo for example dark blue or light blue always represents peace and trust therefore mostly social networks or bankâ&#x20AC;&#x2122;s use the color blue in their website to make their target audience feel like this is a trustable source. We decided to choose the color Yellow because it represents warm, cheerful, jovial, sunny, bright, radiant, mellow, original, imaginative, idealistic, spiritual, creative, artistic, hope, optimism, sun, summer and in sports it represents basketball and in tennis . We thought it would attract our target group more towards the center if the color yellow is used in the logo of the website.

#06 [Design] Logo Proposals MUL/MIL STUD 2011 (CL) / Resources / 1. semester / tr11mul03 - efterår 2011 / Application tutorials etc

Logo 1: We created this logo in Illustrator. Illustrator is a vector based program which allows you to draw vector items. We used different tools while creating this logo such as the brush tool for the “T” part of the logo. We used hard round pressure opacity because it gave a smooth edge to the “T” shape in the logo. We used the brush first to create the top part of the “T” shape with the blue color because blue represents a trustworthy source. The bottom part of the “T” shape was created with the same color but a grey color instead because we thought we needed to make sure that the logo looks professional along with looking trustworthy. But this logo did not get approved because it did not look as appealing as it should have to the target group which this website is aimed towards.

#06 [Design] Logo Proposals MUL/MIL STUD 2011 (CL) / Resources / 1. semester / tr11mul03 - efter책r 2011 / Application tutorials etc

Logo 2 We choose to have a black background for this logo because we thought we can use a black background for the website as well but we did not. We also created this logo in illustrator. For this logo we did not use a lot of tools because the image itself involves more text than an image. We used text tool for main part of the logo which is the name of the center and their slogan. To create the vector image of the circle we used ellipse tool in which we removed the space in the circle to create the thin lines in between the circle. We thought that this would represent the young generation by the circle because we thought it would remind them of Xbox or a console to represent the playing part in the club for the members. But this was not approved because it was considered as very dark for our target audience. But in our consideration this could be used for the website.

#06 [Design] Logo Proposals MUL/MIL STUD 2011 (CL) / Resources / 1. semester / tr11mul03 - efter책r 2011 / Application tutorials etc

Logo 3 We created this logo in both illustrator and Photoshop. We used Photoshop for the image part of the logo which includes the left side part of the logo. We created these in many parts for a final part of the image. We used the rectangle, ellipse, rounded rectangle tool and polygon tool for the part. We used different colors for the shapes part in this logo because we wanted to gain the target audiences attention as much as we could through this bright colors. The text part was created in illustrator because we considered it easier to edit the image afterwards in order to achieve the final image. Overall this logo was created in the intention that it would attract the target groups attention through the bright colors but it was not accepted because it contained to many colors for the audience to take it seriously and since our target group is teenage audience we could not take a risk for them to take it non seriously therefore it was not approved and they also thought that by the first look of the logo you are not able to recognize the purpose behind the logo.

#06 [Design] Logo Proposals MUL/MIL STUD 2011 (CL) / Resources / 1. semester / tr11mul03 - efter책r 2011 / Application tutorials etc

Logo 4 We created this logo in Photoshop. We used brush tool which is spatter 24 pixels for the outer layer of the image to the left side. We used grey for the outer layer because grey is a neutral, balanced color therefore it does not have a meaning behind its presence. To create the yellow layer inside the grey layer we used the ellipse tool then reshaped it according to the logo. The text was created by the text tool. This was meant to represent a calm and neutral effect through this logo. But it did not seem like that to the people who viewed the logo therefore it was not chosen.

#06 [Design] Layout Layout is one of the most important parts of a website because depending on the layout a website is based. Our layout is designed in a very simple way in which it was meant to be easy for our target audience to navigate through our website. As you can see on our diagram we only had the following boxes for our layout set out which were: Logo / Navigation bar: This layout made it easier for us to figure out how we will set the website up. This section of the layout which we created for the website allowed us to insert the logo which we did at the top left hand side of the website.

As logo is a very big factor in any companyâ&#x20AC;&#x2122;s website we made sure that when we created the layout we left a lot of space for the logo as at first we thought we would use a JPEG but instead we used a PNG which did not take up a lot of space therefore it was it good thing to create the layout so we had enough space for the logo either way.

#06 [Design] Layout

48 Body section Body section Body section is the main part in a HTML website because that is where all the information, images everything is inserted in. In the coding the body section can include anything and this is where the layout actually forms into a design for the website. In our body section in the website we have included information about different topics which will be included in our website and images which are related to those topics but in the layout we gave a lot of space to the body section because we knew that a lot of information and images which be included in this section. Footer / Bottom Navigation Bar This is where in a website the links are given below if a user again wants to go on the page that they were just on. Usually this includes only the pages which are on the main menu as well as the social links that the company wants their users to visit because this is one of the main ways to gain better popularity between our target groups.

#06 [Design] Posters We have chosen to create a series of posters for our company’s website because they are needed be distributed out to many differ¬ent kommune, clubs etc in Brøndby fx Brøndby Kommune. Posters work as a popularity boost for a company if the message is catchy which always leads to people getting an idea of the company. Our catch phrase is “Working towards a better future for the community’s youth” and “working with the future of tomorrow, today” This catchphrase combines with the com¬munication plan which we created for this product and the message is sent out through this catch phrase to our target groups. There will also be a barcode (QR) on our posters which will take the user directly to our website if it is scanned by a smartphone. We have chosen to give all the posters repetitions of design of that our target audience is able to recognize that they are all from the same company and the repetition allows the posters to have a theme amongst them.

#06 [Design] T-shirt This is probably one of the hardest task we have to create during the whole project. This was the first time we had to create a T-shirt design and therefore we just kept it simple and plan for the members of the club. We just included the URL of the website because that is the main point of the T-shirt that it gets more users and members to visit the website and through that our company gains popularity through our target audience therefore we did not design it took much because we did not have enough time too neither the experience therefore we just kept it simple and just included the URL on the t-shirt.

#06 [Design] SEO MUL/MIL STUD 2011 (CL) / Resources / 2. semester / tr11mil02 - spring 2012 / SEO

SEO stands for “search engine optimization.” It is the process of getting traffic from the “free,” “organic,” “editorial” or “natural” listings on search engines. All major search engines such as Google, Yahoo and Bing have such results, where web pages and other content such as videos or local listings are shown and ranked based on what the search engine considers most relevant to users. SEO (Search Engine Optimization), is an important tool for marketing a website. this tool used to optimize a website on pages such as Google, Bing, Yahoo, Ask and other search machines. We in this project chose to build on Google optimization, so we can build high after the related keywords Google is the most used search engine. We used SEO in our website throught two main factors which is “HTML Title Tag” and “Meta Description Tag”. HTML titles have always been and remain the most important HTML signal that search engines use to understand what a page is about. We have included this following SEO code in our website. <meta name = “keywords” content = “TD2660, Tranens Drenge, Brondby Club, Brondby Strand, ITshoppen, Bronby, Copenhagen, <head> <title>HOME // TD2660 // Brondby Strand</title> </head> This two codes allow the website to be easily searched in the internets search enegines. The meta description tag, one of the oldest supported HTML elements, allows you to suggest how you’d like your pages to be described in search listings. If the HTML title is the equivalent to a book title, the meta description is like the blurb on the back describing the book.

#07 [Conclusion] Problem Formulation In this report we designed a few questions that we are meant to answer in the report. Those questions are formulated as a “problem formulation” These questions came up after a lot of research was done and when we spoke multiple times to our company in order to confirm what exactly it is that they are after through this website. Our first question main question was the following: Q. How do we broaden TD2660´s popularity through their website? A. TD2660 is a community club it already has reached a certain level of popularity between its target group and other audiences as well but our motive was to increase that level of popularity for TD2660. Visibility is an important factor for a website and other products that are used to gain attention of a target group for a company. Therefore we used a few products to risen the level of popularity that TD2660 has and those are “Banner”, “Poster”, “T-shirt design” and an official website. We made sure that in these products there is a certain theme which includes visibility so that our target audience is able to understand that all these products are for the same company. Our main visibility factor is our white background as you are able to see all the products contain the white background because of which the target audience is able to recognize it is from the same company but of course this is a very small part of visibility. All these products have their own way of boosting the company’s popularity such as the following: Banners – will be placed in a very busy website on the corner which concludes a huge amount of visitor’s every day on that website. By clicking on the banner (wherever it is placed) the user will be transferred to our website which will give us more views on our website. Ages included: 30+

#07 [Conclusion] Problem Formulation Posters – will be hung up in different busy places because of which when people look at our poster they might go home and check out our website or else if they have a smartphone they are able to scan the QR code and go directly to our website from their smartphones. Ages included: All T-shirts – will be distributed out to the club members and our target group normally has a lot of connections which they meet up with every day and that means a huge popularity boost because by wearing the t-shirt they might get their social networks involved in the club as well. Ages included: 13+ Website – of course this is the main part of the whole project and the popularity boost because this is where all these products will land which means this website will gain more views and users. In this report besides main question we have decided to include a few sub questions. These questions allow covering every aspect of the project and the website. We have include three sub questions which cover almost the same criteria. Below are the following sub questions we asked at the very begining of the report:

#07 [Conclusion] Problem Formulation Q. How can we make TD2660 more stable in the market business? A. TD2660´s competitors all have their official websites but their appearance is not as good as our company but this website is a major way to make this club more stable because a business is only stable till the business is in demand of the people therefore the multiple views on this website will make sure that the company is still in demand.This was one of the only things in our mind while creating this website , that it has to be user friendly and to ensure that it is we followed several steps which you are able to see in the website. The following steps are which we took which creating the website: • • • •

A good site map User friendly website menus User friendly graphics, colors and font sizes User friendly, customer focused content

Q. How can we ensure that the website is easy to navigate through? A. This answer is also answered in the user test because we asked our users who took the user test and through that we were able to make sure that our users do not have any problem through navigating the website. But before taking user test on our users we researched about navigation in websites from different sources on the internet and fronter.

#07 [Conclusion] Particular Conclusion Ahmad El-Jabory In this project from the very begining I were determinded to finish this project in a better grade than all of our previous projects since this is the final project. This project was the most hardest because we had to included every topic we have learned and that was not easy since it was only two people. Therefore we had to make a final list of which topics we will cover in our report and wether or not it is acceptable or it relates to our project or not. Another diffcult thing was that we have to ensure that besides of just wirting we actually understand the critrate or not which we made sure by going back and back to our fronter presentations about the certain topic that we were handling. Besides covering every topic in the semester I also had to make sure that if one person is doing a part which I am not included in that I understand and am sure about what the other person is writing and wether what they are writing is relevant to the topic or not. This project has been the hardest because this is the first time ever where we created our own topics and thought what we needed to include in the report which was kind of hard because we are so used to of getting an assignment and covering the areas which we are told to cover therefore it was a learning experince to work complety on our own. Topics, table of content were just the begining because this time we reasearched every topic and made sure we understand and while creating the diagrams we had to make sure we are writting which is meant to be written and not just write to fill the pages for example the stakeholder anaylsis was kind of diffcult because we had to research about our company and ensure that we 100% know what stakeholders are and which stakeholders are invovled with our company. This time even creating the website was not as easy as we thought it would be because we had to create the website according to what our companyâ&#x20AC;&#x2122;s wish and demands are therefore we had to make sure before we take any step we are hundered percent sure of what we are doing is accepted by our company. Information in the website was also diffcult because since this website is meant to be for users who are a member at the club we

#07 [Conclusion] Particular Conclusion Ahmad El-Jabory we needed to sure that the information is relevant and it is not something the members at the club will refuse about being the right information. Informaton writing for this website was easy for me just the writting part because since this website is meant to be in danish I was able to understand better what the informaiton is about and who it is aiming towards. Layout of the website was not diffcult for me because since we were two people I was able to get feedback from my co member in this project and because of that I was able to confirm what I am changing in the layout is a good thing or not same thing goes for the report because I was able to confirm from my co member that the layout of the report is also acceptable or not. Overall it was diffcult for me because this time the website needed more time then the acutal report since we were underpressure to make sure the webiste is turning out how the company wants it to look like and not just something that I would like to include in the website.

#07 [Conclusion] Particular Conclusion Ghania Ahmed This project has been one of the easiest and hardest project of all times because we are able to set the content of tables ourselves and we decided what we will include in the project and that for me especially was an easy part but the difficult part was to make sure that I am covering all the semesters and all the information we have been given or everything we have learnt in this one report. In the previous semester I had learnt a lot about report making but this time I wanted to be sure that whatever we write makes and gives sense to someone else who reads the report in their perspective. Because this is the final project we made a lot of different lists for the report in which we wrote everything that this report needed to cover and we had to make sure that we cover all the listed topics. I think in my perspective this project overall was easy because we created the website for our company with whom we were able to get a lot of guidance from therefore it was easy for me. I enjoyed working with my company even after my internship. This project broaden my imagination and my creativity because unless like other projects this project took a lot of research and a lot of different prototypes were created in order to get to the final product therefore it was an learning process for me. But before starting this project I set some learning goals for myself because I needed to ensure that since this is the final project I am able to gain all the information I need to gain and it will help me in my future time in this educational field. The learning goals for me were the following:

#07 [Conclusion] Particular Conclusion Ghania Ahmed • • • • •

Being able to participate the most I could in the creating of the report and the website Being able to communicate well to my company Being able to understand each and every topic I have learned through my education Understanding what and why I am doing in each topics Being able to reach the all the targets set in the curriculum for Multimedia Design

As you can see these were the targets that I wanted to succeed in through this project because I needed to make sure that I have learnt and understood everything in these past 2 years and since I want this as my career it was a must for me to understand everything about website creation and colors schemes etc. Overall this project made me realize that something’s you have to make decisions of our own and that made me more stable for the distant future as it would also be included in a job where decision making is important. And this project made me understand what is the purpose of including certain topics in a project. Also made me able to work on my own and understand the criteria. I tried to included everything that was possible to include in this project and make it relevant in the project aswell.

#07 [Conclusion] Sources https://en.wikipedia.org/wiki/Project_management - Project Mangement (02) http://www.methodandclass.com/article/how-to-write-a-brief-for-a-web-site - Design Brief (04) http://msdn.microsoft.com/en-us/library/ee210530.aspx#PageLayout - Report Making (#) http://thelawdictionary.org/matrix-diagram/ - Matrix Diagram (#) http://en.wikipedia.org/wiki/Open_Sans - Fonts (04) http://en.wikipedia.org/wiki/SWOT_analysis - SWOT (02) http://www.mindtools.com/CommSkll/CommunicationsPlanning.htm - Communication Plan (02) http://en.wikipedia.org/wiki/Flowchart - Flow Chart (05) http://en.wikipedia.org/wiki/Project_plan - Project plan (05) http://www.slideshare.net/nomanson/problem-formulation - Problem Formulation (01) http://guides.lib.unc.edu/photoshop - Photoshop (#) http://www.picturecorrect.com/tips/adobe-photoshop-illustrator-comparison/ - Illustrator (01) http://searchengineland.com/guide/what-is-seo - SEO (06) http://www.information-management-architect.com/documentation-standards.html - Design (06) http://www.w3schools.com/tags/tag_title.asp - SEO (06) http://searchengineland.com/guide/seo/html-code-search-engine-ranking - Coding (06)

#07 [Conclusion] Annex Our Annex includes the following: Banners Posters Diagram Images T-shirt design pictures