top of page
  • Facebook
  • Twitter
  • Instagram

cartoonery website

initial
ideas

reminiscent of web design in the early 2000s
 
menu bar at the top
 
breif introduction above "play latest episode" button
 
'home, about, episodes, more' pages
 
small logo at the top
near menu

 
I want to have it so when your clip on or hover your cursor over the eyes in the logo they blink. 
 
extra information, images and videos about the shows, events and history of the channel
 
social media buttons and a button for subscribing to a mailing list or smth
 

development

reminiscent of web design in the early 2000s
 
MAIN PAGES:
-Home, About us, More

 
menu
 
Cartoonery blink gif
ezgif-5-09e7742d7f-ezgif.com-effects.gif
20250113_103405.jpg
Untitled.png
iedaksbjf..png
Untitled tres.png
For the final mock up design I went with a combination of the 1st and 3rd original mock ups. the feedback i received told me that people would be interested in a site with a slightly older look, so I'm going to implement a sidebar menu, which aren't used as often as they used to. this will be an interactive element as its how people will navigate the site. another interactive element will be directly in the logo, I've made it so that when you hover your cursor over the logo, the two eyes in the middle blink. I think its a unique approach that will amuse people as well as keep them engaged with the website. I'm going to take inspiration from the bear brook website and have a "listen now" kind of thing on the home page, since most people checking out the website probably already listened, and if they haven't, they should. right beneath them will be social media buttons so that the audience can keep up to date. on the more I can add information about each episode - so just the one - and provide visuals and context that wouldn't be available from listening to then podcast alone. 
on the about page ill add a drawing of the creator and add additional information, as well as an email and other important contact information. 

 

website resources

$w.onReady(function () {

     $w("#image80").hide();

$w("#image81").onMouseIn(() => {

        console.log("Mouse entered image81");

        $w("#image80").show();

    });

     $w("#image81").onMouseOut(() => {

        console.log("Mouse left image81");

        $w("#image80").hide();

    });

});

Cartoonery blink gif
ezgif-5-09e7742d7f-ezgif.com-effects.gif
how to make it blink only when hovering over the logo
 
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
Photoroom-20250117_092157.png
Photoroom-20250117_092030.png
framee.PNG
image.png
image.png
image.png
Photoroom-20250117_134356.png
Photoroom-20250117_134615.png
Photoroom-20250117_134831.png
Photoroom-20250117_135048.png
bottom of page