Mock up of the website

Once I had an image of the layout of my website in my head, I opened Photoshop CS6 and designed layout.


When this simple version of the layout was all designed, I started to design the site as it will look like in Photoshop CS6.

Working screen:



Mock up of index.html page –

Mock up - index page-correct

Mock up for rest of the pages –

Mock up - another pages-correct

Site map and file structure

Site map

After having a look at navigation of different music websites, I created site map for my website.

site map

Correction to the site map

However, after I read the reading material that the lecturer gave us about site maps, I realized that the best site map suited for my website would be ‘Flat site map‘. It is basically  a flat pattern where all pages of the site are accessible from every other one. It is used for simple websites with standards topic such as ‘home,about,contact etc.’ and this suits perfectly to my website.

Here is corrected site map:

Site map

File structure

When my site map was designed in Photoshop, I opened Adobe Dreamweaver CS6 and created folders/documents that I was going to work with.


Explanation of the task/research/colour scheme

My task is to design a website about anything I like. I decided to design music website (portfolio) for myself  as I love music and I haven’t got a music website yet.

I started my research with target audience. As my music is mostly piano and guitar ballads, target audience is going to be mostly female range 13 – 35 but also maybe male audience who like soft music. I would say that people that would like my music would also might like few of my favorite bands/singers so that’s why I had a look at their websites for inspirations – Emily Asen, Hunted Valentine, Tegan and Sara and K.D.Lang. I really liked their websites and found them very inspiring. I ‘took’ little bits and pieces from every single one and used it for my design.

Screen shot of Emily Asen website:

emily  —-> I liked the simplicity and colour scheme of the site

Screen shot of Hunted Valentine website:

hunter valentine  —-> Again, colors were dark and footer gave me an idea what to include in footer on my website

Screenshot of Tegan and Sara website:

tegan sara  —-> This website is very interesting with colour scheme and I also liked light box gallery so I decided to use it on my website

Screen shot of K.D.Lang website:

k.d.lang —-> This website inspired me the most with layout as I absolutely loved it. When I saw the background picture I knew straight away how the background of my website will look. Also light containers with texts look very professional so I decided to use them as well. Navigation on the right top corner was something that I saw on more music websites and it is not just a boring navigation in the middle of site so i decided to use it.

Colour scheme

As I mentioned above, most of the websites I had a look at were in darker colours. This is the reason why I decided to use dark colours in my website – black body, grey background, white text because it is contrasting colour with black and it is very readable on a black background. For navigation I used white colour of text but because of usability of the site, users have to know where they are on the site, I decided to use red colour for highlighting as it was on few websites that I had a look at. I liked it and thought it was making nice contrast of colours.


On our lesson we learnt new technique of taking photos of moving image. It’s called ‘panning’.  Instead of taking photo of frozen image by auto sport mode, we set up our cameras on  slow shutter speed (15) and take photos in this mode.

This is photo that I took:


5* review

Before I started to do research on websites designed with JavaScript, I went to the library and borrowed book called ‘Java made simple’ second edition by P.K.McBride. I thought I’ll read a bit information about how Java works etc. before I start to do research on websites. It was interesting and gave me little knowledge on how it works and how to do simple things with it. Then I moved into my actual task I had to do.

JavaScript (JS) is an interpreted computer programming language originally developed by Brendan Eich.  Its syntax was influenced by C and filename extension is ‘.js’. JavaScript adds moves into websites and makes them more interesting.

While doing my research on websites designed with JavaScript, I came across to . 45 examples of websites, some of them well designed, some of them were way too complicated in my opinion (too many things going on at the same time or too slow when clicked or simply not responding when clicked).


Design/ Color scheme: ****

Main colors are red and different shades of grey. The website is responsive so it is big advantage for mobile/tablet users.What I find very interesting about this website is that you have to click on buttons to get information and it is designed so well that it is fun for users. . Every click completely changes the screen and brings new design on screen. When you get to the information about movies, screen is split into two boxes where text and pictures changes every time you click on arrow.

Navigation/ Usability: ***

The website involves audience in content of website because they have to click on different buttons to find out more information. It is very playful but also makes them think what they have to do to get information.  According to the book ‘Don’t make me think!’ by Steve Krug, it is not very good and you should always design websites that are straight forward and don’t make audience think where to click. But also I think that this website is well designed so you know where to click to get where you want to be on the site. This site is interactive as there are icons that lead you to twitter or websites of people that have been working on projects.

Content/ Information: *

I personally don’t think there is a lot of information for users on this website. It’s mostly few paragraphs describing work on different projects for movies so I think there is lack of information. Target audience are movie fans that want to know more about designer of website of their favorite movie and people liking work of that designer.

Cross platform: **

This website is working in Opera 9, Chrome, Internet Explorer 9, laptop, PC and mobile.  Design was not working in Internet Explorer 8.

10/4=2.5 (3)

Bez-názvu-1_03 Bez-názvu-1_03 Bez-názvu-1_03 Bez-názvu-1_04Bez-názvu-1_04

Another website I LOVE the design is . It’s got everything I’d imagine on my website.


Design/ Color scheme:   *****

Main color is grey/black used for background. White color is used for text what makes great contrast with grey/black background. For menu is used blue, pink, orange and light orange colors (sections split into categories according to color which I think it’s great). In Opera 9 and Chrome, face expressions of the man change with little shiny dots; this special effect on man’s face attracts attention and creates feeling of wanting to know what it this website about for people that randomly found this website. The layout is split into 3 parts, header where you can find navigation, links to social sites and image of the man. Second part is navigation created with JavaScript and third part is footer with woman’s face (without special effect) and another simple navigation. Complete design of the site gives you great user experience while you’re on the site. I recommend visiting this website. Design is not responsive.

Navigation/ Usability:   *****

The website gives audience great user experience by grabbing their attention by special effect, giving them lots of information and also links to social sites. This site is simply to use as it’s got great simple navigation on top, then one in big one in the middle of the site and also another one in footer. This gives users easy control of where they are on the site. You can find the same design of the main big navigation in the middle of the site on codrops, what I find very interesting. Overall, I think this website is very well designed.

Content/ Information: *****

Content of the site is great. It gives users all information they need to know about the festival, people who are involved in it, partners, how the festival developed, and older versions of the sites. All of that is not only in text form but also in video form. Great thing about the site is that users have no problem to find information as navigation is well/clear designed. Text is well readable as its white text on black background. The site is linked with social sites so that gives audience opportunity to be interact with the festival even more but also source to more information if they cannot find something on the website. Users can choose from two different languages – English and French.

Cross platform: ***

This website is working in Opera 9, Chrome, laptop, PC and mobile. It is also working in Internet Explorer 9 apart from special effect (explained in section Design/Color scheme). What I noticed about simple navigation in Internet Explorer 9 was that after clicking on navigation button it automatically jumps underneath the logo and after clicking on it again, it goes to its normal position.

18/4= 5*

Bez-názvu-1_03 Bez-názvu-1_03 Bez-názvu-1_03Bez-názvu-1_03 Bez-názvu-1_03

Next website is nothing extra impressive but I decided to analyze it because its simplicity.


Design/ Color scheme:   ***

Main color of the site is white with black color of font, which makes very nice and classic contrast. What catches your eyes when you open the site is big header (picture) of probably American Death Valley and person standing on top of the rock what can be connotation of the power ‘you can do anything ’. Layout of the site is very simple which I like as it is easy to orientate on the site. When you scroll down, navigation stays on top of the screen what is very handy as it gives users control and easy using of the site. Simply said, design is not as nice as on previous websites I analyzed but I like it because its simplicity. Everything on the site is easy to use and find for users. Design is not responsive.

Navigation/ Usability:   ****

I talked a bit about navigation in the paragraph above. Navigation is easy to find underneath the big header, buttons are straight forward and take users to the section where they want to be. While scrolling down the site, navigation still stays on the top of the screen so you can use it anytime you want without having to scroll back up if you’re looking/ reading something on the bottom of the site. Also, there is very simple navigation on the bottom of the site which seems like continuation of the main navigation underneath the header. The site is designed very simple and straight to the point so its usability is very good in my opinion.

Content/ Information: *****

Content of the site is great. There is a lot of information about what they do, video and photos about models showing clothes etc. All of that is well presented to the user. Videos are split into categories so it is easy to get your head around it but also there is category ‘most viewed’ which helps users to find best videos on the site instead of having to watch every single video.  What I found very good on the site was that there is separate section for socialising and interactive users with the site. On the right side there is section for application such as Instagram and Twitter, asking people to interact with saying ‘Show us what Golden State of Mind means to you by tagging your Instagrams and Tweets’. Underneath of it, there are links for social networks such as Facebook, Twitter, Pinterest, Tumblr and Youtube. I think that making big effort linking with all these social networks says that this company is targeting to young people thus the target audience is young generation who is more likely to buy latest trend clothes (opportunity to buy clothes online as giving the users links to online shop). But also gives the users opportunity to find more information about their work/ fashion on social networks.

Cross platform: ****

This website is working in Opera 9, Chrome, Internet Explorer 9, laptop, PC and mobile.


Bez-názvu-1_03 Bez-názvu-1_03 Bez-názvu-1_03 Bez-názvu-1_03 Bez-názvu-1_04

When I analyzed previous website, design was like on the screen shot, two weeks later the design changed and it is like this at the moment:


Next website I’m going to analyse is which I found through .


Design/ Color scheme:   *****

This website is very nicely and simply designed. Choosing of colors (green, white) is nice and professional and so makes nice contrasting effect with text, pictures of area where the hotel is situated (effect of presentation). Design of menu is also interesting, it’ll bring sub menu with design of wave when you show on text. Gallery is well designed as well. With every category, there are picture suitable for the category and you can enlarge images straight away without trying to find pictures of the hotel. I think it’s very clever and also gives professionalism to the site. I like first impression when you visit this site.

Navigation/ Usability: ****

This website is easy to use thanks to organization and navigation of the site. Navigation is right underneath the logo in the middle of the site and it’s very clear and straight to the point with subcategories, which I don’t think it’s very useful for Ipad users.  Also, navigation for checking availability of rooms is straight forward so users don’t have to search through full website to find it. This site is designed in two languages: Portuguese and English. I noticed that Portuguese users have little presentation menu underneath availability rooms menu. Ability to choose between other hotels of their company gives users opportunity to choose what they like better. Second site is designed the same but in different color scheme and pictures.

Content/ Information: ****

Content of the site is clear and gives users information that they need. It’s easy to find and straight forward. Links to social networks give users opportunity to find our more information about the hotels, connect with people who already used their services and see not professionals photos of the hotels and upload them themselves. Target audience are people seeking for holidays.

 Cross platform: ***

This website is working in Opera 9, Chrome, Internet Explorer 9, laptop, PC and mobile.


Bez-názvu-1_03 Bez-názvu-1_03 Bez-názvu-1_03 Bez-názvu-1_03 Bez-názvu-1_04


Design/ Color scheme: *****

Simple and easy designed in nice color scheme (creamy color). First impression is glamor and that it is going to be website for definite target audience. Little presentation on the first page gives you brief on what you can find on the site. Layout is split into four parts; gallery is designed with information about the services the company offers and have feeling of professionalism. Simple said, I like this website because of simplicity and professionalism look.

Navigation/ Usability: **

The site is very easy to use and information is easy to find. Thanks to simple navigation on left side, users can easily orientate and find information. In section Services, there is another small navigation giving opportunity to choose their services and find more information. Users can contact the company straight from the site, which is great and simple.

Content/ Information: *

Content is very brief, not a lot of information about services and what the site is actually about. Gallery is very nice and well designed as mentioned above.

Cross platform: **

This website is working in Opera 9, laptop, PC and mobile. It is not working in Internet Explorer 9.


Bez-názvu-1_03 Bez-názvu-1_03 Bez-názvu-1_03 Bez-názvu-1_04 Bez-názvu-1_04

Photo essay – ideas – composing of music

My task is to create photo essay (photos put together telling a story without words) on any topic I want. After talking to my teacher about my ideas, I decided my topic to be ‘composing of music‘. It is my big passion and I’m good at it.

How I intend to do it: 

  1. take a photo of piano, guitar and violin separately as instruments (maybe different lightning)
  2. take a photo of me sitting at the piano and playing
  3. shoot of me writing music notes (medium shot)
  4. shoot of music sheet with a pencil (close up)
  5. shoot of me with the laptop and the piano (headphones on)
  6. shoot of me working on the laptop (able to see screen+music program)
  7. shoot of the screen and music sheet with pencil (close up)

This is how I’d like to do it but I’m sure it’ll change so many time while working on the essay. Keep looking at my blog to find out how it all goes 🙂

Part 2 – Music/key frames

In my previous post, I described what my task is but circumstances changed a bit and I continued working on the video on my own, not with my class mate Tom.

After I filmed all footage that I needed for my video (with Tom’s help), it was time to cut it and put it in order. I opened file in Adobe Premier CS6 that I was editing before and started to choose right footage I filmed for continuation of my video.


When that was done, I started to choose right music as before you start to edit anything, you have to know the right beats and rhythm so you can cut your footage. It took me very long time to choose the right music but I did it successfully! I’ve chosen 3 different ‘songs’ with different speed and rhythm. The music I was choosing from was music pack from my AS level media project. I insert music into Premiere CS6, then dragged it into ‘Audio 1’ line and started to add footage,cut it, move it into the beat of the music.


Key frames

As you can see on the screen shot below, I used ‘key frames’ in my work for changing between two scenes so it is nice link in to another shot and style of music. Key frames give you more control of what you can do with footage; for example what I did was nice link from one scene into another one by turning key frame down so it gives you disappearing effect. I did it with the music as well as you can see it on the screen shot below. Again, nice link into another song by turning music down.


Here is the screen shot of the finished sequence and working screen –

workscreen 1