Portfolio Blog Resume

  • Filter by topic

  • Posts about UX Design

    Making templates for sitemaps and wireframes

    February 21, 2020

    Earlier this year, I began work on sitemap and wireframe templates for our team to use on client projects. Before this initiative, we used Illustrator and InDesign to design these on a project-by-project basis. This workflow was not as streamlined as it could’ve been for a number of reasons:

    • Inefficient design tools. Illustrator and InDesign are great for graphic and print design, but these tools can be a bit overkill for UX assignments like sitemaps and wireframes. For example, if all you need is a way to draw rectangles, text boxes, and lines, Illustrator may not be the perfect fit for the task at hand. We’ve been using Adobe XD for around one year now, which feels like a faster and more natural way to accomplish these tasks.
    • Lack of reusable elements/consistency. Without templates, we were essentially recreating the elements we needed each time. This can create extra work upfront, since making and refining these elements adds up costly time. In addition, our work lacked consistency from project-to-project since each sitemap or wireframe was treated slightly differently. A shared system for sitemaps and wireframes that includes common, reusable elements is a smarter approach.
    • Lots of tedious manual work. Adobe’s traditional design tools like Illustrator and InDesign were not built for modern UX workflows. For example, manual resizing, lack of components, and other repetitive tasks plague these tools when used in a web design or UX capacity. In code, you don’t need to resize a button if you change its text contents—it happens automatically. Newer tools like Figma and Adobe XD solve these challenges and bridge the gap between design and development. Most recently, Adobe XD introduced Content-Aware Layout, a useful feature that speeds up UI design.

    Our solution is a system of cloud documents in Adobe XD—a shared wireframe kit, a blank wireframe, and blank sitemap. Based on a wireframe kit my manager and I purchased, the shared wireframe kit includes common layouts and blocks for our websites, as well as base elements.

    The idea is that since everything is linked to the master kit, we can adjust/add new components as needed. Each of the three files also includes an instructions layer with helpful tips for getting started:

    I’m super excited to use these for real client projects so we can gain efficiency and improve our workflow. As a test, I also mocked up an example wireframe using our blank wireframe template. You can see a preview below!

    , , ,

    UI/UX Design Trends for 2020

    December 28, 2019

    From the agency Shakuro, twenty design trends for everyone in the world of user interface and experience to watch (out) for in 2020.

    ,

    Simplicity in product design

    April 29, 2019

    Lots of great tips in this article—including generous illustrations—on how to apply simplicity to product design.



    Better Cookie Consent Experiences

    April 10, 2019

    Smart and timely deep dive on how to deal with cookie consent prompts from a privacy and UX perspective:

    With the advent of the EU General Data Protection Regulation (GDPR) in May 2018, the web has turned into a vast exhibition of consent pop-ups, notifications, toolbars, and modals. While the intent of most cookie-related prompts is the same — to get a user’s consent to keep collecting and evaluating their behavior the same ol’ way they’ve been doing for years — implementations differ significantly, often making it ridiculously difficult or simply impossible for customers to opt out from tracking.

    ,