Product Design / General

First time to design a website, so many questions.

First time to design a website, so many questions.

Product Design/General · January 10, 2019 at 6:34am

First time to design a website, so many questions.

Product Design / General · January 10, 2019 at 6:34am (Edited 1 week ago)
I used to be a full-time developer, familiar with iOS and Web development. Then I feel too tired to work in a company, so I just quit and want to start my own business.
Now, I have an idea about making a website. But I really don't know where to start.

As a developer, I always implement well-documented features, sometimes I argue some tiny things with my designer and feel great. But how to turn Idea into a functional design, how to come up with those features and test them before implement?

I find 'Design Sprint' book, which is interesting, anybody with this book can complete this process step by step. But it seems focused on solve one problem at one time, not to design a new product.
I tried to draw my idea with Sketch, but every time I use it I start to choose a color, font and cares about spacing. which I shouldn't. So I start to use Paper but I feel it's not real enough. here is one page i draw in paper.

My questions:
1. Any book you recommend reading as a beginner of product design?
2. Is there a step by step guide or checklist, I can go through to build a prototype?
3. What tools are you using to design a product (prototype)?

Thank you all for reading : )

Books
Refactoring UI https://refactoringui.com/book/
Design Sprint http://www.gv.com/sprint/ and a timer to use https://www.bigtimer.net/
Design Sprint 2.0 https://ajsmart.com/design-sprint-2-0/
Online Courses
A Virtual Crash Course in Design Thinking https://dschool.stanford.edu/resources-collections/a-virtual-crash-course-in-design-thinking
Online Tools
Draw Wireframe https://whimsical.co/
UX Checklist http://uxchecklist.github.io/

January 10, 2019 at 6:43am

I'm about to start read this book: https://refactoringui.com/book/

like-fill
1
  • reply
  • like

January 10, 2019 at 2:42pm

Hi @alen-liang you should have a look at this checklist http://uxchecklist.github.io/

like-fill
1
  • reply
  • like

January 10, 2019 at 5:06pm

Learn about the concept of Design Thinking, then dive into Design Sprint which is like a recipe book, where Design Thinking is like an encyclopedia about all the ingredients. :D

  • reply
  • like

January 11, 2019 at 12:48am

Hi @alen-liang you should have a look at this checklist http://uxchecklist.github.io/

That's exactly what i want, thank you so much!

  • reply
  • like

Learn about the concept of Design Thinking, then dive into Design Sprint which is like a recipe book, where Design Thinking is like an encyclopedia about all the ingredients. :D

I learn design sprint by reading materials in this website, and i convince my team to take a design sprint with me next week. http://www.gv.com/sprint/

By design thinking are you ferering to here? https://en.wikipedia.org/wiki/Design_thinking

  • reply
  • like

January 11, 2019 at 2:39am

I learn design sprint by reading materials in this website, and i convince my team to take a design sprint with me next week. http://www.gv.com/sprint/

By design thinking are you ferering to here? https://en.wikipedia.org/wiki/Design_thinking

That Wikipedia article is a bit more general. Design Thinking is also a framework and you can learn more about it here: https://www.interaction-design.org/literature/article/5-stages-in-the-design-thinking-process

For design sprint information also check out A&J Smart: https://ajsmart.com/design-sprint-2-0/

  • reply
  • like

January 12, 2019 at 12:03am

That Wikipedia article is a bit more general. Design Thinking is also a framework and you can learn more about it here: https://www.interaction-design.org/literature/article/5-stages-in-the-design-thinking-process

For design sprint information also check out A&J Smart: https://ajsmart.com/design-sprint-2-0/

Thank you. I'll check them out. I watched some A&J Smart youtube videos, they are doing a great job.

  • reply
  • like

January 15, 2019 at 2:59am

If your wireframe doesn't feel real enough, a html file with a functional/utility css framework might help make it feel more real. You can try tachyons or tailwind with that regard.

I find that wireframe tools are a time sink as compared to just writing code or sketching it out with a pen.

  • reply
  • like

Log in or sign up to chat