Some background pattern ideas.

Been to B and Q today to pick up some patterned wallpaper examples which might be useful for use as a background for my final piece, rather than a plain black background. I will check these out and see if they give a better feel to the pages than a plain black background, if so I will use them, if not, there was no harm in trying a few things!








Will post the designs with wallpaper tomorrow with an evaluation of how they look, its also the start of the main Flash pieces so wish me luck with those.

Final Design, Home page (with test screenshots)

The first screenshot, shows the basic starting point I had, which I asked people about on Tuesday. I got comments about the difficulty the design presented with reading the text. This was solved by creating a design which had complex text for the logo, but when it came to content, a more improved, easier to read text was used. Looking at the design though, I felt like I had taken out the aesthetically pleasing values of the design by making the text almost more boring to view. So I created yet another design with the text in a box surrounded by holly, to create a more pleasing approach to the design. I finally added the "Autumn/Winter" collection text which combined both previous text colours. I feel I have learnt alot about Typography on the web by getting a hands on approach by consideing it in my designs. I am now happy with both the Flash content and Typography of my designs, as well as colour schemes and navigation. All of which are important in Homepage designs.

Typography

Typography is an important part of webdesign. By selecting a particular style, size or colour, a users interpretation of the site as a whole can be changed dramatically. Clearly then, it is vital that I choose a style of font which clearly links in with the type of site I am creating. Because I am keeping the site simple, I want a fancy, signiture styled font to contrast with the plain background. This will allow the user a clear sense of the design I have aimed to achieve from this part of the project. Some fonts are shown below, which I will consider during the final design process.

Something like the below font would be a good example of the fancy style I will be looking to achieve. This will be also used for the logo. (Examples found at http://www.fonts.com/FindFonts/Detail.htm?pid=203351)




These two fonts have styles which I hope to have on the Homepage, for the descrpitions about the site content, as well as the logo and Mens/Womens links.

For the two content pages (i.e. Mens and Womens), I hope to use a more simple font, perhaps Verdana, which is easily read. This font will be used on the details about content on the site, links to other sites and the navigation information. It will also be used at the bottom of the page in the footer.

Some example fonts of these are also shown below:




So there we have it :)

Perfect web design page from .NET.

Loving the idea of using post it notes to plan out projects like that. Off to Tesco then I feel (Y) :)

Evaluations. More....

Individual Evaluations:
Design 1: The first design, my favourite of the seven, has much of the content that I had thought about during lectures and seminars. It uses some interesting Flash techniques, which will certainly challenge me to build. However, with some research into typography, colour schemes and general web based ideals, I feel this design will be both individual and interesting for the user. The only weakness I can see up to now is that it bends the brief slightly by using larger Flash based content. I will try and negotiate this though, as I’m really excited about creating this large .SWF piece.
Design 2: Design two uses a type of Flash, which I have been greatly, interesting in, and experimenting with throughout the year, Drag and Drop functions. Again, the page uses a Flash slideshow on the Homepage, which overlaps the navigation bar with an opacity layer. The design is landscape, so navigation and resolution could be a problem with this type of page.
Design 3: The third design uses a type of Flash, which I tried last year, 360-degree rotation. The clothes are displayed on a rail and the user can spin this to select the clothing type they wish to be navigated to. The main page is much more simple, to compensate for the technical Flash pages. A weakness I can see already is keeping the vast amount of content within three pages as stated by the brief. If this design were to be chosen, I would have to consider using some more in depth content Flash to embed objects deeper into the page and to appear only when clicked upon.
Design 4: More HTML based content, with discreet use of Flash, example for the navigation bar and information boxes. Design four would be interesting because it would give me the opportunity to combine Flash pages with PHP, something I believe will be helpful in the near future. However, at this current time, I feel that technically I wouldn’t be developed enough in this area to complete a site with this level of difficulty.
Design 5: The fifth design is inspired by a site I found on the FWA website for a T-shirt company, in which users can rotate models at the bottom of the page, and look all around the products they are wearing. When clicked on the models became larger, with more detailed information about the products they were wearing. This is a clever way to show the user around products, however it would be difficult in my project, because of the availability of the products I am showing, and the time in which I have to take such in depth photographs. Therefore, I reject using such time consuming ideas, however useful this one may be.
Design 6: This design breaks away from the stereotypical male and female page, combining them together in the information page, and then using the remaining page as a model page, in which the user can drag their selected clothing from the information page, onto the model to see how the clothing looks together. As well as being highly interactive, I feel that the design has an element of fun, which will keep the user interested throughout their time on the site.
Design 7: This page was designed to be minimalistic in its appearance. The design is split into a clothing page and shoes page, in which the user scrolls across a range of images, and when they like one, click upon this to take them directly to the site which it comes from e.g. Shoes from Topman. I have rejected the idea, but taken the linking to other sites aspect to my final design stages, as I feel it will be a useful function.

Screenshots of final design (Homepage):

Smashing Magazine

Really recommend checking this one out. Website has some interesting info on CSS and HTML, but I found it due to the free fonts and typography it has to offer. Check it out you wont be disapointed.

Evaluation of designs (from sketchbook).

I began with some initial sketches of design ideas in lecures, seminars and free time in which I had a pen and paper available. These ideas became exciting and as you can see I have rooted off from these into my seven design proposals, all of which have a range of different Flash aspects, Styles, Sizes, Images and Multimedia. I have tried with my proposals to create a site which meets the brief given at the start of the project. This includes the following;

- A theme in which I can base my ideas upon: This theme for me is fashion. The site will be a collabaration of different high street branded products, packed into one site. The site will act as almost a personal University shop assistant, advising students on the top fashion styles currently in high street shops. These shops will be decided during the final design process.

- Three Flash elements: As you can see from my designs I have managed to design a range of different Flash ideas which will be both interesting to the user and useful in providing interesting content. The designs include drag and drop functions, photo slideshows, interactive scrollbars and animated buttons. The Flash elements will form a basis for my final design. All will be in .swf format for simple exportation.

- Three pages: The design ideas use three pages of content. All have an introduction page, with a loading bar, and then route off to the Mens and Womens pages.

- Maximum size 10mb. The size of the site will clearly be found when I create the final piece, but I am confident that it will not exceed the restricted amount.

With all these considerations in mind I have decided that my favoured design is the first I sketched out. The page begins with a loading bar, which takes the user directly to a page with a large photo slideshow to the left of the page, and a description of what the site is all about to the right of the page. For this page, I will use text which is in a handwritten style as if written by myself. The background will be dark, contrasting with the bright vivid colours of the slideshow images, and the text white. More information on this page will be given later on in my final design process.

Under the information about the site, I will have two animated links which take the user to the desired page, whether male or female. These two pages, will give advice on specific items which are currently popular in the world of fashion. However, this will be done in a clever, different manner to the average site. The clothes will be presented across the page inside a long JPEG image, which the user can scroll across the page to view. This will mean that these pages will be very long to compensate for the content. The JPEG image, will be sorted by the time of the day, for example morning clothes will clearly be loungers or pjs, whereas evening dress is clearly shirts or dresses. This will flow from the left (morning) to the right (evening) with links to different stages to the left of the page. By clicking on these links the user will jump to the different stages of the JPEG image. The interactivity of the JPEG image will invlove the user hovering over a specific part of the JPEG, and a small pop-up box appearing on the image to give information on that specific item of clothing.

I feel that my final design meets the brief given, as well as challenging me to create a piece which is complax yet highly interesting.

.

Just to show that the work is flowing nicely.

>

Its hard to show work online from an A3 Sketchbook, but heres some stuff I've been doing towards the PUS project (Shauns stuff).

Completed sections of work:

Research












































































Design Ideas (7 so far)




I'm now in the process of evaluating the finished designs as well as starting to design my final piece. The current aspect I'm working on is the XML photo Slideshow which will be presented on the Homepage. I've also developed a signiture style logo, which will be displayed on all three pages of the site.

My final idea is to create a Homepage with a slideshow and information about content on the site. This will be a personal page to the user, in which they can select then, whether to be taken to the Male or Female part of the site. These two pages will have Flash across the centre which stretches out of the boundaries of the browser, but can be navigated using a set of Flash buttons to get from one side of the site to another. I will put some screenshots of my Photo slideshow up later today, to show how I developed the final piece. The script I have developed for this is shown below.












stop();

var myTimer:Timer = new Timer(6000);
myTimer.addEventListener(TimerEvent.TIMER, timerF);
myTimer.start();
function timerF(e:TimerEvent):void{

nextFrame();

}

This will allow the photos to have a delay for six seconds (hence the new Timer(6000) syntax), and then move to the next frame. I will also be adding some transitions between the photos, to make a more professional overall effect.

The next stage of my sketchbook development is to evaluate the seven designs I have drawn up and considered. As you can tell I have already chosen one of these, so this will be the favoured design in my design analysis, however there are aspects of the six other designs that I plan to incorporate into the final design, such as the typography. I am also yet to create my time action plan, which will allow me to ensure I keep on track with the work and not spend too much time on a specific section. This will also include validating and testing sections to my work, as these will be important towards the overall evaluation.

Finally, I will create a Site Plan, which will show aspects of navigation through a flow chart. This way I can ensure that the user can get to any three pages through the page they are on.

This is todays tasks, but in the next few days, I hope to have added a loading bar to my site, as well as begun the Flash piece for displaying the clothing across the Male and Female pages.

Hope everyones projects are going great and I look forward to posting another update in the next few days (sorry again for the delay on this one).

Flash codes for enbedding into Dreamweaver.

src="INSERT URL SOURCE FILE HERE" width="300" height="300"
pluginspage="http://www.adobe.com/go/getflashplayer" />
Alternative content

- For embedding web URL's only, for Flash from desktop etc. use alternative code below:

Evaluation for Mini project

All in all I'm happy with the outcome of the project David gave us this time, it has allowed me to openly explore the concepts of Flash based web design whilst introducing the vitality of thought processed design and varation.

Although my designs were eventually combined to create one final design, I feel I have met the outlined brief given. I could have perhaps been more concerned with the design process, but again got sucked into the project straight away and tried all of the ideas that came to me, something which I cant do during the major project this term, however I am happy that I have actually LEARNT a number of Flash techniques throughout the duration of this piece.

I feel that my content is well structured and meets the idea of an audience well, as it splits into three sections with content relevant for the specific age groups. These being child, teen and adult. I wish though, I had planned my project more thouroughly so that I could have used the ideas, as well as coming up with more detailed variations not just as sketches but also in my Flash piece.

Also, I feel that I have learnt a great deal of AS3 by carrying out tutorials relevant to the ideas I have had. These tutorials have lead me to gaining a basic understanding of using Flash to make things happen. My previous state in Flash left much to be desired, but with these improvements I was able to expand and become more creative with my piece.

I feel that my interactivity has stretched my previuos ability in a way which hasnt entirely flown over my head, but instead made me appreciate the difficulty with some AS3 techniques, however Im sure I will pick up on these as the projects go on. I am particularly happy with the use of Drag and Drop in a more technical and narrative manner in the project. I also like the way I have used the slideshow of injuries, however hope that I can learn more advanced ways of creating these, as this one wasnt as aethetically successful as I may have wished.

Design Exercise 2 - Interaction Design

For our second project to introduce us to the BA side of Multimedia, we have been asked to create a Flash piece based on the safety of fireworks. I'm currently putting alot of time into my other project on the Fashion website, so this side project has shook me up slightly. But I suppose in the world of Multimedia nothings simple and easy, and work is money. Lets try and have abit of fun with this and gain some further experience using Flash AS3. Below are my intial ideas on the projects content as well as what I plan to achieeve from working on the project.



(interesting to base my designs upon).

Who will the audience be?

I have decided to aim my banner at either Adult's keeping their children safe at Firework displays, specifically garden displays. This will be if I decided to go for my first design idea, of creating a small child character and using movement of objects such as gloves to place on the JPEG image as if protecting the character. This will include sparkler safety.

If I decide to do one aimed at teens then I will take a different approach to design perhaps more harshly orientated through video or images. This will appeal more to this type of audience as it will show the concequaences of not using fireworks safely.

It is important throughout to be aware of how the content will affect different audiences and so I will need to outline and concentrate on just one of these.

What are the designs for the visual appearance?

1) Design one is aimed at children and their parents. It will basically be a child character in the centre of the screen, and use a range of different protective objects, such as a bucket for putting out spparklers or gloves for using them. This design will be easy to impliment to the project, because of its similarity to the last project and how it uses identical aspects. I'd like to go on and try this idea as an experiment, due to its game like approach to teaching children important rules in using fireworks.

2 Variations will be used for this design.



2) The second idea takes a different approach due to the differece in audiences. This time I will create a piece aimed at teens, so the content will have to be different and more harsh due to the fact teens are more likely to use fireworks irresponsibly. My idea is to show a video, created by myself, of teenagers buying fireworks, using them, and a negative result of irresponsibly using fireworks. This way will allow more freedom for content such as language and text, due to the fact I am aiming it at a more mature audience. The design will use narrative and move through a day of a teenager before his life is ruined by using fireworks stupidly.

2 Variations will be used for this design.



3) The final design idea is to use a slideshow of images for adult viewers, showing injuries and deaths resulting from inproper use of fireworks. The images will be combined with text to inform the user about events (I will make them up or perhaps research them if I get time), that have resulted from firework displays gone wrong. The images will not be suitable for children under the age of 18, so I will need to figure out a way to stop users under age looking at the content.

2 Variations will be used for this design.



By designing ideas for three seperate audiences and giving two variations for each, I will be able to meet Davids requirements of 6 individual designs. This will also allow me a range of different interaction ideas. All designs will also be linked to the "safer-fireworks" website, so that the user can gain more information from other sources, if needed.