UI Graphic Design  ︎

Mark









Korjuu - An ethically produced, high quality local food ecosystem, 2021, Helsinki (FI)


Korjuu is platform for ethically produced, high-quality local food. Korjuu aims at creating a healthy and efficient food ecosystem that reduces data fragmentation among actors and increases supply chain transparency through temporarily free-to-use services. Users can register either by creating new profiles or by logging in via Facebook. The platform has many innovative features to explore: products can be ordered and picked up either directly by the producer or from registered food venues. You can register as a participant in events or create your own. You can also join groups and participate in purchases, discussions, read, and write blog posts. As a producer, you can add an organization, products, product batches with different expiration dates, etc. You can further discuss about customized services by email on info@korjuu.com. The following work showcases Korjuu’s UI/UX card development both for desktop and mobile platforms:

EN/DE/ES





Color


• Not always the higher contrast works better, in some ways it can actually be harder for the eyes.
• Black on white vs shade of grey.
• Dark grey as opposed to pure black.
• Calculate the right amount of contrast on different screen formats.
• Color calibration on the designer’s monitor could appear slightly lighter or darker than on the user’s.
• It's especially important have enough contrast on mobile, where users might be outdoors in bright spaces, or even moving while performing an action.
• Pure black text can cause more eye fatigue over long periods of time and can be more difficult to read for individuals with reading disorders (such as dyslexia).
• It’s important to test color legibility with real users in natural environments and on every possible device.
Font selection

  • Take into consideration Open Source or collaborative fonts like Google fonts: Work Sans, Source Sans, Chivo.
  • Authentic Sans: varied weights like version 60, 90, 130, and 150.
  • Consider premium typefaces from different platforms depending on budget, such as Type Network and oder foundries.
  • OpenType formats (OTF, TTF) are cross-platform compatible, supporting widely expanded character sets and layout features.
  • Ensure glyphs / set of symbols can be displayed on different languages.
  • Test outline font formats on different browsers and devices.






Legibility

  • The size and layout of the text can influence the user's online reading experience.
  • Bear in mind individuals with visual difficulties, who might struggle reading a small text.
  • eye fatigue can be experienced by people with perfect vision when staring at screens for a long time
  • Important to design quick and dynamic user flows across different layers of information and screen levels.
  • Desktop fonts: Good readable body text: between 50-75 characters per line / 16 pt font.
  • Mobile fonts: Small fonts on bright screen can be difficult to read. Use around 30 characters per line for mobile.
  • Make sure the fonts allow to match the user's needs and experience and the product's business goals.
UI-Visual Design

  • Emphasize the details of the visual language.
  • Elevate the hierarchy structure of the card.
  • Color selection (create color system/primary ones).
  • Use clear and simple fonts: Authentic Sans.
  • Apply alignment, spacing, text size and contrast from the background.
  • Make the card look clickable with small interactions.
  • Do not use inline links – the card itself is a link.
  • Use light shadowing to give cards a more realistic impression.
  • How many cards do we display in a row?
  • Set an intentional height and width of the cards.
  • Make it easy to read, to learn about a product, to purchase.






Multi-platform prototyping (Desktop / Mobile)

  • Web pages that have horizontal cards, or mobile devices that have vertical cards are easy to read.
  • A card UI design on a website can help users easily navigate through various product categories.
  • Social media sites apply card UI designs as it makes content easy to scroll.
  • Card UI designs work well for many web or app pages and have multiple uses: they can display image galleries, textual content, downloadables, audio libraries, videos and many more.
  • Card UI designs are responsive. They facilitate responsive design.
  • They fit in any grid system
Information Architecture

  • The layout provide organization to the visual interface, which is designed according the user's needs.
  • Provides relevant data, remove noise and set specific purpose: small cards, large cards, cards with avatars, cards with thumbnails, cards that link to a product detail page, cards with status, cards with metrics (number of times shared, or saved).
  • How much information do I need? How can I use interaction? Hover state to display more information, select the card to go to a larger detail or page, set an intentional behaviour.
  • Select one size for desktop and one size for mobile: they could have a variable width depending on the responsiveness of the environment.