Inspiration from Existing Websites

In this post i thought i would show and talk about some websites i explored and looked at to gain some inspiration for my website. The websites i explored had great user interactivity and what i thought were simple yet effective.

The first website i found was Cascade Brewery Co. The Website itself isn't responsive to Tablet or Mobile devices, however i still think the Desktop design could easily be adapted to those devices.

---

Cascade Brewery Co.

The layout of this Website is fairly basic but very effective. I really like the use of 'tiles' as buttons that also act as navigation for the user. I think this makes the Website very user friendly, so people will want to stay on the website rather than have it cause confusion by a complex design where most people will most likely leave the page. I like the colour scheme used on this website as it makes me think of a classic irish bar and the logos used on the tiles very much associate with that. I also like the art style used on this website within each tile, they remind of a 1940s war propaganda poster which makes me think that the company has been making brews for a long time so it is a trusted company.

---

ING World Magazine

The next website i looked at was ING World Magazine, the website is very responsive to other devices and i like the way it responds to each device.

Desktop Version

Tablet Version

Mobile Version

I like the layout of the website as it is a single column website that uses the full width of the device you are viewing the website on. While the content of the website is mainly images that link to other parts of the website, the home page is very simple and user friendly, you can see that the main focus is the styling on this website; as it is a magazine it is understandable that this is the main concept. A lot of hover zoom and z-index is used to create a 3-D effect for the user when they are scrolling down the page. I personally like this style on websites and would like to use it on my own websites however it takes a lot of time and is a very advanced piece of coding to be able to get it right!

The way the website responds to other devices is very simple and manages to maintain the same style throughout each devices, so you know you are on the same website where as other websites look very different on the mobile version in comparison to the desktop version.

---

Glastonbury Festival

Glastonbury Festival is a music festival that happens every year in Somerset and is certainly the most popular music festival in the U.K. Recently the website got a new design that is fully responsive to other devices.

Desktop Version

Tablet Version

Mobile Version

The third website I looked into was Glastonbury Festival. As of last week they re-designed and launched a brand new website for this years event. 

This image is what the old website used to look like. The main purpose was to show to the user the spirit of the festival while maintaining a good user interface. Personally i do prefer the old website background and the general look and feel that it had in comparison to the new one. However the old website was not responsive and the interface was getting outdated as it had been like this for a few years.

The new website does bring a different look and feel that i do think is new and brings a new vibe to it. It definitely has a Art style to it which Glastonbury is a festival of "Contemporary Performing Arts". The font style is a Bold "LeagueGothicRegular" and the texture looks like it has been spray painted on to a wall to give that "youthful" look about it. The colour scheme are very bright colours, which of most are primary colours. There are no colours that contrast together, the colours do match with the banner that appears at the top of each page, but i think they also wanted to use colours that were the most bright and eye catching to the user and not go into too much detail with the reasoning behind it.

The website is split into two columns. On the home page there is a slideshow showing off all the acts that are performing that goes across the width of the page, but underneath that are small boxes that are headings of the big news that is happening at the event.

I think this a good use as it makes the website not too text heavy, especially as its only the home page so you wouldn't want it full of text as this can seem unappealing to the user.

On the right column is a list of useful information such as ticket information, how many days until the event and live tweets from their official Twitter account. This column is the same on each main page as it is vital information that people will most likely want to be able to access from anywhere and not want to have to go back and forth between pages to find out some important info.

In my website I would like the responsiveness of the ING World magazine when it scales down from Desktop to Mobile, and the simplicity of the Glastonbury Website in terms of content. I do like the art style Glastonbury has but i don't think it would work for a website about Oceans. I might try and experiment to see if any art style would potentially work while keeping the audience relevant and not completely changing the original look and feel.

Website Progress and Responsive Website Coding

Before going to OFFF i had some progress on my website. I thought i would use this blog post to talk about the progress of my website and the coding behind it all.

This is a current screenshot of my website in the desktop view. So far i am currently happy with the way it is going. My main focus is to add all the content in first and then design it all later as that takes a lot more time and effort and i would rather have all the information i needed in first.


With having experience from my A Level courses in Web Design, I found it easy to get back into coding again. There were a few changes to now having to work in HTML5 and CSS3 but luckily they were not major changes and actually made some tasks easier for me to handle.

To start off we were shown a basic skeleton frame that changes the layout of a column and makes it responsive for desktop, tablet and mobile. We would be using that frame for our own website to make the responsive side of it a lot easier to handle.

Skeleton CSS

This is a screenshot from the Skeleton CSS page. As you can see the container is 960 pixels wide and it is split into 16 columns. Depending on which column you choose will determine the size of the column

Skeleton FrameWork HTML Example

This is what it looks like in Chrome or any web browser. As you can see it is the same group of text just copied and pasted into different columns, you can also see how the columns shape the text to fit perfectly within the container for the desktop size. I also added in some lines to go across the page to add some style and to show the separation of the columns more clearly.

My HTML for My Website

So for my Website i have included in the Head Tag so that the skeleton framework will be applied to it. It also includes the Specific Media sizes so it will work for on Tablets and for Mobile.

Media Queries

Here is some Media Queries for my website that applies to different width sizes of the browser, depending on what device you are viewing it on. For example I have a slideshow in my website that you can view on the desktop and tablet, however i decided to remove it for mobile devices since the images would be too small and it wouldn't look as effective as it does on the other devices. To be able to achieve this i use this code in the Mobile Portrait size to Mobile Landscape and Mobile Landscape to Tablet Portrait media query. .slideshow { display: none; } This would then remove the slideshow when i shrink it down to mobile size.

The screenshots above show the difference between the 3 devices on which my website is displayed, you can see the difference in font size, the slideshow not appearing on the mobile site and the navigation is styled differently.

I am happy with the progress i have made with my website and out of all my websites i have created this one is the one i'm most proud of, so far i've encountered no major problems with my coding (yet!) so with this progress i hope to be finished soon and will post some more blog posts about other elements of my website.

OFFF Festival Barcelona 2014

So after returning from Barcelona to see the OFF Festival i thought i would write a blog post sharing my experience from the trip and what i thought about it.

The event was split into 3 days, from Thursday to Saturday, starting at 11:30am and ending at 9:00pm. Each speaker was given a time slot of about an hour in one of two rooms. There was the Roots room where roughly 3,000 people could be seated and the Open Room where only about 300 people could be seated. Obviously the larger more popular speakers were presenting in the Roots room and where I saw all the speakers i wanted to.

The Roots Room

Personally before the event i had not heard or known of most of the speakers that had come to present their work however when they showed what they had created i had more than often come across their work and was just unaware who had created it. The first speaker i saw was Lorem Ipsum; They were a design studio that is made up of people from around the world and they were responsible for the look and feel of the entire event. They created promotional videos, posters and what the stage looked like.


After that I watched a Design Studio Called Polynoid. I liked the work they did, however what stuck out for me the most was what they were talking about when it came to working in this field. They talked about Client work and how the money was not great and how they were not happy with what they were doing. Overall it set a reality compared to other success stories where people would talk about how much they loved where they were at and how much they enjoyed their work.

Another speaker i saw was a Calligraphy and Font Design called Seb Lester. Seb Lester lives in Lewes which was quite a surprise to see someone that lives in the same area i study talking at this event and showing off their work. The work he had done involved creating a font called 'Neo Sans' and it went on to be used on products worldwide and even used for the Vancouver 2010 Winter Olympics on each Olympians uniform and the number they were. He even showed a picture of Arnold Schwarzenegger wearing a scarf at the Winter Olympics that had his Font on it which was pretty funny. After that he showed us his Calligraphy work which i found the most interesting part of his speech and one of the top highlights at the whole event. He would often write famous quotes in his Calligraphy style and also write some rather humorous notes that would involve swearing.

Seb Lester's advice he gives to most students

On the second day i watched a speaker called Oliver Jeffers. He is an picture book artist from Northern Island that creates books for mainly children. He has a unique style of art and his handwriting has become well known as he uses it in most of his books.

The Incredible Book Eating Boy

This is an example of some of his artwork for the book 'The Incredible Book Eating Boy' the story of a boy that believes if he eats books he will become smarter. Personally i really like the style of artwork and the stories that he creates. I remember him saying that he gets his inspiration from everywhere. "Everything starts from an idea, and ideas come from everywhere". When he gets an idea he will start sketching and writing everything down in his sketchbooks. I found this inspiring as using sketchbooks is a key aspect for this course and clearly a key aspect for him when creating his work.

Man exercising his need to impose order on the world

Another style of his artwork is that he has the ability to create incredibly realistic paintings as he very talented, however he will add a twist onto his work where he will add an element from his work on children's books on top of it as a form of vandalism. In the picture above you can see he's added a bright pink speech bubble that says "STAY!" in his classic cartoon style. I really like this style of art as i think it shows him thinking outside the box and the freedom he gives himself when creating. Nobody else would dare to do something like that on a piece of artwork except for him. It might decrease the overall value of the painting but i think it definitely adds something more onto it.

From the OFFF event i learned a lot from each speaker and i found it very inspiring and helpful for my work. It has taught me that i need to work a lot harder than i am if i want to get to where they are and i need to be more creative and not be afraid to try new things. "Curiosity is the key" is a quote that also stuck out for me personally from the event. I want to take everything i saw and learned from the event and apply it to my work in the hopes to do a lot better.