├── README.md ├── css └── style.css ├── scss └── style.scss └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # achievibit-storyboard 2 | storyboard for graphical artists to see the general story for the homepage. 3 | 4 | Basically, this homepage is like an interactive, moving comic book. 5 | Since achievibit adds a game layer to writing and reviewing code changes, it will be especially neat to make the art in 8-bit style games or old video games (RPG, quests..). 6 | 7 | Here's a WIP to test out some of the concepts from this storyboard, with general images as placeholders for things that needs to be drawn: [check it out here](http://kibibit.io/achievibit-demo). 8 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, *:before, *:after { 6 | box-sizing: inherit; 7 | } 8 | 9 | .content { 10 | margin: 0 !important; 11 | } 12 | 13 | .centered { 14 | padding: 100px; 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | flex-direction: column; 19 | } 20 | .centered .centered { 21 | padding: 0; 22 | } 23 | 24 | .call-to-action { 25 | background: #ffdd57; 26 | } 27 | 28 | .header, .footer { 29 | background: grey; 30 | } 31 | 32 | .header { 33 | height: 80vh; 34 | overflow: auto; 35 | justify-content: flex-start; 36 | } 37 | 38 | .main-section { 39 | background: #23d160; 40 | } 41 | 42 | .monster-shot { 43 | background: black; 44 | color: white; 45 | height: 100vh; 46 | } 47 | .monster-shot h1 { 48 | color: white; 49 | } 50 | 51 | a { 52 | color: white; 53 | text-decoration: underline; 54 | } 55 | -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, *:before, *:after { 6 | box-sizing: inherit; 7 | } 8 | 9 | .content { 10 | margin: 0 !important; 11 | } 12 | 13 | .centered { 14 | padding: 100px; 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | flex-direction: column; 19 | 20 | .centered { 21 | padding: 0; 22 | } 23 | } 24 | 25 | .call-to-action { 26 | background: hsl(48, 100%, 67%); 27 | } 28 | 29 | .header, .footer { 30 | background: grey; 31 | } 32 | 33 | .header { 34 | height: 80vh; 35 | overflow: auto; 36 | justify-content: flex-start; 37 | } 38 | 39 | .main-section { 40 | background: hsl(141, 71%, 48%); 41 | } 42 | 43 | .monster-shot { 44 | background: black; 45 | color: white; 46 | height: 100vh; 47 | 48 | h1 { 49 | color: white; 50 | } 51 | } 52 | 53 | a { 54 | color: white; 55 | text-decoration: underline; 56 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | achievibit-homepage-storyboard 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |

20 |

hero shot

21 |

22 | Takes out 80% of the view, and includes a hero shot as a silhouette, looking over a scene. 23 | example from quest for glory 24 |

25 |

26 | Some ideas: 27 |

28 |

blade runner: silhouette of a hero in a coat moving in the wind, looking from a balcony over a futuristic city with neon lights
31 | Western style: silhouette of the hero looking over a deset mountain scene in the sunrise\sunset if a small city underneath 32 |

34 |

35 | This is an animated shot with two parts: loop of hero with view, and hero starts walking out of the scene (and into the nest section of the site) 36 |

37 |

38 |

39 |

Main section

40 |

This part can be as long as we want. and can be devided to sub-sections.

41 |

42 |

City entrance

43 |

The hero walks down the screen in a "top view" of the city. The hero is walking on a set path, and following key points on screen based on the scroll position of the site (the user controls the hero by scrolling)

44 |

All other animations are loops, or interact with the user walking (getting to certain key points). This can be birds flying away from the roads, villagers walking or selling things

45 |

The hero passes three points that have text attached to them, looking like an old pokemon\adventure game (either just text or text with faces like king's quest), each point has a memory cloud with a small animation inside (like clanking drinks)

46 |

47 |

48 |

Hero is ready

49 |

At this point, our hero is ready for the adventure and starts leaving the city.

50 |

First "wall" he passes through (anything that covers most of the width of the view), should have the top X repositories as flags or grafitti or whatever

51 |

52 |

53 |

2nd wall

54 |

Should contain top X users

55 |

56 |

57 |

3rd wall

58 |

Should contain top X organizations

59 |

60 |

Hero walks out of frame...

61 |

62 |

63 |

Monster Shot

64 |

Takes out 100% of the view

65 |

Another "Hero Shot" section. Here, when the user scrolls, it effects the prespective of the shot, as if the camera man is moving from a bottom shot to a top shot

66 |

The Hero is standing with his back to the camera on top of some view point, and when the user scrolls, a monster is revealed as the shot angle changes

67 |

68 |

69 |

Call to action

70 |

Should contain a button to sign up or start using achievibit.

71 |

72 | Can contain some sort of additional cliff hanger or just be on top of the monster shot (the button that is). 73 |

74 |

75 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | --------------------------------------------------------------------------------