The WordPress pattern directory finally opened its gates to the entire community today. Anyone with a WordPress.org account can log in, go to the pattern creator, and start designing.
For some of us, this has felt like an unbearably long wait. In reality, it took the development team less than a year since the directory launch to put this together. It was no small feat to make it work and put in all the guardrails for such a system in that amount of time.
Some community members have already got a head start. Ana Segota of Anariel Design announced via Twitter that three of her patterns had already landed. “More coming soon,” she said.
Patterns by Anariel Design
The pattern directory has the potential to be an onramp for creators who want to contribute to the WordPress project but do not know where to start. The barrier to entry is one of the lowest in the community. There is no requirement to write code or understand all the intricacies of theme design. It is nowhere near as complex as plugin development. It is simply a visual builder that allows sharing art with the world.
I have no idea where this thing is going. I hope to see 1,000s of patterns in the directory a year from now.
I played a small role in building two of the initial patterns from last year. I was excited about the potential for the directory and happy to contribute in any way. However, I was not entirely satisfied with the process because I did not have the creative freedom I wanted.
For example, my vision for an “about me” columns pattern had morphed into something entirely different:
Final about me cards pattern.
By the time it was added to the directory, there was hardly any of myself in it. The first designs that launched were tightly curated, and that was OK. It was more about getting production-ready patterns out to users at the time, and I knew that WordPress.org would eventually open it up.
Today, I started work anew, rebuilding my original “about me” pattern. I have made some alterations because we now have new spacing controls. And the built-in, Openverse-powered search did not seem to locate some of my early images, despite being available via the Openverse site. Nevertheless, it is a work in progress:
Building with the new pattern creator.
Users can save draft patterns, too. So, if you want to try your hand at designing one but are unsure if you can finish it in one sitting or do not have a fully-fleshed-out idea, there is no need to worry about losing work. You can save it and pull it up later from your patterns page.
The pattern creator runs Twenty Twenty-One under the hood. The classic theme has a few quirks, CSS that often overrules the core WordPress styles. I would rather have seen Twenty Twenty-Two because it sticks much more closely to the global styles standard. At least people who want to try designing off-site will be able to test with a similar setup.
Patterns should, ideally, be theme-agnostic. However, in practice, the theme that showcases those patterns — Twenty Twenty-One in this case — can make or break a design. Creators should not design specifically for it, but they should at least check its output.
Using the pattern creator is straightforward. It is merely an instance of the block editor with some modifications specific to the directory. It also provides a quick welcome screen:
Welcome screen to the pattern creator.
Overall, my experience with it went reasonably well for a Day 1 launch. Most of the hiccups that I encountered were with the image search. It timed out on occasion, and filtering images was not a perfect experience. Despite being powered by Openverse, it does not offer the same filtering tools.
I hope that the pattern creator will eventually tie into the WordPress photo directory. The built-in search is a neat tool, but you sometimes have to wade through dozens or hundreds of outdated images to find something worth using. The photo directory feels fresh and modern. Plus, we should be prioritizing the work of those contributing to WordPress.
There are still many open tickets for the pattern directory, and it will undoubtedly evolve based on feedback and usage. However, this is a solid launch of the pattern creator. Well done to all the folks who made this happen.
If you are interested in original article by Justin Tadlock, you can find iy here
You can be the best coder in creation, but that doesn’t always translate into success as a web designer. Many freelance web designers and web design agencies struggle because they make the same mistakes over and over again. We spoke with Matt Konarzewski of Vision Marketing to outline three of the biggest howlers.
A website is the beating heart of any business. A well-designed site can help clients grow, attract more visitors and even turn them into happy customers. Get the design wrong, though, and it can spell real trouble for your clients.
To get some insights into how to do it right, we approached Matt Konarzewski of Vision Marketing. His agency recently won a Wix Partner Award for sophisticated code deployment for its client website, Code Zero Yachts.
Read on to discover Matt’s tips and see examples of Vision Marketing’s great work built using Wix, layered with advanced coding.
1. Being too afraid to speak up and challenge the client
We all know that web designers succeed by pleasing their clients. But that doesn’t mean following all their instructions blindly and unthinkingly. It may, on occasion, involve some pushback.
“For example, we’ve found that many clients just have no idea of how to craft their messaging to the public,” he says. “Also, they sometimes think web design is just about making something amazing and sparkling. Instead, as we explain, it’s more about moving the business forward by designing something so simple that everyone in every age group can use it and find information quickly.”
The crucial thing, says Matt, is to understand your client’s needs and agree about the business goal and what the venture should be about.
“Once you’ve done that, you can instil that trust in your client that you can deliver what they need without being micromanaged. And that means you pretty much can start coding and start designing. This approach has worked well for us, and normally we can deliver a website within two rounds of revisions. So that’s a win-win for both sides.”
Real-world example: Code Zero Yachts
By educating the client correctly in the early stages of a project, they’re more likely to give you creative control once the broad principles of the site are agreed upon. And that means you’re more likely to end up with a website both you and your client are proud of.
“Those websites that attract prizes usually happen when there isn’t much interference from the client’s perspective,” says Matt. Take, for instance, Code Zero Yachts, a site that won Vision Marketing a Wix Partner Award for sophisticated code deployment.
Code Zero Yachts is an online directory where you can search, view and book luxury yachts from around the world. It’s a great example of an impactful and vibrant website, showcasing a collection of over 1,000 charters worldwide.
The Vision Marketing team created the website using the Wix platform and then layered some advanced coding over the top of it in a particularly clever way. The yacht data for the site is sourced from an external database, but rather than waiting for live external API calls for every page of data, the team built a dashboard page for the site manager to update the whole database in just one click.
This triggered event harnesses the Wix Fetch API and Wix Data API for database storage and document retrieval. And by chaining multiple API calls per yacht to consolidate data, pre-formatting all image galleries, optimising the data for search, and building the HTML used in the site’s custom calendar feature, the whole operation works like a dream: fast, consistent and reliable. Because let’s face it, people with the kind of spending power to charter a yacht don’t want to be kept hanging around.
“We delivered the branding, we delivered the website and some coding on top of it,” recalls Matt. “And the client was just like: ‘Yes, I love it.’ Indeed, it’s normally the case that when we’re given the full power – full decision making – we end up with websites people love.”
Code Zero by VISion Marketing
2. Failing to pivot fast enough
The world of web design has always been fast-moving, and those who succeed are those who don’t stay unduly wedded to a single idea but are flexible enough to pivot at a moment’s notice when necessary.
A famous example is how Instagram began life as an app called Burbn, dedicated to sharing photos of fine whiskeys and bourbons. Just as its founder Kevin Systrom was at a crucial seed funding stage, he noticed that generic photo apps were getting popular, but none of them had social features. So he pivoted his whole operation, Instagram was born, and the rest is history.
During the pandemic years of 2020-21, pivoting came into its own. Small businesses worldwide had to scramble to get online, and consumers needed new ways to access goods and services without leaving the house. Web designers were at the forefront of this revolution and, in many ways, were the unsung heroes of the lockdown era.
The ability to pivot is partly about mindset, but it’s also about having the right tools and technologies to help you move quickly. It’s all very well spending six months painstakingly hand-coding a beautiful site, but if you miss your window of opportunity doing so, you may end up wishing you’d gone a different route.
Real-world example: The Box London
The Box London is a boxing gym set up to help people of all ages and abilities gain a healthier lifestyle through boxing. Founded in 2016 by Ali J Ahmed, it prides itself on being a place where people of all abilities, genders, ages and fitness levels can attend and have a feeling of achievement and self worth.
When lockdown closed the gym, The Box London needed an online alternative, and Vision Marketing was able to build one fast. To find a solution, Vision Marketing moved the existing website to Wix and used a range of fitness-specific tools – Wix Bookings, Wix Payments and Wix Automations – that helped the customers of The Box London quickly join and pay for the classes with minimum administration involved.
“Within one week, we managed to provide The Box London with a solution where they could do online classes with bookings and payments,” says Matt. “And they were in business: it was a real ‘wow’ moment!”
The team created a secure boxing trainer website with a class schedule and online booking system. The website allows clients to sign up for single classes, book personal training sessions or become members without making an appointment, and for The Box London to confirm their classes/memberships. In addition, the website is connected to their mailing system so that clients can be notified of schedule updates, news and events through email.
It all stands testimony to the power of the positive pivot. “We weren’t just sitting there and saying, ‘It’s the pandemic, it’s awful’,” says Matt. “We were more like, ‘Oh, what if we did this? What if we did that?’ And when it worked for year one, then year two, they remained in business.”
The Box London by VISion Marketing
3. Not using the best tools (for the wrong reasons)
Most of us have had the experience of doing DIY and realising we were making life hard for ourselves because we weren’t using the best tool for the job. So it’s surprising that so many web designers don’t carry that principle through to their own day jobs and instead choose to shun modern design tools for cumbersome hand-coding methods.
That said, Matt believes more and more designers are discovering that web design tools can save them time, money and frustration. “There was a time when I was embarrassed to say I used web design tools,” he says. “But options used to be pretty basic back then. Today, it’s incredible how advanced design platforms have become.
“I’ve been using Wix for six years, and I haven’t looked back,” he continues. “We’ve designed some cracking websites for top agency owners in the UK, and even big agencies such as The Capture are asking us to design websites for them on Wix as a specific requirement.
“So any reluctance to use new tools is quickly disappearing because people realise they no longer have to wait five months for a website, and they don’t have to deal with developers who put obstacles in their way every time they ask to make a small change to the site.”
Real-world example: Whitehill & Bordon Community Trust
Whitehill & Bordon Community Trust is a local charity in Whitehill & Bordon, Hampshire, that works to bring the community together and improve people’s quality of life. They needed a digital space to communicate updates and enable the community to learn about the Trust, its history and its members.
Built by Vision Marketing using Wix, the website makes information easy to find, which is crucial for an organisation that needs to reach the entire community, not just the digitally savvy. While it’s colourful and attractive and includes a couple of nice parallax scrolling effects, it’s not overly flashy because that’s not what a community website needs. The focus here is on making communications clear, concise and two-way, and Vision Marketing has done an excellent job of delivering for this local charity.
Whitehill & Bordon Community Trust by VISion Marketing
If you are interested in original article by Tom May, you can read it here
Award-winning Manchester-based foundry F37 launches a new online tool today, allowing designers to play with its variable and experimental typefaces at the click of a mouse. Founder Rick Banks hopes to inspire others to explore the “more out there” options available and what is possible with type.
Called F37 Playground, the sub-section of the foundry’s website features a number of F37 typefaces that can be tweaked, adjusted and tested in your own browser. Correct us if we’re wrong, but we believe it’s a world-first. “We wanted to try out new tech to see what is possible,” Rick tells Creative Boom. “Variable fonts aren’t new, but they’re amazing. We’re not the first to use this technology in sliders, but we believe that we are the first the create a space on a website dedicated to exploring the new and exciting ways variable type technology can be utilised and pushed,” says Rick.
Of course, in future, the F37 Playground will also contain some of the foundry’s former concepts and routes that have since been abandoned or placed “on the shelf” for now, along with some of its more display, graphic and experimental fonts. The F37 foundry library, meanwhile, will continue to focus on the more “serious” text or body typefaces.
F37 Picard
F37 Apex
Overall, Rick wants the new platform to be a place to “inspire and educate graphic designers, motion designers or anyone else in the sector” about the creative possibilities of Variable, Color Font and OpenType technology. “Type technology is becoming more versatile while type design tools are becoming more powerful and efficient, and this combination is quickly opening up the creative potential of type,” Rick adds. “Along with this, independent type foundries are becoming the pioneers of challenging the traditional idea of type as a passive and static product.”
This shift to more experimental typefaces could also be blamed on platforms such as TikTok, which has quickly transformed the way in which a brand can differentiate and display its messaging. “Brands aren’t as afraid to be playful themselves, as pictures and videos disappear instantly after consumption, and trends come and go much quicker,” Rick explains. “Whilst we have huge respect for the now decreasing print medium, we also have to react to the market and the desire to have something unique and playful for digital applications.”
F37 Corrupt
F37 Split
But F37 Playground isn’t just for other designers; Rick and his team wanted a platform where they could also develop their own ideas. “A place without the same focus and finesse we apply to the typefaces found on F37 Foundry,” he says. “These fonts are developed rapidly and with play in mind. No Specimen. No mini-site. No blurb. It’s crazy to think that ten to twenty years ago, these fonts would have taken a considerable time to create or would not have been possible at all. With type tools today, we can ideate, develop and test purely playful concepts much faster, allowing greater creativity alongside our development of more traditional typefaces.”
It feels like the new platform is launching at just the right time, too. “Following the last couple of years which we’ve all had to experience, we feel an injection of fun is needed, and we hope to be a small part of that greater movement,” says Rick. “It only takes us to look at our children playing to realise how much fun we used to have, and at work, we often forget to give ourselves time to revisit that feeling of euphoria. Progressive companies over the last decade or so have recognised this, and hence why we now regularly see a slide, table tennis and football nets at offices. Obviously, there is a time and place, and everything in moderation, but finding this new way to promote fun has been extremely rewarding for all of us at F37.”
F37 Uncouth
F37 Kinetic
Spend a happy half hour on the F37 Playground, and you’ll enjoy making loads of adjustments to the variable type options on display.
You can take a look at f37foundry.com and also purchase anything you like. Typefaces on display and ripe for experimentation include F37 Apex, F37 Boost, and F37 Corrupt. Prices start from as little as £15.
If you are interested of original article by Katy Cowan you can find it here
If you’re a web designer or just appreciate website designs, here are the five best resources you can use to find inspiration.
There are more websites available on the internet than any one person could ever search through. But if you’re a web designer by trade or just someone who enjoys it as a hobby, then you no doubt want to see the best of the best.
Fortunately, there are better ways than just browsing the internet and hoping that you stumble across something fantastic. Here are some of the best websites to inspire your web design journey.
First up on this list comes Web Design Inspiration, a website which does pretty much exactly what you might expect from its title. It’s a website full of inspiration for web design.
Web Design Inspiration’s landing page features a huge list of different web design ideas for you to use as inspiration. Each image links you to a different website that has been hand-chosen for being outstanding in one respect or another. These are the types of websites that impress your clients.
If you click on the title of the link, you’ll find yourself on a page with extra information about the website, instead. This will give you information about the predominant colors that the website features, the styles, types, industries, CMS, programming languages used, and more.
This is super handy because Web Design Inspiration also lets you filter by a wide range of different categories. You can use most of the tags above to filter, so if you’re looking for inspiration for an interesting way to make use of a green color scheme, Web Design Inspiration is a great way to do that.
If you use WordPress, you can also find an entire section dedicated to WordPress themes and sites that help you work on WordPress as well. You can search through any of these the same way you can any of the main page inspiration.
Next up on this list is Best Website Gallery. Best Website Gallery is a great resource to discover new and impressive websites on a regular basis.
Best Website Gallery is, at its heart, a visual bookmark collection for the creator. Luckily for you, it’s made entirely public and is incredibly accessible.
Sites that are impressive to Best Website Gallery’s creator are picked and added as he discovers them, and users can then vote on the design of the site on a one to ten scale.
You can view more details about each site in-depth, and each link even includes an impressive number of different screenshots if the website ever goes down or changes for whatever reason.
The filtering system here is really impressive as well. It looks gorgeous, for one, but is also incredibly intuitive and easy to use. You can filter by website color, CMS, style, or framework here. Mix and matching is also possible if you’re looking for something really specific.
Now, if you thought that long lists of websites were the only way to get inspiration, then you’re sorely mistaken. CSS-Tricks is a blog dedicated to different web design elements, namely CSS, a staple of just about all responsive web design.
All you need to do with CSS-Tricks is scroll down to look through the various articles. There’s a section dedicated to articles that are popular this month if you’re looking for something in particular, but that’s not the only way to browse.
You can look for videos that CSS-Tricks posts to their website and to YouTube, or sort by the various guides that are available. You can even search up the CSS-Tricks almanac, which should help to explain just about any CSS property that you could imagine.
What’s great here is the variety. You might see one article talking about a certain effect that you had never thought about before, and once you see what’s written, realize is much easier to achieve than you had ever thought.
Next up on this list, we have Webdesigner Depot. If you’re looking for more general design tips or don’t personally touch much CSS yourself, then this blog is probably the better resource for you.
Webdesigner Depot is a blog dedicated to all aspects of web designing such as workflow, UI concepts, news, and more. If it relates to just about web development tool used by professionals, it’ll be here.
Important posts appear near the top of the website, and below that, you’ll find the section dedicated to popular posts.
There’s an impressive amount of variety here in the types of articles that you’ll find. Quizzes and polls can serve to keep you entertained, while informative posts about UI and UX are abundant.
If you adore the website, you can even subscribe to a newsletter to make sure that you’re updated whenever new articles go out, and you can even get access to various freebies. If you’re looking for new fonts, icons, and more, then this is a great resource to have.
Finally, we have Reddit. Not the entire site, but rather two Subreddits that are incredibly useful. Firstly, there’s r/web_design.
r/web_design is a great subreddit for anyone who is interested in web design. It features interesting concepts, new ideas, and plenty of other users showcasing their cool designs.
Secondly, we have r/webdev, which as you might have guessed has a larger focus on the development side of webpage creation. Despite this, r/webdev has a lot of useful resources regardless of how much development you actually do.
The great thing about these Subreddits isn’t just that you’ll find things that you would never see anywhere else on the internet, but also that you yourself can participate.
If you ever have any questions about a project or concept that you’re struggling to execute, you can go to the Subreddit for feedback or help. This is an invaluable resource for any of you who work freelance.
Take Your Web Design to the Next Level
As you can see, web design inspiration is only ever a couple of clicks away. Hopefully, with this article, you’ve found something that really speaks to you and some new ideas for your next website.
If you’re just a hobbyist or hoping to evolve your skills even further, there’s no need to stop with just inspiration, however. You can always learn more in the world of web design or development, and knowledge can be your most powerful weapon.
Sometimes, less is more. Here are 9 stunning, simple website templates you should use for your next project.
Whether you’re a freelancer, startup founder, or a small business owner — in today’s digital landscape, you absolutely need a website.
There’s simply no way around it.
Yet, this doesn’t mean you need something overly elaborate or complex in nature. Like one-page websites, HTML templates allow you to design a stunning website without compromising on web design or functionality. And with the right website builder, you can create a gorgeous website – complete with animations, parallax effects, and spellbinding transitions – without having to write a single line of code.
These web templates speak for themselves, so let’s just get right into it. Here are 9 simple HTML website templates to consider for your next project.
1. Fitnesso by Uros Mikic
Fitnesso is a free website template made in Webflow. This ecommerce solution is ideal for any fitness coach or influencer looking to bootstrap their small business beyond the confines of social media.
Getting your online fitness coaching website set up is a breeze, as Fitnesso gives you the ability to sell premium fitness packages, schedule bookings and calls, and more.
2. Yonk by Djaya de Vries
Yonk by Djaya de Vries is a bold and beautiful landing page template perfect for bars and restaurants alike. Yonk’s stark lines, chunky layout, and dreamy pink color scheme make this affordable one-page template a total standout for your new website.
This minimalist, single-page website maximizes its space and design – complete with a homepage, about section, a full menu with pricing, contact form, and hiring section. This is where minimalism meets maximalist design.
3. Trönic by Deni Bozo
Creative freelancers, startups, and small business owners — do we have a treat for you. Trönic by (the incredibly talented) Deni Bozo is modernism meets total functionality.
This mesmerizing HTML template is one of those website templates you just have to check out on your own. Delight yourself using this stunning website template – complete with a homepage, about, pricing page, blog, and contact form – without sacrificing page speed or load time.
Trönic uses tastefully placed animations and parallax effects throughout each page design to create an immersive and interactive online experience that surpasses the standard portfolio template. Along with its dark, mystic color scheme and chunky font type, Trönic is truly a gem.
4. Satoshi by JP
Meet Satoshi, the multi-page, multipurpose, all-in-one Webflow template suitable for just about any small business or startup, but most specifically financial services.
Cut hours of time fumbling with WordPress themes or plugins, and start setting up your new website with ease with Satoshi. Designed for banks, as well as credit card, crypto, fintech, digital payment, and insurance companies, Satoshi comes complete with 20 unique landing pages and 35 multi-use flexible elements.
From landing page templates to login and account creation functionality, blog templates, FAQs, testimonials, and contact forms – Satoshi is the bootstrap template for financial services.
5. Aspire by Daywork
Next, we have Aspire by Daywork. This minimalist blog template is perfect for bloggers seeking functionality.
The website design incorporates subtle animations and transitions throughout, creating a fluid and immersive experience for each page layout.
Aspire is timeless. With its stripped-down, bare-bones design and illustrative page headers, this modest, yet beautiful blog template puts your work front and center – allowing you to focus solely on content creation and SEO.
6. Better Half by Flowyak
Better Half by Flowyak is the perfect template for photographers and creatives alike.
The parallax animations unveil the website’s narrative flow on scroll, creating an immersive user experience that can only be described as spellbinding. It’s enthralling, hypnotic, and gorgeous.
Whether you’re a beginner or fully-fledged professional with decades of experience, if you’re in need of a website template that feels distinctive and goes beyond your client’s expectations, Better Half is your template.
Do yourself a favor and check out the projects page in dark mode — the opening page header is astounding.
7. Mercer by Medium Rare
Real estate agencies and brokers, rejoice, this one’s for you. Going with the theme of aesthetics and beauty, we have Mercer by Medium Rare.
Mercer is the complete package for your real estate website. Not only is it beautiful, but it also comes equipped with a homepage, properties page, agency about page, blog, and an inquiries page.
In Mercer’s own words, “Mercer offers your real estate agency a prestige façade with the appropriate grace to match the caliber of high-end properties you represent” – just make sure you invest in a decent DSLR camera.
8. Opus by Flowbase
Like Satoshi, Opus by Flowbase is a multipage, multipurpose HTML5 template designed specifically for startups or small to medium-sized businesses.
With over 30 pre-built web pages and its extensive library of fully customizable Webflow components, Opus is not only aesthetically pleasing, but is also incredibly functional – the perfect starting point for simple, yet complex business websites.
Eliminate hours of stringing together your new website from scratch and do yourself a favor by checking out Opus. You’ll thank yourself later.
9. Vet X by BRIX Templates
Vet X by BRIX templates is a fun and trendy HTML website template designed specifically for veterinarians and veterinary practices of all sizes.
Vet X comes fully loaded with a homepage, about page, services page, blog, shop, product, contact form, and more. If Vet X is anything, it’s comprehensive to say the least. Give your veterinary business a head start and impress your clientele with this colorful HTML template.
February’s showcase adds some much-needed color and excitement to the long wintery season. From high-end business technology and creative NFTs to underground urban paintings and community arts and so much in between, these websites offer something for everyone.
This year’s second showcase is a testament to the diversity of what Web Creators can come to expect as every client comes knocking with unique needs. This month’s websites include fairytale-inspired NFTs, a cutting-edge supply chain management company, a variety of creative web agencies and studios, an English language school, a graffiti artist, a waxed cotton manufacturer, and a proud community theater.
Take notes on how best practices for mouse, hover, and scroll effects; study how color combinations can be used seamlessly across texts and backgrounds; understand how micro animations bring life to a website; see how text sizes and layout styles affect the atmosphere of a service; and experience how clever copy breathes life into any piece of website content.
Check out a fabulous February showcase that celebrates originality!
10.Aldam Street Art
by Giuseppe Cangiano
Inspired by hip hop culture, Aldam founded a crew, consolidating his desire to dedicate himself to an artistic-musical path. Armed with spray cans, a microphone, words, and paintings, he converts feelings such as anger, frustration, and sadness into creative artworks.
A website that lets you play with colored spray paint as you hover? What else would be more appropriate for a graffiti artist website! Aldam Street Art is a fun interactive website that creates a fun youthful vibe with a dynamic touch. Animated streams of spray paint can also be seen shooting out of the spray can periodically.
The button menu uses icons that correspond to the toolkit of graffiti artists with the same four colors used to highlight each category utilized across the website. There is also a nice sticky effect on the doodles page where each doodle neatly stacks beneath the newer ones.
There is a nice use of asymmetry when displaying the painting page’s second section. Hover effects are used on each of the main paintings which open up within a specific popup. There is also a slide that moves diagonally across the page.
Aldam’s work is given a fitting website that captures the essence of urban art and underground street culture.
Percy & York is an advertising, creative, and digital agency that prides itself on being an out-of-the-box thinker. They get personal when it comes to topics such as communication, campaigns, corporate design, and brands because their passion is to find the best concept for their clients, every time.
The website’s color scheme is perhaps inspired by the agency’s German roots, borrowing black, red, and yellow along with a touch of blue, all with a minor twist. The contemporary color tint is utilized equally on large-sized texts and backgrounds. As is the use of horizontal scrolling which nicely shows off their best work.
The sidebar features a hamburger menu (interestingly shaped like a hamburger) and includes a link to the agency’s Spotify podcast which is something rarely seen. It is also noticeable that there’s some photo editing using the color schemes on different employees, including the company dog, Matilda.
The text also crosses across background colors yet doesn’t affect the reading experience. This is down to the careful color combination which works and blends well with each of the theme’s colors. There is also a nice font pairing of large upper case letters for titles set over smaller lower case letters for descriptions.
Just like the cuckoo delight on the homepage’s footer, Percy & York will have potential clients say, “We like that” before getting in touch.
Design & Development: Percy & York
Theme: Hello
Plugins: Elementor Pro, Borlabs Cookie – Cookie Opt-in, Code Snippets, Essential Addons for Elementor – Pro, Instagram Feed Pro Developer, MailPoet 3 Premium (New), OoohBoi Steroids for Elementor, WP Rocket, Rank Math SEO Pro
Halley Stevensons is the world’s leading manufacturer and innovator in waxed cotton and weatherproofed fabrics. As an independent firm with over 150 years of expertise, the organization has amassed unique technical knowledge and manufacturing experience.
The legacy of the company is woven into the fabric of the website with snippets of the past, present, and future visible on the homepage. Even when using a full-width layout, the website still feels elegant due to its light pastel-colored backgrounds.
Hand-drawn images give the look and feel of a high-end fashion designer’s workshop, as does its no-nonsense, clean, conventional style. The monochromatic color scheme also allows the patterns to speak as the design doesn’t distract from the content.
The mega menu cleverly uses the waxed cotton material with droplets sitting on top that show off its weatherproof selling point. This is a nice way to highlight the uniqueness of the product.
With products exported around the world and showcased each season at London, Paris, New York, Munich, and Milan, Halley Stevensons rightly lets its world-class products do all the heavy lifting using a simple interface to complement it.
An Grianán Theatre is distinctive amongst regional venues for its success as a theatre producer actively celebrating its rich Irish cultural heritage. It has staged many full-scale productions over the years. Its creative partners to date have included Yew Tree Theatre Company, Cork Opera House, Pavilion Theatre, Civic Theatre, and The Lyric, Belfast.
Celebrating local, national, and international arts and entertainment events, the theater also prides itself on supporting local artists who are featured throughout the website. A website that has been rebuilt using Elementor, that is minimalistic, easy on the eyes, effortless to navigate, and resembles a cultural magazine or blog.
The flat, minimalist, black and white design ensures the attention is solely on the latest news and content which adds color and vibrancy to the page. Using thin newspaper-like typography the website’s information-heavy approach makes it easier to digest and is perhaps catered to older audiences who might be less technologically inclined.
This is a website that serves its local community audience by keeping elements in check without going overboard. Proudly displaying its wide-ranging support from famous institutions on its footer, the theater is a focal artistic and cultural point for its community.
An Grianán Theatre is a flagship website for a flagship venue in the North West of Ireland.
Grit brings together a band of creative specialists; copywriters, illustrators, video producers and animators, photographers, and digital experts who work closely with clients to deliver meaningful and impactful creative solutions.
Utilizing an unusual Rangoon Green color for its background, and unique fonts, the website features pockets of scroll animations and hover animations that keep viewers’ attention active. The dark background also gives the website a high-end look and feel, with a nice serif and sans serif pairing ensuring the copy has a nice hierarchy.
The use of scrolling effects gives the feeling the viewer is being taken on a journey similar to an exhibition, with each project acting as a showcase and not following a typical symmetrical design. The clickable project pages themselves are intricately detailed. In fact, the website interestingly mentions its latest big project, Momentum Podiatry, within the hero itself.
The minimalist take allows the projects to speak for themselves with larger projects receiving more real estate than smaller ones. Visitors also have the ability to view the studio’s entire portfolio on its index page, turning their full portfolio into a standalone page.
While Grit might consider itself a small studio, its website highlights big capabilities.
Design & Development: Chris Forsyth
Theme: Hello
Plugins: Elementor Pro, Code Snippets, Extras for Elementor, Custom Post Type UI, Piotnet Addons for Elementor Pro, Simple Page Ordering, SVGator, Yoast SEO
Studio DoublePoint works with clients from all walks of life for users around the world. Whether it’s optimizing current websites or creating a new website, their web services allow clients to increase their audience and obtain better engagement rates with customers.
Using strong colors, scroll effects, and GIFs, the studio showcases its projects in a fun way. The subtle use of zoom-out effects with images growing as we scroll down is a nice way to bring attention to the studio’s success stories. There is also a nice soft Sans Serif font which helps accentuate the contemporary look and feel of the website.
The background color changes from beige to orange changes as you scroll down just as attention is brought to the rotating emblem. Orange is a recurring color to highlight key areas. There is also a nice hover effect on the rotating contact CTA as well as the email and phone contact options. The colors of the project pages similarly borrow from the projects themselves.
The menu uses a nice modern font style with hollow outlined text when hovered over, while the studio page uses the Graphic & UI Designers still facial images that change based on the accompanying text. This shows a little bit of his personality too, making the website more relatable.
Studio DoublePoint creates unique identities for projects and makes them live and grow on the web.
Logico provides business consulting based on business intelligence. They combine reliable and comprehensive data with the most advanced optimization tools in the world and let international experts accompany the application process.
Built by Haim Benisty, whose portfolio website was featured in last month’s showcase, Logico’s high-tech website sets the tone using a high-end background video, drawing in visitors and highlighting its cutting-edge technology. The use of the color blue likewise conveys a message of technical and technological advancement and is popularly used by startups.
The use of scrolling effects takes us inside the distribution center and offices while highlighting several international shipping companies the organization utilizes. Each room appears as a 3D model and highlights its supply chain management services, highlighting its operational excellence.
Robots are seen transporting objects as the video demonstrates how the organization works with the most advanced optimization tools. The use of scrollytelling is beautifully applied and gives the page an almost animated movie-like effect. Each of the pages opens using a wipe effect inviting the viewer in, while the “g” of “Logico” acts as a consistent transition effect.
Logico is a company with an energetic and young spirit that brings a refreshing approach in the field of operational consulting and its world-class website effectively showcases its strongest points.
ChalkTalk is a joint venture of two longtime colleagues who were inspired by many years of experience and success working with students. The duo came up with the idea to create an environment where students not only learn the language but also exchange their ideas without fear and pressure, and enrich their knowledge of other people and cultures.
The website intelligently uses four colors throughout each of its pages. With Global Styling, this can be updated and altered seamlessly. Using combinations of Porcelain, Naples Yellow, Faded Green, Eminence (Magenta), each section of the website’s background changes as you scroll.
Similarly, hover effects are used to capture attention by utilizing colors and animation. There are seamless segues from section to section with subtle transitions, doodles, as well as quotation marks which are used as a motif. Emojis can also be seen which would indicate the website’s younger target audience.
Looking closely, it is evident the illustrations are tied to the text with copy that is more personal used to engage the audience. The menu too resembles an old-school chalkboard that opens with a micro animation.
ChalkTalk sees itself as a slightly different school of English, and with a website that breaks convention, the school definitely sets itself as a class apart.
Eyepples are a collection of hundreds of unique NFT collectibles inspired by fantasy-world, fairytales, darker aesthetics, classical art, and photography. It is a unique magical project built around the Ethereum blockchain where digital art, photography, and illustration merge together almost as an alchemist’s potion.
You might recognize the unique fingerprints of General Condition, our End-of-Year Showcase 2021 Winner, on this fairytale-inspired website design. The fabled apples resemble that often seen in the portrayal of Snow White and evoke feelings of childhood nostalgia as does the center alignment of the text that looks like a storybook.
There is a very effective use of copy to sell the product. With feelings of magic and fairytales, witty phrases, and a touch of marketing nous, the design and copy blend beautifully to bring together a unique world that looks something out of a Disney movie.
Apples (or should we say Eyepples) are prevalent throughout the website, from the use of hover effects on the hero down to the footer. Although not every element of the website is yet live, such as the shop, Eyepples Apples does enough to create great enthusiasm and anticipation due to the high-quality illustrations and storytelling.
All that’s left is to pick our Eyeplle and simply enjoy the magic.
Design & Development: Jovan Lakic and Stefan Kokovic
Theme: Hello
Plugins: Elementor Pro, Jet Elements, JetEngine, Premium Addons Pro, The Plus Addons for Elementor Pro
Barrel Marketing is a marketing, video production, and web development studio helping businesses grow by authentically telling their stories and producing unique and creative experiences. They turn big ideas into beautiful things that connect brands and customers.
This is actually the second time the website is featured in our showcase following a redesign. The first time was back in September 2019. The website looked vastly different then and the new design is likewise up to the mark.
The use of punchy copy paired with a gorgeous video covered in mask shapes captures the attention immediately. The minimalistic look and feel of the website, highlighted by the use of white space give it a modern vibe. The meet the team page too shows the company has a fun vibe and a warm and inviting personality.
The composition of real images paired with colors effectively uses zine design to give the website a fun, relatable, and friendly feeling. Displaying its big-name clients is also a great way to achieve social proof, particularly high up on the page which also adds credibility.
On project pages, there is a nice system of presenting the challenge and the solution which helps potential clients understand Barrel Marketing’s process. The background images and colors also come from the projects themselves, indicating the level of detail that went into the website. Similarly, the contact page also creates a great visual language such as the cat reaching for the phone.
Barrel Marketing helps businesses grow by telling their stories with creative and strategic solutions and with a website that’s equal parts creative, fun, and informative, clients will be quick to click “send”.
Design: Daniel Fexa
Development: Shayne Plesa-Naden, Daniel Fexa, and Sebastien Ringuette
This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish.AcceptRead More
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
