Electronic Media

[imaginewhales]

Project Reflection

Overall, I feel that this project is an interesting and eye-opening one. Apart from tweaking a few codes when I was using blogger or tumblr in the past and knowing a few basic codings, I have never really worked with codes before. Hence, it was rather difficult to work with Dreamweaver, despite watching a few tutorials already. Whereas, Muse on the other hand was much simpler than Dreamweaver, despite it being rather difficult to use and the tools being rather limited. However, after much practices, I feel that I have gotten used to Muse, and it works somewhat like InDesign afterall.

Through this project, I have learnt more about electronic media, the importance of website usability, how to work with website widgets, html, css, ftp, importance of responsive websites and more. I have also learnt how to create a gif. I had fun creating my own website and edm, although I have experienced many problems on the way, such as not being able to put the edm into emails as it will jumble all over the place, and making all the pages in the website fluid and responsive to be able to fit nicely on different devices. I feel that these skills will be useful in our future endeavors; in designing a website, edm and more.

[imaginewhales]

Design Decisions ( EDM )

My edm is similar to the website design; the same circus theme, the same colours, body fonts, same responsive buttons. 

My header was inspired by a retro circus ticket, with the stripes backdrop, the retro circus fonts, and all, to further give an overall circus theme.

I tried to keep the edm as simple as possible as well, with lesser buttons. 

[imaginewhales]

EDM

My finalised EDM. 

[imaginewhales]

Design Decisions

As the client is a cirque artist, I’ve decided to give the website a more quirky and vibrant feel, using retro circus colours, playful fonts, and a circus-themed logo. My website consists of mainly red, white, yellow, green, and blue, which are bright yet a little desaturated, and are frequently found in retro circus posters. Furthermore, when he is busking or performing his usual circus acts in events, his target audience are mainly children; he was fascinated by circus arts when he was just a kid, hence another reason for the usage of a variety of vibrant colours. Furthermore, I’ve made most of the edges of the buttons, menu and backgrounds curved so that the website will have a more fun feel, and the client will seem even more approachable.

 The menu and the footer are rather straightforward, with clear names so that the user knows where they are going or enabling them to find something more easily. The footer basically consists of a newsletter subscription option / field, links from the main menu, and links to his social media platforms. Underneath all the contents in every page, there is a button to enable users to go back to the top. Furthermore, clicking on any links on the website will direct the user without opening another tab to prevent the users from opening too many tabs while going through the website and saving them the hassle of closing all the tabs afterwards. I’ve also included an icon, a picture of the client, next to the page title to enable visitors to identify the website easily.

 Furthermore, there are many contacts listed in the contacts page to ensure that visitors will be able to contact Jonathan, find his official social media pages, thus enabling them to have their enquiries answered and able to keep up with his updates. Visitors can also opt to fill in the form straight away on the site to have their enquiries answered by Jonathan easily, without needing to go to their respective emails.  

[imaginewhales]

Finalised Website

Here is my finalised website, screenshotted in different views; desktop, tablet and phone. 

HOME PAGE / LANDING PAGE:

Desktop View:

Slideshow underneath the menu, which will changes the picture every 2 seconds. Underneath the slideshow, there is a short description of Jonathan, and a button which will direct the visitor to the “about” page when clicked.

The footer consists of a newletter subscription option, links from the menu, and links to his other social media platforms. On other pages, there will be a button to enable visitors to scroll back to the top when clicked.

Responsive menu buttons; when you are hovering, the text will change from white to the same shade of yellow as the background.

When the button is clicked, the shade of the colour of the button will be a darker red, to indicate that it is clicked.

Tablet View:

Similar to the desktop version, albeit the sides a little bit smaller. 

Phone View:

When in mobile view, the menu will become an accordian menu as the horizontal menu was too long to fit into the screen of a phone. 

The accordian menu when opened. The buttons are also responsive; they change to the same colours as the other buttons when the mouse is hovered over them. 

Changes to the same colour as the rest of the buttons when it is clicked. 

ABOUT PAGE

Desktop View:

Description of Jonathan, and The Annoying Brothers, which is the name of the group which consists of him and his best pal, Edwin, when they are busking. The “back to top” button will automatically scrolls the page back to the top when clicked.

Tablet View:

Phone View:

PERFORMANCES PAGE

Desktop View:

The page consists of pictures of him performing, and short descriptions of the performances.

Tablet View:

Phone View:

GALLERY PAGE:

Desktop View:

Consists of photos of him in slideshows, which are categorised under “busking” or “fire acts. Beneath the slideshows, there are indicators which tells how many photos are there, and which photo are the visitors currently viewing.

Tablet View:

I will no longer be showing tablet views as they are rather similar to the desktop view.

Phone View:

ACHIEVEMENT PAGE

Desktop View:

Consists of a slideshow of him, and the awards he has received. 

Phone View:

CONTACT PAGE

Desktop View:

The contact page will consist of a black-and-white slideshow of him, enjoying the dream he is pursuing. There will be a form where visitors are able to fill in if they were to have any enquiries, saving them the hassle of going to their emails. Underneath the forms are links to his social media pages.

The buttons are all responsive as well.

Phone View:

[imaginewhales]

Landing Page

How the landing page will look like in various devices. 

[imaginewhales]

Usability Article

Research:

Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?

Efficiency: Once users have learned the design, how quickly can they perform tasks?

Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?

Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?

Satisfaction: How pleasant is it to use the design?

( Source: https://www.nngroup.com/articles/usability-101-introduction-to-usability/ )

Tweak everything.

Identify target audience.

Keeping it simple.

Know your devices.

Use responsive design. 

( Source: https://blog.crazyegg.com/2015/04/24/web-usability-tips/ )

Finalised set of principles:

Use responsive design

          Make most of the buttons responsive, and website are fluid, able to resize.

Keeping it simple

          Make sure that the website is not complicated and easy to navigate. 

Identify target audience

          So that the website will appeal to the target audience even more, target

          audience will feel like the site was custom-made for them as well.

Learnability

          Easy to learn how to navigate about in the site. 

Efficiency

          Enabling regular visitors to easily remember and know how to 

         navigate with little effort.

Know your devices

          Able to be displayed on different devices, and able to be displayed 

          nicely on different platforms.

[imaginewhales]

Mockup Layouts

These are my mockup layouts for my website which are done on illustrator. 

Mockup 1:

Felt that if the contents does not touch the edges just like the menu and the slideshow did, it would look weird. However, if the contents ( words ) were to touch the edge of the screen as well, it would definitely look weird.

Mockup 2:

Resized the slideshow and tried to add a ‘backdrop’ behind the contents. Felt that there were too much rectangles.

Mockup 3:

Felt more comfortable with this layout. Used the 12 grid column rule.

The menu was resized smaller, and all the contents in the page followed the width of the menu. I feel that everything looks rather organised now. Made most of the edges rounded as well, so that the entire site will not look so rectangular-ish. A footer was also included.

[imaginewhales]

Website Inspirations

I like the simplicity of the website layouts, the attractive slideshow as header, and the responsive buttons which changes colour when users hovers over it. 

[imaginewhales]

Logo

This is my final logo for the website. The logo is inspired by the circus; the tents and the colours ( red are always used in the retro posters ), the stars which are commonly found in retro circus posters, and the fun font to express the fun and interesting circus arts performances of the client.

Inspirations:

[imaginewhales]

Moodboard

[imaginewhales]

Storyboard

Original storyboard:

The illustrations of the original storyboard was drawn using a pencil, whereas the updated storyboard was done on the computer. Made some changes to the storyboard as well.

Updated storyboard:

[imaginewhales]

Wireframes

Originally did my wireframes in colour, which is actually more of like a mockup already, so i tried to redo a wireframe in black and white. 

Home Page:

About Us:

Performances:

Gallery:

Awards & Accolades:

Contact page:

[imaginewhales]

Sitemaps

Finalised my sitemaps. Made some slight changes. 

Original sitemap:

Updated sitemap:

[imaginewhales]

This is my finalized gif for my client. 

Made the transition of the fading fire more obvious; the previous one was rather subtle and had weird lines. Changed the dpi of the gif from 300dpi to 72 dpi , and resized the gif to 250px by 250px. 

[imaginewhales]

Made some changes to the transition and the kernings.

[imaginewhales]

GIF made from vectors on Illustrator. Animated by using Photoshop. The fading transition after the fire is not visible; need to make it more obvious. The kernings of the the word “Jonathan Goh” is too small, need to make it wider.