Next Stage...

Now that I have come up with my final mock up, I can now move on to start building my website.

The first thing that I need to do is to get all of my images ready and named so that I can put them into my code. In Illustrator I will open up each image and save each one out for web and devices.

Another thing that I need to do is to make sure that all of the text that I put in site is correctly spelt and the grammar is correct. So what I have done is typed it all up in Word and then copied and pasted it in my html. 

Once I have saved all of my images, I can then move on to start building my basic layout where I can then move on to style the page and add my relevant content. 

My Final Mock Up

This is my final mock up of my website, where I have now included images.

My Site

This is what the top of my page will look like. I have gone for a vertical and horizontal navigation bar where the vertical will come down as the page is scrolled. I didn't go for designing a logo, but I have instead included quite a big title in the top left hand corner of the page. I liked the use of straight lines, so I have incorporated this idea into breaking down each section of the page. I have placed a yellow line under the main heading and included an image of some bunting which I think works pretty well with it looking like it is hanging from the line. I decided to go for a text box which has rounded edges, I made it a creamy as I didn't think white would work that well against the beige colour background of the whole page. In this box there will be some text which is about me.

Underneath the first text box I placed another yellow line and the under that another text box, which is for the Photoshop section. Just below the box there will be an image of a branch with an owl on it, the image just goes over on to the box but not enough to interfere with the content in the box. In the box there will be some text about what I have done in Photoshop with an arrow which slides on to a clear box which will display the work that I have done. As well as the image there will also be another line to divide the page. After the Photoshop box there will be an Illustrator box which has the same principle as before.

The layout is the same as the Photoshop, however the image will be on the opposite side. Instead of having an owl there is an image of some bunting which looks as though it is hanging from the tree. In the box there will be some text about what I have done in Illustrator with an arrow which slides on to a clear box which will display the work that I have done. As well as the image there will also be another line to divide the page. After the Illustrator box there will be a Final Cut box which has the same principle as before. In the box there will be some text about what I have done in Final Cut with an arrow which slides on to a clear box which will display the work that I have done.

Finally the last box will be about what I have done for the Web. The box will have some text about what I have done for the Web with an arrow which slides on to a clear box which will display the work that I have done. Just above the box there will be another yellow line an image of a branch this time with a heart hanging from it. At the very bottom of the page there will be the footer, which will be an orangey colour which goes with the rest of my colour scheme. In this I am planning on having my name and email address. 

Imagery Ideas

Now that I done my mock up, I'm now going to experiment with imagery that I could include on my site.

These are some images that I collected, when I was searching for ideas.

Above are some of the images that I have drawn and experimented with in Illustrator. Some of the images I have traced and then coloured using my chosen colour scheme and then the others I have just experimented with using shapes.

With this image I made three versions using the colours from my colour scheme. In Illustrator I traced the original image and then just coloured it in. I'm not overly keen on these images and I don't think they would work particularly well in my design, however I think that it would be worth experimenting with these and play around with different effects and changing the opacity.

I really liked the original that I found and I'm pleased with how it turned out after I traced it in Illustrator. I think that my chosen colour scheme works really well with the imagery. I think that I am going to include this in my design although I might try out repeating the use of the branch down the page but I don't think that I will use the owl on every branch and try out different imagery for it.

After drawing both of the images, I then went on to put them together to make one image.

These images are a result of experimenting in Illustrator. I wasn't overly sure as the sort of images that I wanted to include, so I thought that it would be a pretty good idea to play around and try and come up with my own images using different shapes. I experimented with using hexagons to make a flower and also the circle. I really like the result of using the circle tool for the flower, I wasn't sure as to what sort of result that I would get so I just tried overlapping and rotating the shape and I came with these. 

This was another owl image that I found. I had a go at tracing this and colouring it in. I decided to experiment with some effects and tried out the 'film grain', which worked pretty well.

Another idea for imagery that I came up with is bunting. I thought that it would fit in pretty well with the imagery that I already want to include and I could use my chosen colour scheme to fill it as well. I started off by browsing through images of bunting and I found this one above. I opened it up in Illustrator and traced it. Although the colours are from my colour scheme, I wanted to use these for each flag to represent the software that I have used. For example the blue represents Photoshop, the orange represents Illustrator, red represents Final Cut Pro and yellow represents Text Wrangler.

After coming with the idea of having the branch image dotted on the page, I then started to think about what other images I have on the branch. I then remembered that in my room I have got some hanging hearts, I also have seen quite a lot of them in shops too, I thought that I would try out having a heart hanging from one of the branches. Once I came up with this idea I then had a look for images of hanging hearts and the one above is an example that I particularly liked. I opened the image in Illustrator and went on to trace one of the hearts. Instead of using a colour from my colour scheme I decided to chose a slightly darker shade of pink, which I think works well and I will try to incorporate this colour into another part of my design so that this image doesn't look odd when it sticks out more than the other images. Here I have tried out hanging the heart on the branch and I think that it works really well and also looks good.

My Website Mock Up

After coming up with designs for my navigation, title and content boxes I then went on to make a full page mock up. I haven't included any imagery in this mock up and the next thing that I am going on to do is to experiment with imagery in Illustrator.

My Website Mock Up

After presenting my pitch to the group, I then moved on to develop my mock up idea further and in more detail.


Navigation


I decided that I wanted a horizontal and a vertical navigation bar. From looking at examples of one page websites I found that on quite a few of them I needed to scroll all the way back to the top of the page to find the navigation, whereas on some of the ones that I found they had both sorts of navigation and the vertical one came down the page as you scrolled. 

Horizontal Navigation

This is how I would like the horizontal navigation bar to look. I decided that I wanted each link to be in its own box and for the boxes to separate and each with a different colour. When I originally made my mock up I used the font 'Helvetica' for the text but since pitching to the group I decided to change it to a font called 'Happy Monkey', which I think looks more effective and in a way more appealing.  

This is what my navigation looked like when I had the 'Helvetica', when you compare the two the 'Happy Monkey' font looks a lot more appealing.

This is how I want the vertical navigation to look. 

The idea of this is pretty much the same as the horizontal. I decided to keep the colours in the same order, which will hopefully make it easier for people looking and using the site. I also think that it would messy in a way if I decided to use different colours for each section.

Title

This is what my title looked like when I presented my pitch to the group.

I used the fonts; Cooper Black, American Typewriter, Chalkboard and Helvetica. From the comments that I received about my choices, I knew that I needed to go on to develop and experiment with other fonts and see what visually works the best. I went to have a look some different fonts and I came with this design:

I prefer this style to my original one. The fonts that I have used are; Happy Monkey, American Typewriter, Poplar Std Black and Braggadocio. I think these are a much better choice as they visually look better and at the same time are still clear and easy to read.

The inspiration for how I wanted my title came from the website www.flintboutique.co.za and above you can see on the right their title design and my interpretation on the left. I liked the idea of having lines above and below the words, so I decided to try it out on my title. I opted to use an orange colour, I thought that the colour worked well with the colours that I had used for the words and also with the colour that I wanted for the background. 

Content Box

After coming up with a design for my navigation and title, I then moved on to come up with an idea for somewhere to put my content. I quite liked the idea of having rounded edges and having a low opacity on the fill of the box.

Like with the title I liked the idea of having lines above and below. I decided to experiment with this idea for my content box. I chose to have the lines in a yellow colour, I thought that it worked well with the rest of the colours that I had already picked and stood out effectively on the page without being distracting. 

This is what my content box looks like with the yellow lines above and below it. This will be the layout for all of my content boxes. I am also thinking of having the title for each section on an angle going across the top left hand corner of the box. 

Above is how I would like to have my titles for each section. I am not sure just yet as to what font that I want to use, but in this example I have used Cooper Black, which I think looks and works well. I think that I will stick to the colour pink as it stands out and is clear to read.

Ideas/ Pitch

Now that I have looked at a wide range of one page websites, I can start to design my own website. As well as beginning to think of a design I also need to put it in a pitch to present to the rest of the group. 


The first thing that I did was look back at the research that I did and the focus of the two websites that I particularly liked. 

http://www.flintboutique.co.za/

From the first website that I looked at I picked some of the elements from the site that I really liked and want to use and incorporate into my own design. The main heading, which is pictured above, is something that I would really like to try myself and I think would look really effective. I have also picked out the images, I would like to put my own mark so that it would pretty individual to me on my own website. 

This is the other website that I looked at and took elements out from the site. I have pretty much taken the same bits out as I did with the previous website, and I now feel on the right track in coming up with a design for my own website.

Moving on from looking at these two websites, I then went on to look at how I wanted my layout for my website to look. When I was first given the brief I initially thought of having my layout to go from left to right instead of having one long page, however after researching other one page website I felt more swayed to having it as one long page. I thought that I could have a more effective design by having it that way and as I wanted quite a simple design I thought the long page would fulfil what I wanted to achieve. 

This is a rough layout as to how I would like my page to look, its quite simple but I think it will just as effective once it has been made. I am thinking of having the title of the website in the top left hand corner, whilst next to that on the right hand side having a horizontal navigation bar. On the left hand side of the page I would like to have a vertical navigation bar that will come down the page as people look through each section, this would mean people would be able to jump to any section that they want and they wouldn't need to keep scrolling to the top of the page to get some navigation. Down the centre of the page there will be the content for each section, which will be broken up with some sort of graphic. 

After looking at layouts, I then moved on to colour schemes. I knew roughly the sort of colours that I wanted to use, it was just a case of experimenting with them and seeing how effectively they worked and if they didn't then developing them and finding different colours that I could potentially use.

These were the initial colours that I came up with. I knew these were not the exact shades that I wanted for my website, however I liked the idea of using mainly pinks and blues. After experimenting in Illustrator with the types of colours that I wanted, I settled on using this colour scheme:

I chose to use lighter shades of the initial colour scheme that I came up with. I based this on the idea of the first website that I looked at, with the use of pastel, light colours which I thought looked effective and appealing. I am going to use the beige type colour for the background and then use the other colours for imagery, navigation and for the headings/ titles. 

From looking at layout and colours I then came up with a flow diagram for how I wanted my navigation to look. 

I want the navigation to be simple and easy to use, so each page will link to each other.

When it came to looking at fonts for my headings/ title I was a bit stuck as to what to use. I knew how I wanted to look and I wanted something to show in my pitch. These were the initial fonts that I chose to use for my mock up.

They are not particularly exciting fonts, however I am going to work and develop them and come with a selection of fonts that look slightly more effective and appealing.

http://www.flintboutique.co.za/

This was my main inspiration for my title. I like the idea of the different fonts and having each word a different colour. I also thought that by having some of the words all in capitals and some just in lower case was really effective and it meant that each word was able to stand out individually. In Illustrator I went on to try doing this style for my own title, I used the fonts that I initially came up with.

This is what I came up with. I used the colours from my colour scheme and used the same idea as the heading from the website. I still need to work on developing this further by experimenting with some different fonts that aren't so boring.

In my pitch I wanted to include some graphics that I was thinking of including in my site. I decided to show some images that I found on the internet and next to that some that I have experimented and made in Illustrator.

The graphics on the left are what I found on the internet and the graphics on the right are just a few that I came up with in Illustrator.

After coming up with all this, I then went on to make a rough mock up of some of the page using Illustrator. My mock up isn't completed but I wanted something to show to the group for pitch, so that I got a chance to receive some feedback on my idea and then I could then see from the points what I could to improve/ develop my idea further.

This is my mock up that I put in my pitch, it doesn't show very much of the page but its just a rough idea of how I would like things to look. I don't think that I would keep the graphics that are in it, but I was just playing around in Illustrator with potential ideas. I also experimented with colours for the background and the colour of the lines that will be used to break down the page.

---------------------------------------------------------

After the Pitch:

The feedback that I received from the pitch was really positive and I can now move on to develop my idea and come up with a full page mock up where I can then move on to make my site properly. The main comments that I received were about some of the graphics that were on the page, which I completely agreed with and I'm going to change. There were also points about my font choices which I found helpful as I now know which direction I need to head in in order to develop it further. 

Research: One Page Websites

Whilst I was looking through different one page websites, I came across this page:

http://www.flintboutique.co.za/

I was instantly drawn to the design of this website and I felt that the graphics that had been used were something that I would quite like to include/ incorporate into the design of my own website. There wasn't anything that I didn't about the page, I thought that the colours worked really well and the effect in my opinion worked really effective. The images were something that I particularly liked and were the thing that drew me to looking through the page, I liked the idea of having the image one colour and avoiding the detail, on the bird for example. Again the effect on the images worked really well and made the page more interesting to look at.

The title on the page was something that stood out for me and I thought that it would be something that I would quite like to have a go at experimenting and try and put my own spin on. I really like the idea of the different fonts for each word and also having some in capitals; I thought that it was really effective and was at the same time still really clear and easy to read. I also thought that the colours that were chosen for the text worked really well too, for me it broke down the words clearly especially they were spaced right next to each. This is definitely something that I am going to experiment and try out for my own design.

This was another website that I really liked. There are some elements in this page that I really like and would like to take out and incorporate into my own design. In particular the colour scheme was something that drew me to the page, I thought that even though they are fairly dark colours they stood out really well on the page and worked well as a whole. Another part that I like the imagery, I think that this would be the sort of things that I would include in my own however I would probably take the idea of just using colour for the imagery and avoiding adding detail like the eyes for examples. The font is the final thing that I would take away from the page and incorporate in the same way as the previous web page.

Research: One Page Websites

After receiving the brief I went on to have a look at existing one page websites. 
Initially I was thinking of having my layout that goes from left to right, but after having a look at the one page website examples I felt more drawn to having a just one long page. Many of the examples that I found went down and most of them I preferred the design of compared to the left and right websites. 

The screen shot above are some of the one page websites that I found when I was researching. I chose these one in particular as I thought the overall layout and design were the most memorable and effective. 

http://www.mymcreative.com/

http://www.janploch.de/

http://playtend.com/our-apps/

http://vanityclaire.com/