Showing posts about Goals

Eight takeaways from SmashingConf’s Resilient Web Systems workshop

May 24, 2020

These past few weeks, I took part in Smashing Magazine’s first-ever online workshops. I’ve been a Smashing fan for a while, and thanks to my agency, I attended Resilient Web Systems with CSS & Sass led by Miriam Suzanne.

Miriam is a core contributor/expert on tools I use daily (Sass and W3C CSS working group). The workshop was a deep-dive into CSS and covered advanced topics such as core fundamentals of CSS, modern and intrinsic web layout, CSS architecture, maintainable design systems, new tools in CSS and Sass, and more.

The experience was truly fantastic and outdid my learning expectations. Attendees were invited to chat and ask questions, slides were well-presented, and the environment was refreshingly friendly and intimate given the virtual format. I found myself many times during the workshop amazed at how useful and applicable the information was. For my professional goals this year, both the technical details and takeaways from this workshop will undoubtedly come in handy.

I want to share just a selection of takeaways from Miriam’s workshop. I took many pages of detailed notes, but these high-level concepts will surely stick with me. I’m also looking forward to SmashingConf Live in a few weeks!

CSS is about context and relationships

On the first day of the workshop, Miriam covered the history and theory behind CSS as well as core concepts like the cascade. Since I only briefly learned this information in school and on the job, it was fascinating to hear in depth.

CSS was designed around accessibility and user control, which makes it radically different from other programming languages or design tools. It relies on meaning and intent (semantic markup and purposeful declarations) and the language is contextual, adapting to change.

Designing for the browser takes a different approach

Pixel-perfect web design isn’t attainable, nor is it worth aiming for. Many times during the workshop, this idea was brought up, and it’s important for everyone who works with the web to understand.

Because the web is a flexible, resilient medium compared to print, the best we can do as programmers is describe intent—providing hints & suggestions for things like sizes, flow, typography, and color. The browser will interpret our intent across different canvases, for unknown content.

This unpredictability is a fact—it’s the reality and power of the web. When we let go of trying to make the web experience match Photoshop comps perfectly, we leverage the medium in exciting ways.

And instead of limiting ourselves with the 12-column grid system which is everywhere these days, we can be inspired by graphic design history, which has always used interesting and different types of grids.

We need to redefine what browser support means

Browser support is a common thing we face when developing websites, with feature support always in flux. The current mindset in our industry of supporting a certain percentage or set of browsers is frustrating—and it just doesn’t work.

Instead of re-writing code for each instance, progressive enhancement should be used to build from basic to advanced implementations. If the content is there in an accessible manner, it’s good. We can support everyone possible by supporting more browsers with lower standards.

Moving forward, we’ll be able to use features as they are available without concern for legacy browsers like IE 11. This idea of evergreen browsers exists today, and through practices like progressive enhancement, we can take advantage of it.

Cascade-aligned programming makes work easier

Working with built-in tools like the cascade in CSS, we can stop programming against the grain and begin working in harmony with our platform. Whether we’re using new techniques like custom properties or managing design systems, we should consider fundamental CSS principles along every step of the process.

Automation helps us focus on the more important details

The best tools are ones that encourage you to use best practices and consistency, and get out of your way to focus on what matters. Automating parts of our system or using integrated documentation is smart in this respect. And when we have time to do the important work, that’s always a great situation to be in!

Tools and processes are people-dependent

It’s important to find or build tools that fit to you, not just what’s working for someone else. We’re all dealing with similar problems, but we all have unique constraints.

And if design systems are not communicated, they don’t exist. At the end of the day, it’s about communication between people & teams.

Continuous integration: accurate and maintained over complete

Design systems can be complex endeavors, sometimes spanning huge teams, applications, and platforms. By starting small with what we know and what has the most reach, we can aim for accurate and maintained over complete. Getting one piece right is the important step.

Continuous integration means it’s fine to go back and adapt—it’s an iterative process and it will take time to figure it out.

Start with meaningful and structured code, readable by humans & machines

Clear semantics is the basis for everything on the web. This helps browsers, users, and other developers because it makes code intuitive to read, understand, and maintain. For users, well-written code forms accessibility, which is a human right.

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!

Exploring my web design process

January 24, 2020

These past two weeks I’ve been exercising my visual/web design skills by redesigning a site for a dream client. I started out by brainstorming a list of industries I care about and would like to work with. Ultimately, I was drawn toward the music, tech, editorial/news, and design industries.

I landed on Princeton Architectural Press, a publishing company that is adjacent to the design world, as a client to practice with. Below are some snippets of information about the brand from my research:

  • Founded in 1981, Princeton Architectural Press publishes fine books on art, architecture, design, photography, landscape, and visual culture, with over 1,000 titles to date.
  • PAPress has made their reputation in part by identifying new trends and publishing first books on emerging talents, as well as definitive works on established names, and by creating books of unsurpassed design quality and production values.
  • PAPress’ products have been described in professional and popular media as “visually inviting,” “elegant and charming,” “useful as well as beautiful,” “lovingly produced,” “authoritative,” “thorough and comprehensive,” and so on: we try to make books that are smart and beautiful.
  • PAPress’ mission is for surprising, inspiring, and informing those curious about the visual world.

I’m familiar with some of their books and authors from reading in college, and I really admire the quality of their products. Their current website, however, is not great. The site is visually underwhelming, missing functionality in places, and is cluttered with confusing pages.

For this mock project, I found it helpful to define an audience and goal:

Audience

The main audience for this website is people interested in design and visual culture—professionals, hobbyists, students, and educators. Visitors who land on this website will expect a highly functional, visually-appealing design that helps them achieve their particular goals. For example, a visitor may be looking to browse new releases, search for a particular book or author to find where to purchase it, or find the perfect book for a gift to a friend.

Goal

My goal with this redesign is to modernize the look & feel of the website to reflect the beauty and quality of their products, as well as align them to be competitive with other leading publishers. In addition, the site redesign should focus on usability, creating a simpler way for visitors to achieve their e-commerce goals.

I then spent a day or so researching inspiration and competing sites in the publishing, art, and retail spaces. This helped me gain a better sense of what other companies are doing, particularly in regards to e-commerce UX:

Next, I tried to make sense of their existing sitemap by listing out all of their pages and arranging them in new logical groupings. Reordering the pages was challenging since they include many categories and footer pages on their current site. Although my notes for this section are quite messy, I came up with a plan that promotes the main product categories themselves, with additional sub-pages for secondary categories. This way, it is clear up front what PAPress sells and what they’re about.

At this point, I also began sketching wires for the homepage and e-commerce detail page. I wanted to transform the product carousel that exists on their homepage currently into a much more visual slider in the header. In these rough sketches, I also experimented with new components for things like promo blocks:

Using these ideas and research, as well as looking at their catalogs, I developed a refreshed look for the homepage that adheres to their brand while becoming much more visual and engaging. See below for my current homepage design concept:

Overall, I’m content with the progress I’ve made so far and I’m looking forward to working on a couple detail pages and responsive layouts to really flesh out this project. This exercise has shown me so far that there’s a lot of knowledge and ability I’ve accumulated over time, but still some areas to improve when it comes to my design process.

More about...


Goals

January 10, 2020

2019—my first full year at Brokaw—was marked by tremendous professional growth. I learned a lot about teamwork and communication from being immersed in a collaborative agency environment. And by working hard on web projects big and small, I improved my skills in many areas, from design and coding chops to broader knowledge in advertising as a whole.

I’m excited about where I pushed myself beyond day-to-day expectations, too:

  • Introduced Notion to the agency to help keep us organized on web projects
  • Completed assignments, such as HTML emails, with minimal oversight (relying on my abilities and resourcefulness)
  • Developed new skills and training (PHP and WordPress)

In 2020, I’ll be working toward a creative goal and a handful of technical objectives. My manager and I developed these goals to leverage my strengths in places where there are opportunities to grow. Goal-setting for professional development is new to me, but I’m looking forward to all the ways I’ll be helping our company while learning new things in the process. Check out the full goals/descriptions below:

Creative

My creative goal is to improve my abilities in web design by leveraging my existing branding skills. Applying a brand’s look & feel to a website and focusing solely on visual design (not code or interactivity) is a valuable skill. By understanding the clients we work with more deeply—their values, products, and goals—I can deliver more nuanced, effective designs.

Some actionable ideas I might use to make progress toward my goal this year are:

  • Immersing myself in learning more about a client or brand to gain greater knowledge
  • Designing mock websites/redesigns for dream clients or current clients to practice my end-to-end design skills
  • Creating or following simple design briefs and assignments to exercise my web/UI design abilities

SCSS

This first technical area includes many sub-goals that will directly improve the websites our team builds. SCSS/Sass is something I learned on the job, but it has proved to be an immensely useful and time-saving language for coding stylesheets. This year, I’ll be:

  • Auditing our existing SCSS system to find what’s working and not working well
  • Researching CSS/SCSS systems
  • Researching coding standards/guidelines
  • Optimizing our base WordPress theme to improve areas of code (in tandem with documenting this)
  • Learning about an emerging front-end technique (i.e., CSS Grid, CSS custom properties, or text animations)

Efficiencies

Notion was just the beginning of becoming more organized and efficient in our projects and workflows. This second technical area focuses on ways to streamline everyday tasks. I’ll be working on the following for our team:

  • Creating and using Notion templates for projects in a consistent manner
  • Creating an Adobe XD template for sitemaps and wireframes
  • Creating a blank page template for designs with preset grids for Bootstrap

Knowledge Base

In our team, there’s an abundance of information that gets passed around and learned in a given year. The idea behind this third technical area is to centralize and document what we know and where we’re going—our systems, processes, resources, and inspiration. For our knowledge base, I’ll be:

  • Documenting our optimized SCSS system and guidelines
  • Creating and maintaining a roadmap for what to focus on next for our system
  • Documenting helpful resources for design/coding
  • Documenting processes for other types of projects within our team

As I work on these goals, I’ll also be sharing my learnings and progress right here on this blog. So for more insights, follow my latest posts by bookmarking this page!