Skip to main
Link

18 Designers Predict UI/UX Trends for 2018

Figma asked 18 designers (including me) what UI/UX trends they predict for 2018. December, with its flurry of holiday parties, cheery out-of-office auto-replies and introspective weather patterns, provided the perfect opportunity to pause and survey the landscape.

See more at Figma »

There’s a lot to be excited about in CSS – integrating new tools, like Grid and Custom Properties, with existing features like Calc and Viewport Units. Modern CSS allow a new level of interaction, responsiveness, and data-visualization that previously required extensive Javascript involvement. I’m excited to see what new trends grow out of that technology.

  1. Image gallery grid with pictures of dogs and birds.
    Link post type

    How to Implement an Image Gallery Using Baseline Features

    From image sharing sites to online stores, image galleries are a common pattern on the web. Images can be very data heavy, and loading images can make the page take a long time to load. In addition, users have high expectations around the usability of galleries, so it’s common to…

    see all Link posts
  2. Baseline Bakery: as sweet as Interop. Demo to view donut products as a small grid, large grid, or list with an optional To Go Bag sidebar.
    Link post type

    Container Queries and Units in Action

    One of the goals when writing CSS is to build component parts that will adapt well to different (and unexpected) contexts. Ideally, a component can be placed inside any “container” element without it feeling broken or out of place. How can you accomplish this in a complex layout like a…

    see all Link posts
  3. A graph showing font size and zoom effectiveness versus viewport width. The font size, calculated as calc(17px + 2.5vw), increases linearly with viewport width. The 500% zoom line, representing the maximum possible zoom, shows that zoom becomes less effective as viewport width increases, failing to provide a 200% font size increase beyond a viewport width of 2040px.
    Link post type

    Responsive and Fluid Typography with Baseline CSS Features

    As designers, it makes sense to think about what space is available in the browser, and adjust your typography accordingly. It’s also important to remember that different users will have different font-size needs – and the more a font size is responsive to the viewport, the less responsive it will…

    see all Link posts