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:
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:
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.
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.
Love this article by Brad Frost about the parallels between music and web design/development. Who knew there were so many?
I hope we in the web field will arrive at the same realization that I did as a musician: complexity is not synonymous with quality. Not everything needs to be At Scale. Not everything requires ultra-hydrated isomorphic architecture. We don’t have to shred like Yngwie Malmsteen on every project we work on. There’s a ton of power in simplicity, and I absolutely think there’s the web equivalent of a solid, grooving bassline.
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:
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:
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:
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:
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:
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:
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!
From the agency Shakuro, twenty design trends for everyone in the world of user interface and experience to watch (out) for in 2020.
Two incredible new digital brand style guides I’ve discovered recently:
Starbucks uses unconventional navigation elements, sleek UX, and clean design in their creative expression site. The result is a beautiful and useful guide for their brand.
The Guardian has an awesome, comprehensive digital design system guide, bringing order and rules to a complex website that could quickly get messy.
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.
Great article outlining techniques to infuse soul and personality into your web design projects.
See also: Andy Clarke’s Art Direction for the Web, which was recently published by Smashing Magazine. Definitely adding this to my wish list!
For web designers: here’s a new Chrome extension that works as a visual inspector and interface editor. See also: DevTools for Designers.
This is a relevant and concise write-up of ethics in front-end development. I believe it is critical to apply ethics before doing work so that we can think through the consequences of our code and designs.
Since I am newly graduated and feeling extra reminiscent of my time at school, I thought it would be fun to share the story of how I got into my field. Below is a condensed timeline of how I found my fit in web and user experience design:
As a kid, I loved playing with software and computers, and as the son of a professional photographer, I have early memories of art and technology. I didn’t consider myself very creative growing up, but I truly admired art and design, and frequent visits to my dad’s studio made me enthusiastic about the creative industry. In high school, it was clear to me that I wanted to pursue a career that would mix my creative and technical abilities, so going to college for graphic design was a no-brainer (although my family was a bit skeptical at first).
Adventures in art school
I enrolled at The University of Akron and began taking art classes in my first semester. In their design program, the first year is dedicated to a foundations curriculum, so my courses included things like drawing, 2D, and 3D design. These courses helped push me in significant ways and made it much easier to transition to my actual design classes, where idea generation, concept development, and process were vital. I liked how well-rounded the curriculum was, and I enjoyed learning from my instructors, but it wasn’t until my first web design class that I really dove into my passions.
Learning to code felt like magic to me. Going into my first web design class, I was very excited and a little bit nervous, since I knew this could be something I would really enjoy, but also challenging at the same time. But it turns out when you’re driven to something, and nothing can pull you away from it, actually learning the material and practicing it is no hard work at all. I threw myself into web and loved the class for making me think more critically about design, the satisfaction I gained from creative problem-solving, and the foundation skills I learned from coding basic HTML and CSS.
Web II and onwards
Once I found out how much I loved web design and coding, everything else I was doing seemed to benefit from it. I began studying graphic design in closer detail, researching other artists and designers, and working more diligently and thoughtfully on classwork. My work improved considerably during this time, and I started genuinely enjoying my education. Later classes like Web II and Interactivity taught me core principles of user interface and user experience design, things that excite me just as much as, if not more than, web.
The real world (learning doesn’t stop after school)
During my time in college, I was fortunate enough to land an internship doing graphic design work for clients. I also managed the website for my art school which gave me more experience dabbling in code and taught me valuable lessons in communication and working independently/remotely. Now that I’ve graduated and am working a new full-time job, I feel like the learning has just begun. While I can confidently apply the skills I learned during school in my new position, there is infinitely more to understand, many years of growing to do, and so much more to accomplish. While coding websites may not be your fit, it indeed is mine, and I hope this blog post can inspire you to find what excites you in the design field.