Keep in mind designers use lots of tools. You can't expect to sit down with a text editor, hack for a few hours, and come out with something great. You need to

Keep in mind designers use lots of tools. You can't expect to sit down with a text editor, hack for a few hours, and come out with something great. You need to design first using professional tools and then build what you designed. It took me a while but I can put together a decent site using the following tools: - Sketch (https://www.sketchapp.com/ https://www.sketchapp.com/) - Font Pair (http://fontpair.co/ http://fontpair.co/) - Paletton (http://paletton.com/ http://paletton.com/) - Unsplash (https://unsplash.com/ https://unsplash.com/) - UI Gradients (https://uigradients.com/ https://uigradients.com/) - Flat Icon (https://www.flaticon.com/ https://www.flaticon.com/) I use Tachyons to limit the number of CSS choices I need to make. It works for 95% of styles and looks great. I only need to add custom classes or inline styles for special cases such as gradients, background images, transitions. - Tachyons (http://tachyons.io/docs/ http://tachyons.io/docs/) When I design something the goal is to define components and re-use them. I usually steal components from existing projects. - Shopify Polaris Components (https://polaris.shopify.com/components/get-started#navigation https://polaris.shopify.com/components/get-started#navigatio...) - Bootstrap Components (https://getbootstrap.com/ https://getbootstrap.com/) - Material Components (https://material.io/components/ https://material.io/components/) - Metro UI Widgets (https://metroui.org.ua/ https://metroui.org.ua/) Website design comes from understanding what the user wants to do and selecting components that solve the problem. I usually create a new artboard in Sketch for each purpose. For example LandingPage, PricingPage, SignInPage, SignUpPage, ResetPasswordPage, ThankYouForConfirmingEmailPage, UserSettingsPage, etc. You should create a mobile artboard, tablet artboard, and desktop artboard for each page. You can add variants for error states, etc. I start with the mobile artboard and add components until I accomplish the purpose. I then adapt the mobile design to tablet and desktop. If the user needs to enter information I add a Form with a Heading, a number of Inputs with Labels, and a submit Button. If the user wants to view data I need to add a Heading, a Chart or Table, etc. If there is a lot of negative space, I find an image or commission a drawing to fill the space. If I can't decide how it should look, I search online for inspiration. Google "login forms ui" or see how successful companies solve the problem. Adapt what they do to use my existing components, space it out so it doesn't look offensive, and I'm done.