Examples of some Interactive and Graphic Web Design

For this Assignment i thought it would be good to research and get some inspiration from some existing Websites that show good interactivity and design elements that I could use for my website.

Desktop

Tablet

Mobile

Here are a few screenshots from the website ActiveTheory.net/work. The website shows a list of Creative Design applications, from Games to Interactive Videos etc. The website uses animated GIFs to show short clips about each section. When you hover on each section the GIF starts playing and when you click or tap on the section it expands to full screen which shows the full GIF and gives a brief description of each section and also can expand to show a slideshow.

Personally i really like this design as it is visually pleasing and includes a lot of interactivity. I believe a website like this will make people want to look and explore it more, rather than a website that has plain text and a few images. By having content set out like this, it will make people want to stay on the website.

AF103 Design for the Web

So after the Easter holidays we now start our final assignment on Web Design. As i did Interactive Media and Informatics for my A-Levels i already have experience in Web Design and creating a responsive website.

I already feel like a lot of the work for this assignment has already been done since we are using the same content from our iBooks, so this will give me more time and has already given me some ideas of how i want to design my website using inspiration from existing websites and from my design ideas from my iBook.

Feedback from the Crit

So when i did my crit to the class i got a range of feedback from the rest of the class. I enjoy doing crits because i get to see my work from other peoples perspective and they can point out what they think was good and what areas can be improved on and ideas i didn't initially think of.

Good points

• Strong Chapter Covers (Jessica Hische Influenced)
• Like the overall Blue Underwater theme
• Good choice of fonts
• Has been set out well and organised
• Good use of imagery with the PNG images

Bad points

• Possibly make the fonts larger so they are easier to read
• Import Videos using bookry to reduce the overall file size
• Draw some designs using illustrator instead of using images from the internet
• Possibly add some links to some charities to help support the animals that are mentioned.

Overall i'm happy with the feedback i received for my work and i will take on board what the class had to say about my work and make the improvements they said about in my iBook. I'm happy they enjoyed the imagery and the chapters as i felt they were my strongest points about my iBook, but they also offered helpful advice on how to improve the other sections as well.

Further Progress of the iBook

Now that i have included some more in depth content and some more pages i thought i should share what i have created so far. In my last blog post i showed the Chapters and the art style i wanted to achieve with them. This post is about the individual sections and how i want to make them interactive to the user.

Here is an interactive image of the world i included with titles of each Ocean. When you tap on each title, the image zooms into that specific area and gives some more in depth information about each Ocean, including the size, the percentage of the earths surface it takes up and how it compares to the other Oceans.

This is one of my double pages about the Blue Whale. At first it was originally a single page with just an image and some text on there, but this was too boring and plain so i thought i would make it more interactive and simple but still contain the information i wanted. I think by sorting the information into smaller chunks it makes it much easier to take in this information and looks better to the user.

Progress of the iBook

So i started creating my iBook and putting all my content research together. Throughout creating it i kept asking myself what can an iBook do that a regular book can't.

With my Design Idea i was told that my work looked similar to Jessica Hische with my typography. I then researched her work and i liked the style she uses and used her as inspiration for my iBook. So each main chapter in my iBook has some typography in a Jessica Hische style.

This is my opening page for my iBook, i thought i would use this art style at it looks interesting and you don't get much of an art style with regular books.

Again here is another chapter in my iBook where i thought it would be good to add a subtle icon to the page to add something to it, rather than it being regular text. However i though i would use a range of different fonts in the title just to add some more interest to it and make it more unique.