Adding Extra Content Boxes

The template I was using for the content slider originally had 5 boxes, but I needed 6. At first, I was confused on how to add another box, but I found out how to do it in the CSS.

The mask's width is how long the site is. When I added another content div, I had to change 500% to 600%, as there were not 6 boxes. That part was simple enough, but the width also had to change otherwise the box would be pushed down below the rest of the site. The width percentage has to be 100 divided by the number of boxes, which in my case was 16.6.

Site Limitations

Whist making the site, I am finding various problems that I am finding hard to overcome, Some of which are not possible with my current HTML knowledge. One of these problems are with the background imagery. On the site I was inspired by, Pixelmess, they had different background images overlapping onto other divs, but I cannot figure out how to do this, so I have had to limit myself to one background per div. This also brings up the problem of different monitor sizes when it comes to making two background images link up, the images will look different on every screen. One way of solving this would be to have the backgrounds repeat on the x-axis, although this won't work for some as one end of an image will be linked with another.
The only way I have thought of overcoming this is to make very long versions of my background images. Although it takes up more space, I am pretty much guaranteed that these images will fit on any monitor size.

Another limitation was the amount of space I had for content. I didn't want the site to have a scrollbar, so I can't make the site too long. Therefore, I have to limit my space by using thumbnails with lightbox and sliders to fit all my content in a small space.

Uploading my Fonts

To get my fonts to work on my site, I used a site called Font Squirrel to mae working font faces with the fonts I had downloaded previously.

I used their @font-face generator to upload the fonts. I then had to download the folders with all the css and code necessary to get it working on my site.

This code linked the fonts to my site, I had two for both of the fonts I picked for my site.

I then had to specify where to show the font in my CSS

Changing my Content Sections

The slider template had its own layout template when I got it, and the navigation was on the content boxes itself. I had to changed the CSS of the page myself to have the navigation at the top of the page.

Here is the code for my navigation bar. The position of it is fixed so that it is always at the top of the page, even if the page is scrolling to another content box.
To get it to work with the content scroller, I had to add a class to the navigation div in the html, so it would work with the jQuery.

My content boxes were changed so I could add more content to them.

I also changed the background colour of the content box. This was done in RGB values so the transparency worked on the background. I wanted transparency so you could see the background images clearer.

The selected class works with the navigation. It puts a white border around the div you are currently on, which is useful for navigation.

Making My Backgrounds

Whilst making the site, I have found that making that background has been the most time consuming part of it, as many of these require drawing from scratch. For my backgrounds, I have looked at various existing levels and have given them my own personal style, and fit them into my site accordingly.

Whilst testing the slider on my site and trying to see how the backgrounds would fit together, I mocked up this sketchy version of a final background. After making this version, I then went over it again, but made it much more detailed. The lines are also neater, and were mainly done with the line tool in Photoshop.

This is part of my finished first background. The drawing is more detailed, and I imitated the style of the level from the game.

Getting the Content Slider to Work

I have now found the code for a content slider, one that works horizontally. I am starting to get it to work with my site, although there is not much to it yet as I am still planning out the background imagery.

This is how it looks so far. I need to change the colour scheme accordingly.

Starting to Build My Site

Before making the visuals, I want to make sure I can code the website properly and get that working. I am currently looking for a way to make the site scroll horizontally, but in the mean time I am going to plan out the sizes of the content divs and the navigation.

Pitch

In my pitch, I showed my progress on how I got to my proposed idea, including my failed experiment. Overall, my idea was praised for being visually appealing, which is good as I was not pleased with my first idea before I thought of the video game idea.
I was told that the site could look very good if done right, so I am hoping that I can make this site look visually appealing, and that I can get the background effect on my site to work.

Wire Frame Mock Up

For my mockup, I used the levels I had gathered, and have laid out where I would the navigation, background images and content boxes to go.
Firstly, I made the wire frame. This helped me plan out things at first.

I then went on to add more details for my mockup, including gradients and background images.

My finished site should look somewhat like this.

Colour Scheme

From the video game levels I had collected before, I looked at the colours used on those. The main colours used were blues, greens and browns. These colours would be used on the levels themselves in the backgrounf but I could also implement them into my layout colour scheme as well, such as using green on the navigation bar and blue in the background.

Fonts

To fit in with the pixelly theme, I have looked at fonts that are also blocky.
The first one is called Pixelmix

 

This font is thin, and would work well for the main body text on my site.

The second font I found was LL Pixel

This font is thicker and the letters are made up of blocks, It would work well at bigger size so I would use it on something like the navigation bar.

Visual Style

As I liked the Pixelmess site a lot, I have decided to go with a similar idea, although I am going to incorporate video game levels in my design as I like video games a lot, particularly older ones, which would work exceptionally well with this sort of background and style.

 

These sort of levels would work well in the background of my site.

Favourite Site So Far

After more research, I have found a site that I really like the look of. It's a site called Pixelmess.

They use a pixel art style for the background of their site, making it look like a world. I really like this idea, and I think I will experiment with it a bit.

Their site also uses a horizontal scroll, which I have decided I will use on my site. The background scrolls with the site, which is another thing about the site that I really like.

Experimenting

I experimented with how to make a site layout similar to LittlePixel. I wanted to make a similar looking site and fit it to a different colour scheme that I like.

 

After making it though, I don't really like it. Although I like the colour scheme, I don't feel that the visual style is strong enough to make a good looking website.

I'll continue to research sites to find one that inspires me.

Site I Like

After doing further research, I have found a site that I like the look of. It is called Little Pixel

I like the look of this site because I am fond of pixel art, and the boxy, pixel style is reminiscent of that. I also like the colour scheme of this site. The mixture of the bright colours goes well with the plain white background. The minimal use of colour doesn't distract from the imagery on the site, either. I think I may be moving forward with my visual style now.

Looking at One Page Websites

I started my research by looking at existing single page sites. I came across a site called 1 Page Web Design, which showcased single page sites. This site helped me a lot when looking for research.
The first site that caught my eye was called Vanity Claire.

The site uses a lot of bold colours ,and also looks very minimalist. I like this sort of style, it works well for a portfolio site as the layout is not too distracting. The site scrolls horizontally, which is also what I want to do with my site.

Each section is colour coded, and the pages look nice even with the bold background colours.

The second site I looked at was called Fuel.

 The site is very minimalist, it doesn't not have much imagery, but the simplistic style works, as the concept behind the site is interesting. When a link is clicked, the background of the site changes colour, which looks nice. The content simply fades in and out, so there is no scrolling on the site.

 The founders page features rollovers of the two founders, which keeps the site looking minimal until you want to see he hidden content, which is a nice feature.

The third site I looked at is called OwlConcept.

 The site is image-heavy, as the whole background is an image. Content appears in a box on the left, and background of the site doesn't change.

There is a portfolio tab on the right, however, that opens up to reveal light boxes for images of their work, and the background changes to white. This is probably because the main background of the site could distract from the portfolio images.

So far, I am liking the look of the first site, although I am still unsure of where to go with my visual style.