TL;DR; Redesigning a unique bid auction site: From concept to creation, the goal was to build a competitive platform with a modern aesthetics, seamless navigation and from a mobile-first mindset 

Conceptualising the Look and Feel of a Lowest Unique Bid Action Site

When designing a lowest unique bid action site, it is essential to create a visually appealing and intuitive interface that engages users and encourages them to participate. In this article, I will explore the design rationale and discuss responsive design best practices for such a site.

Design Rationale

The design of a lowest unique bid action site should align with the concept of bidding and competition while ensuring a seamless user experience. Here are some key design considerations:

  1. Colour Palette: Choose a color scheme that evokes excitement and competition. i.e red, orange, and green convey a sense of urgency.
  2. Typography: Legible and visually appealing gives modern and engaging feel to the site.
  3. Visual Elements: Incorporate relevant visual elements such as icons, illustrations, or images to enhance the overall design. These elements can help convey the idea of bidding and create a visually appealing environment.
  4. Clear Call-to-Action: Place a prominent and easily discernible call-to-action button to encourage users to participate in the bidding process. Use compelling language, such as “Place Your Bid Now,” to entice users to take action.
  5. Intuitive Navigation: Design a clear and intuitive navigation system that allows users to easily explore different sections of the site. Implementing a well-structured menu and incorporating breadcrumbs can help users navigate seamlessly.

One Site, one-stop-shop

What is Responsive Design and how can it help me?

– 1440px to 375px

'Hidden Figures Way' Dedication (NHQ201906120005)

“As mobile devices are increasingly become the way to access online content, responsive design has emerged as a popular design strategy”

A good foundation and approach to web design is to craft an optimal viewing experience that is easy readable and has navigation with a minimum of resizing, panning, and scrolling across a wide range of devices (from desktop to mobile). New clients want this type of RWD , but it the default. I wish! For many websites, creating a website version for each resolution and new device would be a very big challenge, or at least impractical.

My mantra is:

Develop, Maintain and Manage

… all within ONE SITE

See: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Desktop user

“I’m on my lunch break and I want to bid quickly”

Tablet user

“I’m sitting, relaxing on the sofa browsing the internet”

Mobile user

“I’m on the bus and have time to look around”

Conclusion

"I want to quickly and easily discover prizes and bid for them"
Now these groups are likely to be doing all three
Free web design wireframes on paper

Wireframing

Early stages of design. The basic form of the final product. No aesthetics or visual design encourages understanding and functionality of the product first.

Three screen widths: //Desktop //Tablet //Phone

Responsive Design Best Practices

In today’s mobile-driven world, it is crucial to ensure that the lowest unique bid action site is responsive across various devices. Here are some best practices to consider:

  1. Mobile-First Approach: Start the design process by focusing on the mobile experience. This approach ensures that the site remains functional and visually appealing on smaller screens, and then progressively enhances the design for larger screens.
  2. Flexible Layouts: Use a flexible grid system and fluid layouts to adapt content to different screen sizes. This allows elements to rearrange and resize based on the device’s screen dimensions, providing an optimal viewing experience.
  3. Optimised Media: Compress and optimise media, such as images and videos, to minimize loading times on mobile devices. This helps to prevent slow loading and keeps users engaged.
  4. Thumb-Friendly Interactions: Design touch-friendly buttons and interactive elements that are easy to tap with a thumb. Consider the size and spacing of these elements to ensure a seamless and intuitive mobile experience.
  5. Content Prioritisation: Prioritise key content and ensure that it is easily accessible on smaller screens. Consider using collapsible sections or accordions to hide secondary information and minimise scrolling.

Action zones

Concept 1: Evolution

  • From existing logo develop the colour palette and typeface
  • Brand leverage with Web 2.0 overtones
  • Overall simplification, focus on readability and contrast
Concept 1 – Typography, features and promotions come together as one.
Concept 1 – Mobile friendly, with space to breathe.

Concept 2: The ‘Z’ Pattern

The “Z” pattern is a common eye-tracking pattern where users scan and process information from top Left (logos and navigation) to top right down to the bottom left corner (featured products or blog posts) and then scan horizontally back to the right, often landing on a call to action button. A patterns that works best for pages with minimal text and a strong focus on visuals, perfect for this landing page.

Luxury with focus

  • With familiar font and classic styling, this polished approach hits the right demographic
  • Following the wireframes then developed using a neutral palette punctuated with zangy blue
  • Overall simplification, focus on readability and contrast

Delivery; From evolution to revolution

Brand leverage

Taking elements from the brand mark, this design evolved from fresh wireframes through to workable a solution for a demanding client. Providing zonal control with global headers and footers and configurable promotional areas.

RussellWebbDesign: Get your fill of UX trends, case studies and best practice

Pique’d your interest?

This is but part of a selec­tion of design information rus­sell­webb­de­sign gen­er­ated for the creative community out there. Please con­tact me fur­ther to dis­cuss how your brand can ben­e­fit from the new channel: info@russellwebbdesign.co.uk

If something has peaked your interest. Please leave a comment below.


Comments

One response to “Developing a Design Process”

  1. You got a really useful blog. I have been here reading for about an hour. I am a newbie and your success is very much an inspiration for me.