Self-Appraisal

Now that I have created my website, and implemented all the changes that need to be made I can now evaluate the project on a whole, and my opinion on this unit.

Upon realising that I would be using Adobe Flash to create my website I was worried, as I had never created a website in flash before, and only had a small bit of experience in using flash. But I endured, knowing that it wouldn't be too difficult to learn, and that the built in code snippets section of Flash could help me.

Throughout the design stage I knew that I wanted the website to not be over complicated, and to be very easy to the eyes and be very easy to read. The idea of my website was to make it as a noticeboard and advertisement for a fictional religious community center, known as r3ligion.


I found the design stage to be the process which I was most comfortable with, as I enjoy making design ideas, and wire framing designs. During the design stage I came up with the colour schemes that I would be using, as well as the layout of all the pages. I found the design stage for my product very easy, and was the the stage which I enjoyed the most.

Overall I think that I have created a very good product, which is highly suitable for it's purpose and appeals greatly to the target audience. Personally I think the product that I have created would be highly suitable for my target audience of young teenagers, to young adults. The design and content of my website is what, I feel, makes it so suitable, as I have kept the design very simple, yet managed to keep it appealing through the colour scheme and minimalistic approach which I have taken. The content of my website keeps in focus with the minimalistic approach, and does not stray away from the focus of the page, and the focus of the website its self.

The website was made with the focus of becoming a noticeboard and an advertisement for a fictional community center, and with the design and the content that I have used I think I have created a website highly suitable for it's purpose of being a: Religious community portal for Teenagers.


You can view my finished product by clicking here.

Step 9: Re-Evaluate Design

After receiving my user testing feedback I could now add changes to my website, in order to correct the issues raised. The main problem that the users found was the size of the font, and the navigation to some of the minor pages, such as the gallery page. In order to correct these issues I intend to make the text used in the main body of the website bigger, from 11px to 13px and also alter the colour slightly to make it a lighter shade of grey, to make it stand out more against the dark background.

Gallery page

The other issues raised was only a minor issues, and this was when linking to the Gallery page, the user found it difficult to return, or find how to return to the previous page. The changes I have made is to add a link to the bottom of the main body text, clearly stating to return the user to the previous page.

Looking at the image you can see the changes that I have made, with the return to the previous page link present at the bottom left of the page, which is clearly visible to the user to allow them to navigate more freely around the website.

On the whole I think that the changes that I have made are very telling, and also help with the design. Adding the link to allow the user to return to the previous page was a necessary change that I needed to add, but with the change of making the text larger I feel that the website has become more appealing.

Step 8: Development

Now that I have been into flash and put everything in place it is now time to add the code, namely the navigation to the website. At this point I have created two separate scenes, the first being my enter page, such the user will be greeted with, and the next scene being all of the pages of my website. Creating a link from my enter page to my website pages itself was very easy to do, as I just added a scrolling enter button, which will navigation the user to the website.

Annotation of my enterpage

I also added some animation to the website, mainly on the enter page, as adding navigation on my other pages will be unnecessary and will take away from the main page itself, also there isn't enough room. Looking at the image you can see an annotated version of my enter page, showing the animation added to this page.

User Testing results

The next thing to do is to add the navigation to my pages. This was simple to do as I just needed to add code which would send the user to a certain frame upon clicking on this button. This was relatively simple, and was quick to implement on all of the buttons on my navigation bar on my website.

I also added a slideshow into one of the pages on my website. This slideshow was made with Flash, and simply is just images appearing and disappearing on top of each other, and put on a continuous loop.

This is the table I have created using the results from my user testing, and as you can see I have tested my website on 7 different people, with some being good at using computers, and others not so good, in order to gain a good reflection on each of the areas I have tested.

The 5 areas I have tested are:

• Font - this included font size, colour, family, and suitability.
• Design - this included the layout of the website, the colours used  and the images used in the website.
• Navigation - this includes all of the buttons, and navigation bar of the website, where they easy to find? Easy to use? Easy to navigate around the website?
• Usability - this determines how easy to website is to use, and includes all of the 3 previous points.
• Suitability - is the website suitable for its target audience? Does it appeal to you?

I also asked for any additional comments that the user testers may have, and to justify the marks they have given.

• Mike. W – I found the website easy to use, and easy to navigate, though I found the text too small.
• Ian. T – The design is very good the colours work well, and very easy to navigate.
• Callum. E – The website is very good, and suitable, though I sometimes got a bit lost on the website when looking for the gallery page.
• Lily. H – Very easy to use, and very well designed.
• Charlotte. W – Easy to use, and easy to navigate. The text was a bit small though.
• Daniel. B – Great designed website, with good, suitable content.
• Matthew. D – I found the text too small, and hard to read. Other than that a great website.

After collecting these results I am now going to make changes where needed.

Step 7: Construction

After finishing my design stage and coming up with an idea of how the website will look and function it was now time to start creating my website using Adobe Flash.

I have used Flash before, but never to create a website, so I was a bit cautious when approaching this design stage, but I knew what I wanted and how I wanted it to function, and it was now just a matter of using the code to achieve this.

Another area which I knew would be tricky would be using the library on Flash as this is where all my images would be, and I would be using these images for my navigation, and my movie clips.

Another area which I was worried about using was the code in the flash, having previously used flash I knew how to do things such as added navigation to images to create buttons, and stopping the frame at certain points but in order to make the website how I wanted I knew I would need to learn, and implement more code.

Step 6: Design

After the wire frame stage I went on to the design stage. My design would stay true to my wire frame, and would use the colours schemes of purples, greys and greens.

The design for this website is very simple and low rent, keeping the attention of the text and body, with the design complimenting and hugging the text. As you can see from this image that the design is very closely related to the wire frame, with the only changes being a "back to enter page" button, and the logo being bigger, and more prominent on the page.

This design for the homepage will use the same basic layout throughout the website, with the only difference being the text, and possibly having images on each page.


The design was something that I spent a lot of time looking at, as I knew it would be important, as flash websites are made primarily as advertisements, and such my website that I am creating would need to be designed well, as it is advertising my fictional company.

Personally I think the design of the website that I am creating is very effective, and I think the colour scheme is one of the main strengths of the design stage of my website. By keeping the design simple, and not making it all over the place and using hundred of different colours, I have made a very visual appealing website, which is very easy to read and to function.

Step 5: Wireframes

Now that I have decided on how I am to approach creating this product, and how the product will function I can now go onto the wire framing of the product, and the design.

Main page wire frame

Previously I had come up with a colour scheme for this website, and design ideas, so now it is just the simply task of assembling these ideas into a wire frame. My idea for the colour scheme was always to use purple and grey as the main colours on the website, as well as green. But on further reflection I have decided to just stick with purple and shades of grey making up the body of the website, and with green being in the logo of the page/company.

Here you can see the wire frame that I have come up with for my pages of my website that I am to create. The wire frame is very simple, and continues with the simple design ideas that I have for the website. By clicking on the image you can see that I will be using an navigation bar at the bottom of the page, which will be the main form of navigation around my website. Above that in the center of the page is the main body, which will contain text and images. The logo will also be ever present in the top left corner of the page. Also the colours that I have used on this wire frame will be the colours that the website will be.

Step 4: Written Outline

The product that I am creating is very simple, and thus the outlines for the website will be just as simple. I have also come up with a name, and brand for my fictional website and community center which will be: r3ligion

My product will be a small website, with various pages, all with the primary function of presenting information about a fictional community center for teenagers. This community center is a religious center, where teenagers gather to take part in events and fundraisers around the community. This website will have 5 main pages, with some a few sub pages on the website.
The 5 main pages that I am having on my website will be on my navigation bar, and will be easily accessible. These pages are:

• Home - this page will have a small introduction of the website, and the r3ligion brand.
• Who we are - this page will go into more detail about r3ligion.
• Community - this page will give some information about the events and fundraisers that r3ligion organize. This page will also link to an events page, and will link to a gallery page.
• Our mission - this page will go on to tell about what the company is doing, it's goal and how it intends to achieve these goals.
• Contact - this page will have all the contact information of both the website and the community center, and will also link to a map page, of the location of the community center.

Step 3: Technical Requirements

This website that I am to be creating is a product that I am going to be making in Adobe Flash CS5. I will be creating wire frames and page layout ideas using Adobe Photoshop CS5.

I will be combining my skills of both programmes, as well as some of my knowledge of design to create this community portal for teenagers website. My website target audience is teenagers, preferable older teenagers, around 15-18, though I aim to make this website still very much accessible for all ages.

This website that I am creating will be very easy to use, no harder than a normal website, with it's navigation. I don't intend to add huge amounts of animation, as I feel this wouldn't be as appealing to my target audience, and so I intend to make my website more restrained and minimal.

Step 2: Brainstorming

After doing the research I started to look at doing some brainstorming of my idea and how I would present my chosen topic, and how I would make it into a website, and a suitable advert.

My website would be a community portal for teenagers and I intend to put a lot of emphasis onto the community portal part of the website by making this website almost a message board which people can check for upcoming events.
Here are some of the main ideas for my website, and its function that I have brainstormed:

• Keeping the website simple, and not flooding it with content. This website after all will just be a advert. 
• The website will just be an advert for a fictional community center, and this website will just be the advert for the community center, with the website showing the location of the center, events being held at the center, and various other pieces of information about the community center. 

These ideas are for the website it's self, and its primary function. My idea for the website is very simple, and will function very well as I am making it an advert for a fictional community center, and thus I will focus more on design than adding a lot of text. 

Some of the ideas that I have for design are:

• Keeping the design very simple, and using very little colours.
• Keep the navigation simple, by using just a plain navigation bar (probably at the bottom of the page) and fusing it into the design.
• I intend to add a gallery page, which I will create a slideshow for.
• Purples, greys and greens will be the main colours for my colour scheme of the website.
• I will create the logo myself, and keep it simple, as to fit in with the design of the website.

These are some of the ideas that I have come up with while brainstorming for my website. 

Step 1: Research

The first step in designing my website was to do some research into my selected field, which is Religious Community Portal for Teenagers.

I found this topic quite a hard one to do research in, so instead I decided to break the research down into two different paths: The religious side, and the community portal aspect of the website. 

click here for full template

Firstly I started looking at religious websites, and found most were HTML, and very busy and poorly made, which was a set back for me, as I wanted to create a nice vibrant, well made website but had no idea how I was going to achieve this. I decided to look at some existing templates, for religious websites made in flash, in order to gain ideas.

I decided to look at these two templates as I found them both very appealing. The first template looked very modern, and would be something similar to what I would make my website look like, and function in a similar manner. The template looks very modern, and would be very appealing to my target audience of Teenagers.




click here for full template

 

The second template I looked at because I liked the navigation, and the use of colours. The design its self was less appealing to me and I thought the first template had a better design and appeal,  and if I was to incorporate aspects from both templates I could make a good website that would be very suitable for it's purpose. I also looked at many other templates on this website, as to gain more ideas.



>> click here to check out the rest of the templates.

Topic for my website.

Today I found out the topic for my Flash website that I am going to be making. To help us choose our topics we had to pick them from a hat, and the topic I got was: Religious community portal for Teenagers.

I look forward to this challenge, as at the current moment in time I have no idea how I am going to approach this.