Back to Top

Tag Archives: website design

wp-pattern-directory

The WordPress.org Pattern Creator Now Open to the Public

Updated on by

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.

Showcase of a specific author's block patterns from the block-pattern directory.  Displays three patterns in a grid.
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:

Inside of the WordPress pattern creator. The content canvas shows three columns with about, contact, and follow sections.
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 popup over the pattern editor on WordPress.org.  It teaches what the creator is.
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

Web-Design-Mistakes-To-Avoid

Three common mistakes designers make when creating websites for clients

Updated on by

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
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
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
Whitehill & Bordon Community Trust by VISion Marketing

If you are interested in original article by Tom May, you can read it here

F37 launches a digital playground where designers can explore the possibilities of type

Updated on by

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
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 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 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

Posted in Blog | Tagged , | Leave a reply

The 5 Best Resources for Web Design Inspiration

Updated on by

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.

1. Web Design Inspiration

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.

2. Best Website Gallery

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.

3. CSS-Tricks

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.

4. Webdesigner Depot

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.

5. Reddit

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.

You can find full article by Jack Ryan here

Simple Website Templates You Should Use For Your Next Project

9 simple website templates you should use for your next project

Updated on by

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 

The Fitnesso website template. The headline reads "Your go to online fitness trainer and nutritionist."

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 

The Yonk website template by Djaya de Vries. It features a large image tilted on its right side, a section for a headline on the left and a rectangle navigation n the upper right hand side.

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 

An image of the Trönic website template. It features a giant H1 in the middle with a description on the upper left hand corner. The website is simple with a hidden navigation and small icons for social media.

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 

An image of the Satoshi website template. It features lots of white space with a headline, subhead, and CTA on the left hand side. Above, there is a simple navigation and another CTA.d

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 

An image of the Aspire template by Daywork. It features a simple blog section that serves as the home page, along with an a

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 

An image of the Better Half by Flowyak website template. It features a large H1 in black, serif type on a cream background.

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

An image of the Mercer template by Medium Rare. It features a large image, in this case, a modern house. Mercer — the headline — is in small font in the upper left hand corner.

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

An image of the Opus website template by Flowbase. It features a prominent H1, an announcement bar above,  and a simple navigation

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 

The Vet X template by BRIX templates. It features bright colors on a muted beige background with a prominent H1 and CTA.

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. 

You can read full article by Naja Wade here

Elementor Websites of February 2022

Updated on by

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.

Design & Development: Giuseppe Cangiano

Theme: Hello

Plugins: Elementor Pro, Dynamicooo

See Live Website

09.Percy & York

by Percy & York

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

See Live Website

08. Halley Stevensons

by Liam Bonar

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.

Design & Development: Liam Bonar – lbd.studio

Theme: Hello

Plugins: Elementor Pro, Yoast, WP Rocket, Autoptimize, ACF, Imagify

See Live Website

07. An Grianán Theatre

by Tommy Callaghan / Manna Design

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 flatminimalist, 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.

Design & Development: Tommy Callaghan

Theme: Astra

Plugins: Elementor Pro, Advanced Custom Fields, JetEngine, JetSmartFilters, WooCommerce, WP Rocket

See Live Website

06. Studio Grit

by Chris Forsyth

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

See Live Website

05. Studio DoublePoint

by Nicolas Meyer

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.

Design & Development: Nicolas Meyer

Theme: Hello

Plugins: Elementor Pro, JetEngine, Premium Addons, WP Rocket

See Live Website

04. Logico

by Haim Benisty

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.

Design & Development: Haim Benisty

Theme: Hello

Plugins: Elementor Pro

See Live Website

03. Chalk Talk

by Addictive Design Creative Studio

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.

Design & Development: Marko and Marija Djurdjevic

Theme: OceanWP

Plugins: Elementor Pro, Ocean Extra, Quiz And Survey Master, MouseWheel Smooth Scroll

See Live Website

02. Eyepples

by General Condition & Milkink Creative Studio

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

See Live Website

01. Barrel Marketing

by Barrel Marketing Ltd.

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

Theme: Hello

Plugins: JetEngine, JetSmartFilters

See Live Website

You can find original article by Jude Abraham here