Best Style

Note that the numbering of entries starts from 002.

002 Diane Collet

Individual | https://moundarren.com

Moundarren is a French publishing house specialized in Chinese & Japanese poetry, zen & tao wisdom. Moundarren.com is aimed at both individuals and professionals (booksellers and press). It’s both informative (the user explores the website to learn about Moundarren’s books, Chinese & Japanese poetry) and functional (used for ordering books and contact). It’s designed for ease-of-use, clarity, and legibility. We put inclusion at the core of the design, following the Make WordPress Accessibility Handbook, and making it accessible on all devices. The simple and consistent navigation from the header to the footer let the users swiftly navigate to an area of interest. We optimize the website for a fast loading speed to save the users’ time. Its aesthetic creates a simple experience which offers a moment of contemplation and let the users immerse in the atmosphere of the books. We’ve built a custom Gutenberg-ready theme and several Gutenberg blocks like a Chinese poem block and haiku block. They are composed of the original text and its French translation, with their specific style to render the magic of Moundarren books. We design every single page with care (including pages like 404, search, privacy) and add imagery when needed to delight the user. The typography and color are paired to put focus on the content, easy to read without distraction, and allow books to stand out. Moundarren poetry is above all an experience: assent to the world as it is, when everything becomes simple, luminous and profound. The goal is to extend this experience onto the website. Translating this poetic experience, without making it explicit but only by suggesting it. We want to create a familiar experience for the users yet different to let them discover Moundarren in a new surprising way.

We are two siblings: Diane (developer) and Yann (designer)


003 Rich Tabor

Individual | https://richtabor.com/merlin-wp/

Merlin WP is my stab at addressing the tedious and exhausting WordPress theme setup and onboarding process. It makes installing a new WordPress theme, its recommended WordPress plugins, Customizer settings, widgets, and demo content, an exciting and gratifying user experience.

Here’s a WordPress theme with MerlinWP ready to do some magic! https://www.dropbox.com/s/bpd3ft2oy8o0602/tabor-merlinwp.zip?dl=0


004 Ruben Zwiers

Rubsel | https://sollicitatiemarkt.nl/

I made this website for a company that helps people react to vacancies, the owner lives in Rotterdam and has Maroccan roots which I both added to the style.

Cool initiative!


005 Simon Carr

DesignUps | https://designups.com/

Our company values quality and creates custom design and WordPress solutions for many types of clients. We created our website with the idea of intentionally being different while still communicating our ideas and highlighting our mission and work.

We are based in Nashville TN and are excited to attend Wordcamp US again this year!


006 Nathan Malamud

Point.B Studio | https://soulpie.tv

I built this website with my bandmates when we were touring in the Summer of 2018. We needed a site to support the concept of “SoulPie.TV” to help get more bookings. We would record a concert and upload the video the next day. The concept was very successful as it led to our band getting chosen for the People’s Choice at the Coos County Fair. One of the most notable aspects of the site is the photography that was taken by our trumpet player, Robert Jackson, which defined the look and feel of the site along with the Beatle-esque logotype designed by bandleader, Michael Brumit.

This is my first WordPress website


007 Reece Vail

Strive Digital | https://strive.digital

Our super simple to use agency website that appears to meet all of the criteria.

Small WordPress agency based in a small town in the UK that have been using WordPress since 2012. We’ve never applied for one of these before, would be nice to see how we do!


008 Mike McAlister

WP Engine | https://atomicblocks.com/

Technological development is always offering new opportunities for innovative design, and Gutenberg is no exception. With the introduction of the new editor will come a flood of new companies, products, plugins and themes, to name a few. The role of design, both technical and aesthetic, is to help these products stand out from the rest and to show something different. When I set out to design the Atomic Blocks (AB) brand and website, I wanted to say something new. In my experience, plugin sites are often loaded with technical jargon that can be difficult to discern by novices, and the design doesn’t really help. We’re on the cusp of a wave of new technology, and I felt that both the language used and the design that carried the language needed to be more user friendly, empathetic, and delightful to best communicate these new features effectively. By employing a playful, punchy color palette, retro geometric patterns, illustrated iconography, and a well-balanced typography system, I was able to capture a light-hearted aesthetic to help deliver a technical product. This also helped set the expectation that AB blocks would be as fun to use as the website. The website is concise but thorough in helping the user discover AB and learn about the new editor in the process. Education about the theme, plugin, and the Gutenberg editor has always been one of the pillars of AB. I recognized right away that there would be a shortage of educational resources for the new editor and aimed to alleviate that with quality tutorials, code snippets, and free resources on the blog. The cohesive design found throughout the site is carried through to the blog content, where we utilize Gutenberg to be more expressive with our content in tutorials and block breakdown posts.

Thanks for considering Atomic Blocks for the Automattic Design Award!


009 Rico van der Sloot

Acato | https://www.boschslabbers.nl/nl/

For BoschSlabbers, landscape architects Acato has designed and created a beautiful headless WordPress portfolio and career website. www.boschslabbers.nl reflects the atmosphere of a scandinavian documentary. A story about landscapes, observants and visionaries. Resulting in a modest portfolio website with impressive content. The client can manage the website via the WordPress admin. Changes in the backend will trigger the headless Nuxt frontend (www.boschslabbers.nl) to be regenerated. The pre-generated content (using Netlify) allows for a smooth user experience when it comes to performance. The frontend uses the WordPress REST API to retrieve all information and a WordPress REST API caching plugin has been created to speed up this connection. Both the design and the frontend have been created using separate reusable components, allowing the client to create different unique pages. These components are now built into the WordPress backend using Advanced Custom Fields – Flexible Content, but can easily be transformed into Gutenberg-blocks. As a proof of concept we have also created a single Gutenberg component in our accept environment. (see details in our submission presentation)


010 Leslie Wintner

wintner:design | https://murphypeakperformance.com/

Dr. Peter Murphy, licensed clinical psychologist, hired me, Leslie Wintner, at wintner:design to build a new WordPress site to promote and blog about his Peak Performance Coaching practice. His focus is on golf and other athletes but is also relevant to dancers, musicians, actors, students, teachers, business people, and others. The style is minimal while being immediately relatable to a golfer. My goal was to pare it down to its essence while providing all necessary information, including blog posts, Calls to Action, and a Contact form. I created a one-page, scrollable, responsive site using a background silhouette of a golfer that anyone could relate to. We shot new photography showing Dr. Murphy coaching. I also wrote the all the text including a headline that simply describes the goal of the coaching practice for its potential clients. I also redesigned the logo mark for the practice. The site supports the peak performance goal of creating a calm, focused and environment that flows while being free from worry.


011 Anil Gupta

Multidots | https://sneakernews.com/

With 7.7 million Instagram and 684 thousand twitter fan followers, Sneaker News (also known as CNN for Kicks ) is one of the most popular communities of sneaker fans around the globe. It’s one of the most trusted and visited sources for new sneaker release, updates, and announcements. www.sneakernews.com is powered by WordPress & WordPress VIP. It serves 7 million monthly unique visitors and 35 million page views. It has 590 pages and 741 posts. Sneaker News serves a special kind of community group. They are young and active. Into sports and fitness. So it was super important to keep the overall Design – fresh, simple, clean and easy. It should be super easy to read the content from any device or platform and the most important goal was to render high-quality sneaker images without compromise on speed and performance.

Accessibility
We followed WCAG 2.0 (Level AA). Our score for accessibility for this website is 77+ on Light House Tool. We have made all the forms and overall content compatible for “Screen Readers” using WordPress Class [.screen-reader-text]. Added ‘Skip to Content’ link for better user experience and made tabbing order logical. Using meaningful (semantic) HTML5 to make all technology how to use and understand the website The website has been developed keeping the accessibility guideline for colors, font-size etc in mind. Design A quarter of the traffic on Sneaker News goes to the “New Sneaker Releases”. So we designed completely different page layout to showcase the information that matters the most to our users. And make sure that it’s easy to navigate from anywhere on the website so we put it on the top primary navigation. Considering our 79.48% traffic from mobile device users overall design and development execution was done keeping the “Mobile First” in mind. Overall Navigation was divided into two parts. The primary menu has the most important information that our users want to see – “Sneaker Release Announcements & Where to buy” and the secondary “Mega” menu was designed to easily find and navigate the information, popular in sneaker community etc easily. Selection of colors and elements has been done based on our user demographics which is a young and active community of sneaker fans. Keeping overall readability of content clean and sharp with the placement of high-definition sneaker images in between the content to satisfy the eyes and minds of our users.

Coding Standards and Practices
WordPress VIP Coding Standards and guideline has been followed in the development of the website. Proper validation, Sanitization and Escaping of user data has been done to keep the website secure. Query Caching and Object Caching are used at the best level. Page load Performance Used query optimization and caching mechanism. Preload CSS: using preload to load CSS files efficiently. Implemented render blocking solution to prevent unnecessary resources before above fold and minimize HTTP requests Accelerated Mobile Pages (AMP) has been implemented for the mobile device user.

The editorial team publishes about 35-50 new stories every week on Sneaker News and sneaker fans around the world rely on Sneaker News for everything about Sneakers and Kicks.


012 Samuel Sharpe

Long Story Short Design Ltd | https://helenmaybanks.com/

Photographers website that specifically puts the content front and foremost. Minimal design to avoid conflict with imagery, and retain focus on the work. Interactive touches, bespoke pre-loader and unique menu system make navigating the image heavy site more fluid.


013 Taeke Reijenga

Level Level | https://level-level.com/

This project is 100% powered by Gutenberg and fully accessible. We apply in the category of ‘best style’ because: User empathy We started the process with a thorough investigation of our target audience focussing on their needs and expectations. This research was conducted using both existing clients and potential clients (who had never heard of us). The conclusion: our buyer persona knows what he wants but needs a professional and reliable team to bring his ideas to fruition. He is looking for solid proof that we understand his current challenges, have ample expertise helping others overcome similar ones, and that it will likely be fun to work with us. The devil is in the details. The devil IS in the details 🙂 The team has been going over every single micro animation and every millisecond to get the timing right. Not just to animate, but to really provide an appealing experience. The Gutenberg backend equals the front-end as we illustrate with some videos: https://lvl.li/gutenberg-playlist Simple is beautiful We went for a really clean design with a lot of white space. Pages targeted to visitors early in the research phase encourage to keep visiting more pages to help them get to know, like and trust us. Pages targeted to visitors closer to a buying decision feature clear calls to action and link to case studies first. Breathtaking Content All content was re-written to clearly show that we understand the pains and challenges of our clients and to demonstrate that we have dealt with similar problems in the past.

Please take a look at the video playlist where we show the Gutenberg backend – https://lvl.li/gutenberg-playlist


014 Devin Tellatin

Emergence Magazine | https://emergencemagazine.org/

Emergence Magazine is a quarterly online publication featuring innovative and beautifully crafted stories that use multimedia, parallax illustration, original artwork, video, podcasts and photography to create a breathtaking and powerful experience.


015 Claire Hall

Which? | https://mortgageadvisers.which.co.uk/

Deep User Empathy Demonstrates a clear understanding of user needs and context.
Which? is the largest product-testing body in the UK. For over 60 years, Which? have campaigned to protect consumer rights, review products and offer independent advice on a wealth of subjects. The Which? Mortgage Advisors website sits at the heart of Which? Financial Services Portfolio and provides expert advice to consumers looking for the best mortgage product to suit their needs.

Developer-led Design Created in a way where devs are the champions of design.
Elegant integrations ensure that the website connects with many external APIs, tracks users behaviour in real-time and feeds all leads captured in to the Which? CRM and ensures no lead is ever lost. Event tracking and analytics tags provide important data to improve the user experience, ensuring consumers can find the right content they are looking for.

Outstanding UX Effortless navigation and clarity of use.
Clear and relevant calls to action are across the website assisting the user to find the information that they are seeking. There are multiple and diverse user journeys that needed to be considered and included, facilitated by a clean and clear navigation. Devil’s in the Details Micro-details are managed down to each millisecond. A mortgage calculator was designed for ease of use and placed prominently on the Homepage as one of the most popular features of the website.


016 J. Hogue

Oomph, Inc. | https://oomphinc.com

Our agency website references our own unique style, which is highly personal (people photos!), smart (great blog posts, borderline puns), and driven (delivering the best solution quickly). Our aesthetic includes a “gem” effect which works through our other presentation materials. Angles and other subtle hover effects add playfulness to the design, along with large blocks of color and headlines featuring Playfair (a beautiful typeface, in our opinion). We hope this website exudes our personality and approach to every client project.


ellipsis search previous next reply tag category expand menu location phone mail time cart zoom edit close