Process of Development

This is the sketched development of my website. The very first sketches are on the layout and the site map. Then when I have established the structure of it I started developing the visual elements. At the bottom right I have some examples of multimedia that I have linked my multimedia to.

Here are some larger variations.

Composition and form + Research

Great compositions don’t just happen by accident. They take planning, patience, and a knowledge of all the visual elements at your disposal. The great thing is, no matter how much or how little talent you have, you’ll always be able to improve your art by sketching out a good composition before you begin.

POSITIVE & NEGATIVE SPACE

 Positive space is any object or shape that stands out from the background and registers to the eye as “something.” Negative space is the background, or space around objects. Usually it’s suggested that you keep approximately equal amounts of positive and negative space to make a work feel more balanced. If you don’t have enough negative space, your art may feel busy and crowded, but too much negative space can cause the work to feel empty and subdued.

CONTRAST

Visual art should have a full range of values from dark to light. Without bright highlights and dark shadows, an image will often feel gray or washed out, and will be less interesting. Darker areas in a predominantly light section will stand out and draw the eye, and the same is true for the reverse. Use this to focus attention but watch out for unintentionally doing so. Make sure you’re not adding emphasis to a corner or edge of a painting if your focus is meant to be in the center.

SIMPLIFYING DISTRACTING ELEMENTS

Too many shapes, lines, or colors can distract or confuse viewers. If you want the viewer to notice or return consistently to one part of the painting, simplify the rest of it. Decide what the focus should be and if YOUR eye gets distracted, change it! Another way to simplifying your art is to get closer to a single object. Leaving out the peripherals and zooming in until the whole frame is filled with only one thing always brings attention where you want it. Of course, doing so will change your positive/negative balance drastically.

reference: http://emptyeasel.com/2006/11/24/9-steps-to-creating-better-compositions/

Guidelines for Better Photographic Composition: Rule of Thirds

 The lighthouse seems well placed in the upper right just because the rest of the scene fits nicely into the format.

 

FRAMING

 The horses and their riders add considerable foreground interest to this scene. The overhanging tree branches complete the frame and add depth to the subject. When you use people for scale and foreground, make sure they look into the picture area.

 

SIMPLICITY

 So, you can simplify your pictures and strengthen your center of interest by selecting uncomplicated backgrounds, avoiding unrelated subjects, and moving in close. If you want to make your center of interest even more dynamic, place it slightly off center in your frame as we have done with this young artist. 

 

Generally, pictures with subjects directly in the center tend to be more static and less interesting than pictures with off-center subject placement. 

reference: http://photoinf.com/General/KODAK/guidelines_for_better_photographic_composition_rule_of_thirds.html

The information gathered for the composition in photography came in very handy when designing the layout for the website. It provides with very good examples that improved my understanding about composition and form.

 

 

 

 

 

Materials and equipment + Media selection and communication

These are some of the photos I've taken of the museum. In the beginning the idea was to have a lot of cut elements from the museum like the about.html page but then I thought it was not going to be very interesting as well as experimental.

Some of the very first steps I took in creating my website are in Photoshop. After I had the initial idea I started digitising it and this is in the very early stage of development.

After the idea for the slideshow on the homepage has been finalised I started experimenting with particles in Adobe After Effects to achieve the wanted result.

The client liked the test I did for the meeting. The thing he wanted though was interactivity. I had no other choice but start dabbling with Flash.

The final design of the homepage.

Fumbling around in Flash.

Although some tutorials for Dreamweaver were followed throughtout the process of development
I still had problems with the coding. Luckily, with the help of peers and tutor I managed to get it right and understand the way it works.

Research + Critical thinking and contextualisation

The original website of worcester museums contains a lot of information about a lot of museums. However, the huge amount of information sometimes confuses the user and he cannot quickly find what he is looking for. In my opinion, this website is an example of this. The information on the homepage is too much which does not give the freedom to the client.








 Comparison between the original and my website designs.







The Museum of London website has a slightly different design. It does not have that musch information on the homepage, which I think works quite well because it does not get the user lost. The homepage has some main topics from which the user has to navigate through to find what he or she wants. Indeed, this is the downside of it. With this kind of websites sometimes it is better to use google to find what you are looking for in this website rather than using the navigation in the website.

The design of the natural history museum website reminds me of the museums worcestershire design. Again, it has a lot of information on the homepage which in some cases works very nice if the user finds the information he/she is looking for on it. This is a well-known museum, therefore this type of design must be working very well with their clients.

Something completely unrelated to the museum websites I've looked at is the video copilot website design. It has a totally different layout and purpose but the simple design and easy navigation gives the user the freedom to browse through it. I was thinking would not it be interesting to make a website for the museum using the style of this website. It uses mainly visuals to navigate the user through.

These are actually all the things I took from that website to experiment with.

  Here I've put some of my main inspirational websites created from my colleagues.

 - like the gradient in the background but it makes the text at the bottom hard to read
- the positioning of the images does not seem to be successful either.
- if you scroll down, the menu moves with the screen, as if it is stuck which I found to be rather helpful
- the header is on the left side and it specifies the area where the buttons are. It is not usual for a website and in my opinion it does not look quite professional.

Another example for a layout which was not taken to a further development because I thought this would not fit a museum website.
 - like the use of typography
- like the use of background
- the header, body and footer are part of the background, which looks nice - keeps everything together.

This one is a very good design for a gallery page because it has thumbnails of all the gallery pictures which contributes for a easier navigation. Simple header. However, i dont like the little topics at each row - they are very small and hard to notice.

- like the animation of the buttons
- the picture at the top part of the body brings professionalism to the website
- pretty straightforward, easy to navigate
- well structured
- nice colorscheme





http://www.amnh.org/

http://www.villa-rustica.de/tour/tour14e.html

http://www.decordova.org/

http://www.nga.gov/collection/

http://www.museumoftherockies.org/Home.aspx


MULTIMEDIA

http://www.sbs.com.au/dragonchildren/#/the_dragon_children_homepage

 






Dreamweaver + Photoshop - Basics
http://www.youtube.com/watch?v=W7XpOzJHRU4

Animated Graphic in Flash
http://www.youtube.com/watch?v=Oddd-bO8Dhc

Flash Movies into Dreamweaver
http://www.youtube.com/watch?v=opn9Q6Yksb4

Make Particular Loop
http://themographblog.com/2008/04/15/loop-particular-the-right-way/