Pre-work
File Structure
The file structure that I take is to have a _assets, _exports, and design folder. The _assets folder is where I keep my dummy text, logo, images and etc. _exports is where I exports my design and images. Lastly the design folder is where I have my sketch file (usually only one).
Style Sheet
Style sheet is an artboard where I keep my color palettes and font. The style sheet I use is call One Day Frontend Design Framework. (Link below) However, I did not use the full feature of the stylesheet.
After settleing your stylesheet, set up your text styles and layer styles. This will save you time when you are in design phase.
WireFrame
I use some simple shapes to draw out my block wireframes basially to see what a basic section will look like and to have the elements in my design.
Design
Finally into design, the hardest part. After doing the preworks, you should have a rough idea of what the final design will look like. First I would put all the things I know together in place, like the text and images. Keep doing this for the other sections. Don’t worry about the little details. There’s no such thing as perfect design. We want to get the first draft out ASAP.
After first draft is out. I’ll look through each indivual section to see if there’s any thing I can improve. Remember every design has to align with your website’s purpose. Then I’ll ask random to see the design and get feedback.
Prototype
Lastly, this is optional but you can build a prototype with marvel or invision. Prototype provides a more realistic user experience for users.