27
Andre
8y

To new web devs from a new web dev:
Try to design your site before you write a single line of code. Be it Photoshop, Paint, a piece of paper, a literal goddamn canvas, you name it. You may thank yourself for it later.

Comments
  • 2
    True that. I create simple UML diagrams before mocking up.
  • 0
    @saintograph
    Indeed, UMLs are always a great practice.
  • 3
    Follow this medium chanel and your ux design skills will improve

    “UX Planet” https://medium.com/ux-planet
  • 1
    @heyheni Thanks for the link.
  • 3
    Somewhat disagree.
    The web is more about UX than pretty graphics so a picture sometimes doesn't help much.
    I'd start with a wire frame (in balsamic), a rough responsive layout grid, perhaps a prototype with interactive navigation patterns (in invision-app).
    Then feel it out if the navigation and components are appropriate.
    Before you start drawing your pretty icons and buttons.

    And when you design, use a software where you can quickly check the css equivalents of all values, like sketch, unless you are good at exporting Web resources from PS.
  • 0
    I tend to use Sketch to get a rough idea, then decide on colors and details later.
  • 0
    True, you have to know everything before you draw or code anything. Who is going to use that website, what does he need, what are the benefits for the user?
  • 1
    @jiraTicket
    I hadn't heard of Balsamiq. Great advice, I'll likely put it under my tool belt.
  • 1
    Make a logical flowchart on draw.io , then you can use it as a map on your journey.
  • 0
    @Andre I think balsamic is the biggest wireframe tool there is. simple to learn and quick to use. I never used to use wireframe for smaller projects cause I thought it took too much time, but balsamic is so easy that I now sometimes do.

    Warning : you might fall in love the simplistic style and squiggly lines, and start to wish your real design looked more like the wireframe. :)
Add Comment