步骤

TODO：
Style Guide、
TW logo SVG、
the mix map of dancing/visual art/beats flow
cool buttons

  1. 划分目录结构
  2. css文件的引入
  3. 配置editorconfig
  4. 划分页面-》路由映射关系
  5. 图标修改
  6. navbar项目-》各种插槽
  7. 请求数据

规划 Plan

Information Architecture

define website structure and content navigation

  • NavBar: Dancing/Visual Art/Flow & Beats
  • main: words or lyrics
  • CTA: social media, in the footer

Page Layout

since there are four elements in Hip Hop subcurture, the website will lay out accordingly.

  • Dancing: Excellent! videos from B
  • Graffiti: Visual art, MV
  • DJ: the album, the music,

  • MC: the singer, lyrics, Flow & Beats,

    “the Four Elements”: breakdancing, graffiti, turntablism (mixing and scratching, the work of the DJ), and rapping (the work of the MC);
    a harmony of dance, visual art, spoken word, and technology.

Wireframes & Mockups

点击查看【undefined】

设计 Design

Color scheme

Dark mode

Brand colors: total layout

Grey colors: for text

UI color: button, alert, form, input fields

reversible grey.

Each light grey color has a complementary dark grey color. This helps keeping the colors well balanced and also makes it easier to implement light/dark themes.

Logo

  • Mirrors

    Artwork

Visual elements

Typography

Typefaces

Font sizes

Font weight

Alignment

Rich media

I have lots of pics, both casual and offcial.

  • resize those imgs
  • find a topic

  • [ ]

    User experience

  • [ ] responsive

开发 Dev

Vue components

  • News
  • NavBar

Vue Views

  • Home: News
  • News: pics, color scheme, insperations
  • Lyric: hip hop skills analysis,
  • Feedback: fan letters, comments, quotes