Published on | Prototyping: From UX to Front End — Medium Eleken.

There’s a lot more to be successful web designer than only having relevant skills. So many techniques are out there that finding good fit is no easy task. Here I’ll share some advices into what to focus on while finding the key options.

Prototyping

Prototyping helps to share your ideas with the stakeholders. Capture helpful comments and feedback. Use software that simplifies the creation of prototypes. Learn from mistakes. It’s cheaper to fail sooner. It helps to notice what works and what doesn’t. This decreases the risk of failure in the long run.

Ryan Yokoyama, a Business Analyst at XPO Logistics, says that they use prototypes for UX cognitive testing, clients’ feedback, and stakeholder requirements. It simplifies visualization a solution for stakeholders.

You may apply InVision. This is popular tool with these features: 1) creating high-fidelity very fast, 2) opportunities to make interactive prototype with motion, 3) layout options for developing good hierarchy.

UXpin pays strong attention to the user flows. It fits mobile and desktop products. You can apply UI libraries as well.

Marvel allows designing your ideas here or upload your work from Sketch or Photoshop. It helps to grab comments and sync your prototype from cloud storage.

Webflow is helpful for those who want to skip code writing. It helps to develop the design around CSS and styling.

Mockup Builder is also prototyping solution. You may easily download your image files to Marvel. Then, supplement gestures and transitions. This prototyping platform offers features such as image resizing, background color changes, and various device templates. It may turn your sketches into prototypes as well.

Vectr is a free solution for prototypes on apps for Mac and Window. Share prototypes simply and collaborate. This tool also offers offline desktop apps, clickable mockups and so on.

Boyle’s Law teaches never join a meeting without a prototype. It boosts internal communication. Prototyping allows making a connection between designers and programmers.

Keep it simple

Be focused on only the things critical to users. Exclude anything that is outside. Delete unimportant elements from the page. You need to be strategic about what to keep and what to eliminate.

Focus on the website usability and utility. Krug’s law teaches that relevant web design technique needs to be intuitive. Eliminate all possible questions that visitors might have. Great web design interacts with them without overdoing things.

Apply the KISS principle. It stands for keeping it simple, stupid. People are overwhelmed in the fast-paced environment. They want to capture data quickly. KISS principle helps them easily find what they look for.

Keep in mind Jakob Nielsen’s guidelines. For instance, customers too often apply some functions by mistake. Simplify shifting for them.

Make options and objects visible. Key pages need to be visually obvious as well. This helps users faster reach their purposes. This is important for the website usability.

Mobile users compose the biggest percentage of traffic for many platforms. So, take the “mobile first” approach. To achieve this goal, you need: 1) Design for the smallest screen. 2) Develop the mobile wireframe, then apply it as the pattern for larger screens. 3) Apply progressive enhancement. It means put more important stuff foot forward. 4) Try it on a real mobile device.

Call to action buttons

In Eleken, we believe that it’s important to pay attention to the call-to-action buttons. They will lead users to purchase the product. Place them strategically for maximum effectiveness.

Dropbox implements common design and open space. So, bright call to action button captures users’ attention. Now, this button and the logo are the same color. It simplifies understanding of the action you want clients to take.
Humboldt County’s website impresses users with engaging video. Call-to-action button located in the center. Users are invited to explore a website with words “Follow the Magic.” It makes this button more effective and interesting.
Booking.com applies scarcity to motivate clients. They tell you how many other users are viewing that hotel. This encourages you into action.

The color of the button will identify your audience. It influences who clicks and how many times. Men prefer blue, green and black, females like the colors purple, green and blue.

Unique style and typography

Express your brand through special typography. It helps users to recognize your company from competitors.

Quality typography came from the knowledge what other designers have done. Provide decisions based on this understanding. There is always a need for something which feels different. For instance, a website Sons of Gallipoli with unusual presentation.

Each interface involves a set of choices the user can make. Your type needs to maintain that decision-making process. Relevant typography leads the reader to the content. Great typography is “transparent” to the user. Also, select a typeface that works well in different sizes.

Keep in mind that too creative style may confuse a user. Stick with common forms.

Effective web design techniques make users’ experience more pleasant. Relevant call-to-action buttons and unique typography will lead visitors’ attention in the right direction.

Conclusion

Use software that simplifies the creation of prototypes.
Be focused on only the things critical to users. Put more important stuff foot forward.
Place call to action buttons strategically for maximum effectiveness.
Express your brand through special typography.

Reach us for the best design ever — work@eleken.co

Effective Web Design Techniques That You Need To Apply was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Effective Web Design Techniques That You Need To Apply

Cool stuff, every week

More Articles