tjwudi / des001 Goto Github PK

#des001 My design work 001

###Step 1: Determine informations I want to deliver I am building a page to introduce books I like. The books are about designing.

###Step 2: Content inventory First, I would like to write down all items to be shown off on the page.

• Title
• Books info (title, cover image, author's name, comments including commentator)
• Quote about designing
• My name & My avatar (John Wu & avatar: [email protected])

The detailed content describtions will be in content.md.

###Step 3: Wireframes I created wireframes with OmniGraffle, which is a great tool to work with. The wireframe image can be found here.

###Step 4: Make content structured The next step I did is to organize informations I just collected in the Step 2. I used pandoc to convert the structured_content.md into a working html copy

###Step 5: Wireframes for breakpoints For now, I will just create one breakpoint, 768px. For all viewport width < 768px, the mobile wireframe will be adapted. Otherwise, the original wireframe designed for all viewport width >= 768px will be adapted.

###Step 6: Design for various breakpoints Then, it is time to create a more concreate design for various breakpoints (only two of them to do here, though).
So don't forget to sketch. I choose to use pencil and paper, instead of using tools like AI.

###To be continued