Popular posts

Hello @maruru,
As a designer, I can say that the process is subjective and differs from person to person. There are certain conventions you can follow to simplify this process.

My process:

• Research — This includes secondary research, which involves analyzing existing information from different sources like the internet, literature, etc., and primary research, which involves speaking to users to better understand how you can improve the experience for the people who are likely to use it.
• Sketches — Initial prototyping is best done on paper. Try sketching the interface or components to see how they will work together. I believe sketching is essential to get a better understanding of the product's look and feel.
• Low-Fidelity Wireframes — Wireframes are a basic part of designing interfaces. Low-Fidelity Wireframes are basic digital representations of what the product will look like. They include basic structures without any content but placeholders content like boxes or outlines to represetn buttons, text, and images. (Below is an example of low-fidelity wireframes I generated while redesigning the Hashnode Landing Page
• High-Fidelity Wireframes — After several low-fidelity iterations, I replace placeholder content with real content (like in the example below).
  
• Development — As a designer, it's my job to make sure what I designed looks the way I intended it to look like when it's developed and live. I do this by generating a Spec Sheet which contains specifications of every element on the page including; font-sizes, hex color values, spacing, sizes of certain elements, border widths, etc. (I've attached a reference for how specifications would look for widths and spacing of certain elements on a page).
• Testing — Testing is a very important part of the design process. I always reccommend you test any change with users and see how they feel about it. Try to get as much feedback as possible, and always be open to criticism.
• Refinement — After testing, I usually look at the feedback and continue to work on improving and refining the product and the experience for the user.

UI/UX design tools:

• Sketch: An essential tool for UI & UX Designers to create low-fidelity & high-fidelity wireframes. Sketch also includes many plugins to improve your workflow.
• Adobe Creative Cloud: Easily the best software suite for designers of any sort. For UI/UX Designers, Adobe Photoshop, Adobe Illustrator, and Adobe XD will be most useful.

UI/UX design inspiration sources:

• Dribbble: A great collection of design work by talented people
• Behance: Primarily a portfolio hosting site but also a good source for design inspiration
• Designspiration: More for art and graphic design inspiration, but still a good source for ideas
• Awwwards: A curated collection of some of the best designed websites
• StumbleUpon: A source for design inspiration recommended by @isogramc and;
• tumblr: Source of unconventional design work by really talented artists and designers