6
13 Comments

How to make site not look like crap

I am creating a landing page to gauge early interest for my SAAS, but comparing to my peers who have full dev teams making the UI look semi appealing is quite difficult. I am also less than 18 so while my programming skills are quite good, my UI skills are subpar. Any resources that anyone can reccomend?

on May 30, 2022
  1. 2

    Hey, while many here will send you to Dribble, I will tell you not to, these shots are primarily unreal and to the top concepts.

    Don't use Dribble for inspiration use this instead:

    For overall.
    ----------------

    For colour:
    ------------
    https://www.colorsandfonts.com/
    https://www.colorhunt.co/

    For typography:
    -----------

    Remember that consistency is king.

  2. 2

    hi, I interpreted your question as how to make a website look more advanced.Here are my suggestions.

    • Text
      Font Size Color Line line-height
    • Image
      png images often bring some unexpected effects, some content can also make the page look more advanced if you add a background image
    • Style
      • General style: color box-shadow
      • Interaction styles: mainly for pc, :hover :active, etc.
      • Animation effects: fade in and out, loading effects, etc.
    • Typography, layout the content you want to present

    Given that your question is more specific about how to make the langing page design high, my answer will also be more specific, you can design your landing page like this

    pc: layout your landing page left and right, the right side for the user to enter the account password login button, etc., the left side for other information you want to present in the landing page, such as some text or images. Be careful not to show the content too much

    Mobile: Layout the content from top to bottom so that the operation is more in line with the habits of mobile users

    I hope my answer will help you!

    Examples:
    langing page1
    page 2

    1. 1

      Thanks for sharing these valuable tips. I will surely apply these tips on my https://flyskitchen.com/best-juicer-for-tomatoes/ and will share the results here. I hope it will improve our website organic ranking and its revenue.

    2. 1

      Thanks this is really helpful, implementation seems easier now. Trying Figma should also help alleviate this stress. Thanks for the response

  3. 1

    Step 1: Download Figma
    Step 2: Go to Dribbble, search for landing pages
    Step 3: Copy the landing pages you liked and paste them onto your Figma project
    Step 4: Design your own page copying the parts you liked the most

    You don't need to understand all the design principles to make a good-looking page. Just keep it simple, learn from the references, make them work on any screen size and you'll be good to go. You can improve it later, so don't get too attached to details.

  4. 1

    I like to use Dribbble.com for inspiration at times. Also I've found that starting in figma before actually building the site helps me significantly. Right now my general flow is:

    1. Find a site
    2. Snip site pages/components with <a href="eagle.cool">Eagle.cool</a> (a design saving tool
    3. Copy colors and component design system from other site in a new Figma design
    4. build the site approximately to the Figma wireframe.

    I still have a ways to go myself as far as design goes but this process has help my 'design block' so far.

  5. 1

    Don't worry about it. Your landing page can look crap but if you've got something that is appealing to your target audience then it really doesn't matter as much as you think it does.

    Speed beats perfection. Just get it done.

    1. 1

      Yes, I have built most components, may just do a rolling release just to get my name out.

  6. 1

    The easiest:

    1. find a website that you like
    2. copy the idea (and if needed html/cssjs)
    3. tweak it
  7. 1

    You don't have to be in disadvantage just because you dont have a development team or not have enough programming skills. This is why we built tapflow.app
    You can hire developers for a period of time to help you with your website with your preferred budget

  8. 1

    I feel that Figma will help you, also look for some references and ideas on awwward ⚡