Web Design and UI/UX Articles | GraphicMama Blog

Material Design: What is it and How To Get Started [+Resources]

Ludmil Enchev — Fri, 23 Sep 2022 14:52:51 +0000

We all remember the good old websites. They were extremely light, loaded fairly quickly (especially given technology back in time), and delivered amazing experiences according to the standards in the 90s and in the 00s.

But Internet has emerged and what it looked like space to gather information has rapidly monetized. Once the money started to play a huge role online, websites started to compete against each other by adding lots of images, subsections, long descriptions, and loads and loads of stuff, making sites load slower and creating an inferior user experience.

The rise of smartphones created another problem – how website content will appear on a smaller screen? As a result, Google introduced Material Design – an answer to the ever-increasing user demands.

In this article, we’ll provide a material design definition, go over the main principles, and see how icons and colors are used in material design. We will end the article with some useful resources you can apply to your projects.

Article overview:
What is Material Design?
Principles of Material Design
Icons and Colors in Material Design
How to Get Started?
Resources

1. What is Material Design?

Material design is a design standard (or system) that has been developed by Google back in 2014. The entire idea behind that decision was to create a design system that will create better consistency across all devices, and add predictability to all designs, in order to simplify the user experience.

For one system to remain adequate in such dynamic times for the Internet industry, evolution is inevitable. Google’s Material Design is always transforming, always improving, and always riding the new waves of design!

In October 2021, Google released Material Design 3, with updated guidelines, and many websites and apps using Material Design 2 started migrating to the latest version.

2. Principles of Material Design

For a design system – and any pattern, in general, is crucial to have a specific checklist of requirements, in order to be qualified as such. Google Material Design guidelines are there to help you. Below, we will show you some principles you need to apply in your design, so it can be regarded as “Material”.

2.1. Understand the concept behind “material”

Material Design has its name for a reason. Unlike Flat Design, here we see a completely different concept. A concept that uses visual hierarchy to create a real-world feel to designs. Human beings can make associations. Material design heavily relies on 3D forms, to add more depth and realistic user interfaces.

2.2. Utilize shadows

Shadows are a crucial element across all Material Design components. They should be carefully chosen, as they aim to improve user experience. Using shadows will better orientate users about their current location on your app or website. Bear in mind all shadows should be subtle and non-intrusive.

2.3. Pay attention to colors

The Material Design color palette is specific. First and foremost, you should use a maximum of two main Material Design colors – one primary color and one accent color. You’re also limited to 3 hues per each. Since you’re not left with much “room” for maneuvers, it is considered pivotal to use bold colors to capture attention.

2.4. Keep consistency

Material Design is all about creating a consistent user experience. This means you should follow the same hierarchy across all pages – same hover button effects, same on-click colors, same site structure, and page colors. Your users should intuitively select components from the website/app and easily know where they are at any moment.

2.5. Follow the image guidelines strictly

Images also play an important role in the whole “picture” (pun intended). They should be aligned perfectly, appear in full HD quality at least, and be edge-to-edge. The latest is key to the success of the whole concept. If images are a part of your design, they should also define the primary and accent colors, so all hues fit naturally in the design.

2.6. Consider whitespace as a crucial part of your design

In Material Design, whitespace plays just an important role as components, colors, and shadows. Why? Because utilizing it could significantly improve readability, thus creating better UX. Negative spaces also serve another purpose – they can put the focus on the desired element, for example, the call-to-action button.

2.7. Take advantage of motion design

Motion design leverages user experience by creating interactions between the content producer and content consumer. By providing visual feedback upon each action taken by your users, you drive more engagement. Each Material Design animation should be intuitive, smooth, and authentic. For example, if users click backward, they should see their screen going from left to right, as this is their natural comprehension of turning back pages.

2.8. Select components properly

Each component you insert into your user interface serves a specific purpose. One of the main requirements is to use components in their respective field – if you have a roadmap, having a progress map might make great sense. But will it make sense on your Pricing page? A rule of thumb is – if you’re not sure you need it, avoid it.

2.9. Optimize for a mobile-first experience

From 2017 to this day, mobile traffic has multiplied by 7 times. As a result, mobile UX quickly becomes existential. It even compensates for the website experience. Material Design for mobile devices includes fewer components, larger fonts, a dark theme for a battery life saving method, and other measures.

2.10. Less is more

Material Design lays the foundation of the new wave in UX/UI design – minimalism, and it follows Google’s concept – “less is more”. If your goal is to utilize Material UI Design, then you should get rid of unnecessary elements and components, and leave room for what truly matters.

P.S. The result will be a faster page load speed, and Google will reward you with higher positions in its SERPs.

3. Icons and Colors in Material Design

Material Design icons and colors are crucial for the successful execution of each project. We already stressed the importance of colors. Let’s see in detail some of the main requirements for both icons and colors.

3.1. Icons

It’s impossible to have a website without icons. But the variety of screen sizes and resolutions has created a problem – icon legibility. That’s why Google has come up with a separate icon checklist that you should complete.

Icon Size

The standard Google Material Design icon has a 24px size and is a scalable vector graphic. It’s crucial you place them on the grid.

Icon Clarity

Icons are meant to be clear and legible. To avoid any distortion, you should place icons on the coordinate system on pixels.

Strokes

For your icons to be considered acceptable, they should have bold and consistent strokes. Avoid rounded stroke terminals and thin strokes at any cost.

Icon Shapes

Icons in Material Design should have geometric and consistent shapes. Do not use loose and uneven shapes.

Complex Icon Shapes

If you have to make complex static icons, make them face-forward and skip hard-to-make shapes. Static icons are not recommended to appear as 3D shapes or digital art.

Spacing

According to the best practices in Material Design, you should leave space between icons equal to 2X your icon size. For a standard 24×24 px icon, the whitespace should be 48x48px.

Animations

Animated icons should have a duration. According to the Material Design guidelines:

Simple icon animations should have a 100ms duration
Standard icon animations should have a 200ms duration
Complex icon animations should have a 500ms duration

3.2. Colors

Colors also play an essential role in your Material User Interface. Whether you use them in the background, extract them from your images (with a color picker tool), or use font colors, every single nuance has its unique purpose. We always recommend learning how to use the Color Theory before you conceptualize your Material Design vision.

Color palettes

Google developers are aware not everyone is born a graphic designer, that’s why they have developed their own color matching tool which allows you to select your primary color, and then automatically generates the additional hues which match it. The same logic is applied to the secondary color.

Primary colors

Primary colors will appear most of the time on your designs. Ensure they are bold and represent your brand in the best way possible. If you have large images, you should extract your primary colors from the picture, to achieve design consistency.

Secondary colors

Secondary colors are a great choice for progress bars, highlighting texts, etc. There should be a direct correlation between primary colors and secondary colors. A good practice is to use a secondary color that is between the primary colors, especially after the introduction of dark themes.

“On” colors

“On” colors, or the colors that appear when you hover over a component, are a significant part of the user experience. They emphasize the desired action and should separate it from the other similar components. This effect is achieved by adding more contrast for more accessibility – a 4.5:1 ratio is the minimum.

Background and surface colors

Background colors are the ones that are behind the website or app content. Surface colors are the colors that appear on the site components. Depending on where the text appears (on the surface or it is directly placed in the background), it should have enough contrast from the background/surface color.

Status colors

Status colors represent a certain state in Material Design. They are globally accepted standards like road signs and users are quick to notice them. For example, green is always received as a “complete” stage – regardless if it is about a task or a process. Red, on the other hand, represents an error. Status menus should have the same color code across all designs.

Dark and Light themes

We have to emphasize that colors will vary between the different UI versions of a website/app. Dark and light themes usually use contrasting colors aimed at keeping the legibility. As a result, we might end up with 2 primary colors, instead of one.

Icon colors

Icon colors should match the theme. While they might look on a light or dark theme, you should inspect the other version – is there enough contrast? Stick to a 4.5:1 ratio and you won’t be disappointed. If there isn’t enough contrast, consider adding a second primary color.

4. How to get started?

Creating Material Design websites and user interfaces for apps requires you to have knowledge of UX and UI design. You should work with UX design software. In this section, we will provide you with a couple of tutorials from some of the best UI/UX apps on the market.

4.1. Adobe XD

Adobe XD has become a fan-favorite for many UX and UI designers, and especially for Creative Cloud users. We have already published 25 supreme Adobe XD tutorials that you should definitely check out. But there’s more to that!

Let’s see a video example.

Material Design Blog UI

In this Material Design tutorial, you will see how to create a basic UI Design for a blog app. What you will find is how to include buttons, icons, color palettes, and texts, and save the final version of the design. A simple, yet very efficient video tutorial.

4.2. Figma

Figma is another popular software in the UX design world, and we have covered it with 24 quality Figma tutorials. It’s an amazing app that you can utilize to create super Material designs.

Let’s check a video example:

Material Design Color System

In this Figma video tutorial, you will find out how to create a color system in Figma utilizing a Material Design theme builder plugin. You can also use an image to create the color palette which is even better!

4.3. Sketch

Sketch is probably the best UX/UI software for a macOS environment. You can create a variety of gorgeous designs with it and it is no coincidence the developers are well prepared for Google’s Material Design system. You can check Sketch’s guideline which also includes a couple of videos.

Let’s watch an example video of how to implement Material Design with Sketch:

Material Design in Sketch

This tutorial will show you how to use a color palette from the Material Design guidelines, and how to apply those changes in Sketch. What might astound is how all components switch colors, once you apply the change.

4.4. Photoshop

Photoshop is one of the most capable software solutions you can find for design, despite being the only one on our list that works with raster files (note that Adobe enabled vector functionalities in their 2021 release). We have already prepared a guide with 30 amazing Photoshop tutorials, so checking it out might give you a helping hand.

Material Design with Photoshop is not impossible, and given the latest updates, it’s better than ever! Let’s see a video – it is a bit dated but the concept is great.

Photoshop Material Design

The tutorial is extremely helpful even though it’s not “fresh”. During the first part, you will see how to use Material Design in Photoshop, and how this software can help you craft masterpieces despite the limitations.

4.5. Webflow

Webflow is kind of a “hipster” among the other members of this prestigious list. Well, we ranked it 5th in our UX software comparison, so there are strong arguments why it should be there. As a capable UI and UX program, it can implement Google’s concept perfectly.

Material Design with Webflow

This video tutorial will guide you through Webflow – first, it will provide a quick definition (you can skip it if you like), then move to the “real job” – optimizing your design and aligning it with the best practices of Material Design.

5. Resources

In this section, we will pay attention to some resources, guides, and templates that you can apply in your practice, and get better with your designs.

Free Figma icon set

Figma developers have come up with 2,000 free icons for Material Design, available for everyone. They come in five variants, so you will have plenty of choices when building your website or app UI concept.

Material Design 3 Color Guideline

It’s a good idea to check the new requirements for MD3 when it comes to colors. The color system is well explained. One thing to pay attention to is tonal value and how a color can become 13 unique colors.

Angular Material Design Guides

Angular is one of the most popular frameworks for creating designs according to Google’s procedures. Let’s have a look at their Material Design guideline.

Type scale generator

As we have already realized, this design system pays attention to all details, and fonts are no different. Google has come up with a type scale generator you can use for creating a combination between a headline and body text font. The generator calculates the pixel size automatically.

Material 3 Full Guideline

We already mentioned the color guideline. “Material You” as some people say it, has a brand new guideline with resources. Resources are available also for React and Flutter users.

Free 600 brand logos

A free collection of 600 free material icons that you can utilize in your web or app design.

Material Design UI Kit for Adobe XD

This Material UI kit can be added to your libraries and can be downloaded for free. It consists of 200+ elements for a light theme.

Paid Sketch Material Kit

A collection of 1200+ high-quality symbols, 100 and more different styles, more than 1000 icons, and other components. The UI kit is part of a popular React library.

Figma Material Design UI Kit

Figma has released its own Material 3 Kit that is free to use. While it’s being updated regularly, bear in mind that it’s still a work in progress and there are some issues here and there.

Adobe XD Material Design Guidelines

Adobe has released its own article about Google Material Design and the way you can implement it in its product. The good news is all steps have good explanations, and there are a lot of screenshots available.

Conclusion

Material Design is a great concept. It creates consistent user experiences and simplifies website and app design, ensuring all users will easily access buttons and layouts. While no design system is perfect, having common standards that will reduce bad experiences is always a good idea!

If you find this article useful, why don’t you check some other design-related ones?

The post Material Design: What is it and How To Get Started [+Resources] appeared first on GraphicMama Blog.

30 Inspiring UX Design Examples For Your Next Vision in 2022

Ludmil Enchev — Mon, 11 Jul 2022 12:04:27 +0000

Users get more and more demanding and if a design itself delivered great outcomes some years ago, there is no guarantee it will work today.

However, finding inspiration for your next website or app design might be a tough task. You need to consider plenty of ideas, many of which not be suitable for your business. As a result, you might be wasting productive time.

In this article, we have gathered 30 design examples with an outstanding user experience, which can serve as a guiding light and inspire you to the bones. We have carefully selected our examples to cover as many niches as possible, focusing on both B2B and B2C. Let’s take a look:

1. MILU – Product Tutorial

Type: Cosmetics | Country: the Netherlands

MILU is one of our top user experience design examples for a couple of reasons: not only does the color palette indicates who these products are for, but there are a lot of high-quality images and videos, and on top of that – there are explanations of each product (ingredients, target audience, etc.) and a video of how to use it. Simply amazing!

A great example for:

Video instructions
A detailed explanation of each product
A beautiful feminine color palette, indicating the target audience
Creative choice of icons

Visit Website

2. Revolut – Personalizing user experience

Type: Fintech | Country: UK

Revolut offers an exceptional experience for its customers. You can personalize everything there – from your virtual card look to your user interface. It’s an example of mobile UX design that can serve as a role model for other apps that want to offer such a level of customization to their clients.

A great example for:

Great attention to detail
Sublime personalization
Simple, and well-explained icons with services

Visit Website

3. Clutch – Detailed Filters

Type: A Review Platform | Country: USA

Clutch.co showcases a large portfolio of B2B agencies. It offers one of the most advanced filters we have seen, thus the platform can easily qualify as a benchmark in filter design examples. On top of that, the review feature gives companies a lot of credibility and makes people trust Clutch when making decisions. Users can also see hourly rates, total budget costs, etc, which is pivotal. The cherry on the cake is the “Verified” badge that is the whole essence of such platforms – to connect clients with trusted partners.

A great example for:

“Verified” badge
Advanced filters
Service focus tab

Visit Website

4. Kitchen.co – A Brand New Service Explained

Type: Communication platform | Country: Bulgaria

Kitchen.co is a B2B and B2C communication platform that allows seamless information exchange between teams and clients. What made it rank among the good user experience examples is how well-explained each feature is on the landing page and the interactive Agency/Client view achieved by a toggle button. There are lots of platform screenshots and bullet points that make things clear to understand.

A great example for:

Complicated service explained simply
Great, descriptive visuals
Showing multiple reviews
100+ features explained clearly

Visit Website

5. Vunabaka – Useful Time and Weather Plugin

Type: Luxury resort | Country: Fiji

Vunabaka is a luxury resort in Fiji and the website shows it as such. The website design boasts a friendly UI with amazing high-quality images of the place and a luxurious copy that goes along. What ranked it in our UI and UX design examples is the smart plugin that allows you to access the local time and weather forecast in Malolo village in real-time and make you want to go there. A small but smart and creative concept.

A great example for:

Luxurious text copy
High-quality images
Real-time time and weather plugin

Visit Website

6. eDreams ODIGEO – Case Studies

Type: Travel site | Country: Spain

eDreams is a travel website with a couple of different services. What we loved, though, is the case studies that sparked our interest. It’s very interactive, full of infographics, and it has plenty of high-quality images and illustrations. We believe it’s one of the best UX design case study examples you can find today – elegant, professional, interactive, and most notably – creative.

A great example for:

Creative concept for case study
High-quality images
Interactive infographics

Visit Website

7. DrinkPerfy – Product Benefits and Reviews

Type: Soda Drinks | Country: USA

DrinkPerfy is a company that offers non-alcoholic beverages with natural ingredients. We rated their design based on how well they managed to promote their product by stressing its benefits and attaching reviews from people. Lots of bullets, illustrations, and a gradient background make the website interface more “juicy”.

A great example for:

Product benefits
A unique UI that matches product design
Comparison table between Perfy and other similar products

Visit Website

8. Netflix – TV Streaming Services Made Simple

Type: Streaming services | Country: USA

Netflix is the most popular streaming app available. It ranks as one of the best wevsute design examples because of the simple navigation, the dark theatre-like theme, and a straight-to-the-business structure – they know you are there to watch movies – you will find completely different movies/series based on your taste on one page, and nothing else to distract you from movies. And you don’t even have to read a synopsis or search for a trailer – it automatically starts on hover, genius! Not to mention our favorite function to automatically start the next episode or skip the intro.

A great example for:

Clean and simple navigation
Great visuals
Explanations written in a plain language

Visit Website

9. Octaevo – Using Shape Patterns

Type: Accessories | Country: Spain

Octaevo is one of the examples of UX design that impresses with imagination. It perfectly blends shapes and images, and the 3D illustration design makes this website extremely useful if you want some motivation for your next art design project.

A great example for:

3D forms
Use of shapes
High-quality images

Visit Website

10. Blueventure – Utilizing Color Theory

Type: Accessories | Country: USA

We have brought this UI design example because the whole website is made to ease people who want to be credited. Venture capitalism is hard to explain but here, things are made simple and friendly, and another thing we loved is the elements that have been used – a positive trend that appears when the website is loading and utilizing the color theory perfectly.

A great example for:

Illustration with a positive trend (arrow up)
Combination of whites and blues (build trust)
Simple explanations

Visit Website

11. Clac – Getting Personal

Type: Personal Assistant Services | Country: France

Clac is a very interactive animated website. What makes it a great user experience example is how well the design “communicates” with users – it’s playful and quite interesting. What impressed us is the direct tone of voice that gets personal. In fact, the FAQ section leaves us with the impression that Clac is a name of a person, rather than a platform.

A great example for:

Design communication with the audience
Lovely explanations
Quirky FAQ section

Visit Website

12. Google – Competing Against Itself

Type: Search Console | Country: USA

Don’t you find it weird how design trends change but Google has remained with the same interface since 2016, and it even has similar looks to the design from 1999? The concept “less is more” will never get old. There are a lot of features that you will only access once you look for them. It’s the recipe for being #1 in the world for so many years.

A great example for:

Design consistency
Lots of tools available upon search

Visit Website

13. 2Create – Showcasing Brand Portfolio

Type: Service page | Country: Bulgaria

2create is one of the best-looking portfolio design examples. It may serve you as inspiration if you have multiple brands which operate within the parent company. All products are explained with a few sentences but include numbers, the black and white color palette gives the company a more premium interface, and the big bold letters ensure great text legibility – crucial for mobile experiences.

A great example for:

Lots of branding, including font colors
Great explanation of the brands
Creative navbar

Visit Website

14. Paolo Cottini – Adding Elegance

Type: Winery | Country: Italy

If you sell high-end products, then having a premium user design is a must. We can easily spot the elegant touch with the handwritten signature text and using “premium” colors plus black-and-white photography makes the design exquisite.

A great example for:

Personal signature
Detailed product explanations
Bold letters

Visit Website

15. Soxey – Minimalistic Design

Type: Socks | Country: Switzerland

We rate Soxey highly among the examples of UX design because of its design consistency, minimalism, and the usage of square forms. We can also praise the Swiss for adding such a photo as the main one. It sets the tone of the whole website. Last but not least – for each pair of socks there is a detailed explanation that gives further value in terms of SEO.

A great example for:

SEO
Great filters
Detailed About Us page

Visit Website

16. Masterclass – Aggressive Sign-Up Page

Type: E-Learning | Country: USA

Masterclass is a premium e-learning platform with lectures from industry professionals like Gordon Ramsey, Marques Brownlee, Richard Branson, etc. It’s one of the best customer-focused experiences for SAAS companies, as it offers easy access, a dedicated B2B portal (called “At Work”), and an amazing Plan page with comparison. Add the stunning user interface with rich blacks and red CTA buttons, and we see why this platform is so popular.

A great example for:

Dedicated B2B section
Great Price page
Aggressive Sign-up page

Visit Website

17. Rib Rack BBQ – Stating its Benefits

Type: Sauce | Country: USA

Rib Rack BBQ is another website design that utilizes comparisons between the product and competition. One page that many other websites lack is the Community page where people can share their experience with the sauce. It creates good vibes and brings more attention. Other than that, we also have to compliment the FAQ page which has 14 questions that concern the product and allergens.

A great example for:

Community page
FAQ page
Highlighting features through a product comparison

Visit Website

18. Wana Brands – Playing with Text

Type: Gums | Country: USA

Wana Brands focuses on showing off some creativity. And indeed – it works. From creative headlines to a great podcast section and a variety of other videos and blog posts. If you want to express yourself, then this is one great customer-centric approach to how to do it.

A great example for:

Creative headlines
Different types of content

Visit Website

19. Booking – Gamification in user experience

Type: Travel App | Country: the Netherlands

Gamification is a great way to optimize the user experience and Booking.com are well aware of it. Genius Levels incentivize customers to spend more money and serve as loyalty programs. On top of that, travel-related services are also offered, like rent-a-car and flight services. It is one of the best examples of gamification and cross-selling opportunities.

A great example for:

Cross-selling
Gamification (progress levels)
Search options

Visit Website

20. Duolingo – User Personalization

Type: Language App | Country: the USA

Duolingo can easily go down one as one of the best mobile UX design examples. The app offers an easy-to-use interface and access to many languages. You get to answer how you reached Duolingo which is crucial to show which channel delivers. On top of that, there are other quiz questions you need to answer to be segmented.

A great example for:

Client personalization
Gamification
Additional services (upselling)

Visit Website

21. Burger and Sauce – Utilize Options

Type: Restaurant | Country: UK

Customers love to choose. That’s why we bring you one UX design example that provides you with lots of choices. Want to check menu online? Sure! Or do you prefer to download it, instead? Okay! You can also place an order or subscribe. One thing that can serve (pun intended) as inspiration can be the gallery – as a restaurant, this is a must-have condition.

A great example for:

Choice of options
Following industry guidelines

Visit Website

22. Aspen Homes – Direct Call Button

Type: Real Estate | Country: USA

Aspen Homes is another one of our UI/UX design examples that stands out with original ideas. What we love is the seamless “mature” experience of the website. Designated pages such as “Our Approach” give more depth, while advanced filters, high-quality images, and short and clear explanations impress a lot. And let’s not forget about the truly amazing button that calls the number directly.

A great example for:

Advanced search options
Our Approach page
Direct Phone Call button

Visit Website

23. Apple – Product Comparison

Type: Electronics, Services | Country: USA

We cannot submit an article about amazing user interface designs without mentioning Apple. If your brand offers a variety of services and products, you can get inspiration from Apple – they have an amazing multi-page layout. You can find FAQ sections for everything, and the comparison tables between their own product lines are a genius idea.

A great example for:

Product comparison
Designated FAQ section
Insane page optimization

Visit Website

24. Zapier – Connecting Clients with Professional Guides

Type: SaaS | Country: USA

It’s always challenging to create a web design for B2B clients. There are different demands and simplicity plays a crucial role. The business automation software is hard to understand, but we love how each supported service is easily available through scrolling and a search box. On top of that, there are flexible pricing charts, a big community, and a network of experts that can help you set up your account.

A great example for:

Big professional network
Flexible pricing models
Lots of useful information on the website

Visit Website

25. We Are Jude – Showing Stats

Type: Supplements | Country: UK

It’s not an easy task to create a website for bladder pads and supplements that attracts audiences. However, this website comes with a stunning UI design – lots of numbers, all proven statistics, many useful infographics, comments from a Ph.D. from Harvard, and a Community section. Top that with an amazing blog section, and you can clearly see why it appears on our example list.

A great example for:

Superb use of statistics
An amazing blog section
Easy access to all products

Visit Website

26. Puzzle Break – Offering New Solutions

Type: Virtual Meeting App | Country: USA

Puzzle Break offers brand new experiences for its customers. We gave it a place in our UX examples list because we believe CX (Customer Experience) is a crucial part of it. And we can see it with the variety of opportunities to organize team buildings online, virtual escape rooms, and even escape rooms in Seattle. A lot of options, and you can get a quote easily.

A great example for:

A variety of choices
You can get a personal quote
Good FAQ section

Visit Website

27. Amazon – Overal Experience

Type: Ecommerce| Country: USA

Amazon offers a unique experience for its customers. Starting from the “Buy Box” button that allows users to shop directly if they don’t want to choose between different manufacturers, to Amazon Prime which gives plenty of options for discounts, free shipping, etc. Also, Amazon gives plenty of other services – like video streaming, TV channels, servers, and lots of B2B tools. However, if there was one thing that makes Amazon truly awesome, it’s Amazon Prime – arguably the best loyalty program globally.

A great example for:

Buy Box button
Detailed filters
Loyalty programs
Range of services

Visit Website

28. ESPN – A Complete Media Package

Type: Sports Channel | Country: USA

It’s common for TV channels and radio stations to slightly neglect their websites. That’s not the case with ESPN. It can be classified as one of the finest UX website design examples for sports fans, with lots of videos from games, a large article collection, interview sections, social media handles, TV channel integration, and a live score plugin.

A great example for:

Video footage
Live data
Social media handles

Visit Website

29. Birkenstock – New Market, New Version

Type: Shoes | Country: Germany

Birkenstock is among the most popular manufacturers of sandals and has a long history. The reason this legacy shoe producer ranks in our example list is simple – it customizes its product according to the market. Not only does the Birkenstock website has different cover photos and images for each region, but also the featured models are tailored to fit local shoppers.

A great example for:

Separate edition for each target market
Product customization per region
Quick loading speeds

Visit Website

30. BMW – Delivering More Than What is Expected

Type: Car Manufacturer | Country: Germany

BMW has a superb website design. You can feel the BMW experience – by listening to some podcasts or reading articles about climbing Mount Fuji. Of course, if you’re just looking forward to buying a new car, just press the “Models” sections and you can configure the models in your local language, as the website optimizes user experiences for local markets. You have all the standard options and a high-quality rotation image of the car’s exterior/interior.

A great example for:

Focusing on the customer journey
Easy car configurator
“Hypnopolis 2” page

Visit Website

Final words

It’s easy to get carried away by our top UX design examples. And while for brands like BMW and Apple exclusive design comes at a high price tag, you can always think of Google – delivering simple solutions but optimized to the last bit. After all, design is all about customers. Your customers.

If you find our article helpful, you can also check some of our other content:

The post 30 Inspiring UX Design Examples For Your Next Vision in 2022 appeared first on GraphicMama Blog.

What Makes a Great School Website Design [with Practical Tips and Examples]

Boril Obreshkov — Fri, 28 Jan 2022 15:25:55 +0000

A school website is much more than means to list information online. It’s the front gate to your school community, representing its values and philosophy. A well-made school website design and structure can help build a reputation for the institution, create an entire concept for how first-time visitors will view it, and ultimately give the school an advantage over competitor schools. In this article, we’ll talk about what makes a great school website, with many examples and practical tips on how to improve your virtual hub of knowledge!

Things Great School Websites Have in Common

Event Calendars
Virtual Tours
Teachers Introduction
Clubs and Achievements
Funding
Branding
Easy Contact Info
Language Options
News and newsletters
Social Media Share
Useful Resources for Online Education
Easy Application Forms
Optimization and Security

Interactive Event Calendars

Most school websites will use posts to convey information about upcoming events. In order for visitors to find them out, they will need to scroll around. There is a better way to approach this and make the information easily accessible with a few clicks. Use interactive event calendars instead with the names and dates of your events. It’s a great way for visitors to have an overview of all your upcoming events at first glance and make them interested to click and view more information or book a ticket, all in one click!

The Indianapolis Children’s Museum, for example, has a great calendar that displays not only when and where the event will be, but also additional information on how to attend.

Lausanne‘s calendar is also easy to scan and allows you to see all events for the current month with their respective time and locations.

Offer Virtual Tours

Being able to show people around even in lockdown conditions will be much appreciated by everyone and will convey more way more information than you could with photos or descriptions. Creating the virtual tour is very easy, all you need is a camera, computer, and a free tool like klapty.com

King School has a great virtual tour experience, that allows students to get to know their future school in the comfort of their home.

Rider is a great example of diverse ways to present information. They allow you to choose the interactive method of exploring their campus, including a printable map.

Add photos and videos to your website

Give a great first impression of your facilities with photos and videos. Being able to control the lighting and angles you can make amazing images. Another good idea is to consider is hiring an FPV drone pilot to make breathtaking videos of your building inside and out.

A photo gallery is very important in order to see how past events have gone and to soak on the nostalgia from before. Norwich School is a great example of how that should be done.

Introduce Your Teachers

A school wouldn’t be a school without its teachers whose work builds the reputation and community. With this in mind, introduce your teachers with photos or short videos and list their experience and expertise in 1-2 sentences. This way you will start building trust with the parents of the potential student.

Finalsite is a great example of how to welcome new team members. They have information about who the teachers are, what would it mean to work with them, and even an introduction video.

Sometimes just putting pictures of your staff isn’t enough. You could go an extra step to show your teacher’s strengths and what makes them great mentors to students. Gilman School, for example, has added video introductions.

Show off your Clubs, Achievements and Other Interesting Features

A school is not only a place to learn, it also has one of the biggest social factors among any other institution. It is very important to communicate what extracellular activities a student can join. Use your website in order to communicate why students would love your beautiful school.

McDonogh, for example, has a lot of clubs and activities to offer. So many, in fact, that they organized them into collapsable menus by subject.

You might have one club or activity that is doing really well and you are proud to show. This is the case with The Prep.

Drexel on the other hand, has a different approach. They use data visualization to share statistics and numbers to reassure their potential students.

Invite Investment, Donations, and Funding

Being able to afford renovations, new equipment, and funding for clubs and sports teams will increase the prestige of the school. In order to ask for donations, make sure to include sections that explain exactly how the money will be spent. It’s always better if you include different payment methods (like PayPal, IBAN, credit and debit cards).

Bcsc.org not only gives a large variety of donation options, but they also very clearly communicate how the money will be spent!

Branding is Everything!

Being able to clearly communicate your school’s core values is very important. This is your brand: your logo, anthem, slogan, mascot, and cherished values. In order to achieve memorable branding, keep it consistent in your website, newsletter design, and even during school ceremonies. For example, on any page of your website, there should be your logo and the same color scheme and design as all the other pages, possibly including the school homepage. Your logo and general design should also be included in every email sent by the administration.

Source: amandamartocchio.com

Tbcsc.org show what they believe in and what they stand for.

Archer is a great example of standing out from the crowd. They have a page specifically dedicated to how and why they are different from similar schools.

Easy Contact Info

Your contact info should not be more than a click away from the homepage. People should have easy access to phone numbers of the administration, email addresses and a map with the physical location.

Times2, for example, includes a convenient build-in mab for easy directions to anyone new.

The Summit Country Day School has great administrative office organization. Being able to call the specific office saves time and gives an impression of great structure, organization and professionalism.

Language Options

Add a drop-down menu on the top of the sides of your school website homepage, that allows people to switch between different languages!

Every school website should have language options for international and transfer students. Round Rock is a good example of that.

News and Newsletters

To make sure everyone knows about the most recent developments, news, events, and plans of action, you will include them on your school website. However, it’s always better to go extra safe (and extra professional) by sending newsletters.

Having a news page like Webb School of Knoxville is crucial as it is where parents and students will first go to find more information about anything that is going on in their school.

The newsletter is also a great way to include daily updates. Stuartholme School does that right.

Social Media Sharing

Your school website will accumulate a lot of posts about students winning in competitions, sports and participating in different events. This is information that parents will be highly motivated to share.

St. George School‘s website has clickable share buttons for all the popular social media platforms.

Useful Resources for Online Education

Even without the current situation that makes it necessary to offer online education, it’s always essential to have reading materials and tools for students to read or download. This grants your students access to what they are studying at any time.

Harvard Resources Page

MIT Resources Page

Easy Application Forms

Applying for your school should be an easy experience accessible from your homepage. It’s good to add detailed information about acceptance criteria, needed documents, and a very easy-to-fill intuitive form. One good tool you can use to make custom forms is 123formbuilder.

Park University has an easy application form that presents the required information and contacts.

Add to Optimize

With the increase in digitalization and digital storage of information, it is getting more and more important to consider good cyber security. If you are looking for a simple solution that doesn’t require a specialist you can use one of the most downloaded and best-rated WordPress plugins for that is WordFence.

With tools such as Google Analytics you can easily see how many people have visited your website, how many return, how much interest is based on location, and other useful data, that can help you understand your target visitors better.

In conclusion

Your website is an expression of your company. The same goes for your school website: it represents your school, values, and community. You can take advantage of your school website to build trust and reputation and strengthen the community.

In the meantime, on the topic of online education, you might be also interested in checking some of the related articles.

The post What Makes a Great School Website Design [with Practical Tips and Examples] appeared first on GraphicMama Blog.

Web Design Trends 2022: Weaponizing Chaos to Deliver Unforgettable UX

Al Boicheva — Fri, 03 Dec 2021 15:01:54 +0000

With the top graphic design trends 2022 out of the way, it gets easier to notice and predict the upcoming trends for other graphic design fields, including what’s coming for websites next year. This is why today we’re going to unveil the web design trends 2022 coming in full force to invade the web with more vibrancy, trippy aesthetics, and an unforgettable experience where the minimalism trend of 2021 takes a step back. In addition, we will include real-life examples of working websites for each trend, so you can experience it by yourself.

Trends overview:

1. 3D Illustrations
2. CGI Graphics
3. 80s Synthwave Aesthetics
4. Parallax
5. 2D Cartoon Illustrations and Animations

6. Real Objects as Part of the Experience
7. Brutalism
8. SciFi High Tech
9. Glitch Effect
10. Psychedelic Colors Experience

1. 3D Illustrations

3D illustrations have become quite the huge UI design trend in 2021 and it’s getting even stronger in 2022. This is especially true for a particular 2D/3D mash style that looks like 2D flat design graphics turned into 3D. We can see this tendency becoming a top trend, especially in apps with fun cartoons becoming realistic and attractive with soft candy colors. Through most of the real-life examples and web design concepts by creators from Dribbble and Behance, we can pinpoint three major subtrends of 3D illustrations.

The first one is 3D cartoon characters. Often disproportionate, they remind of the old corporate illustration style, but their 3D spin makes them much more interesting, friendly, and life-like. These characters bring the impression of claymation characters, especially when animated. The second subtrend is the cutout 3D that imitates a collage of 2D cutouts placed in a 3D environment. This style is especially effective combined with a parallax effect which allows the viewer to enjoy the 3D by hovering around the complex group of illustrations.

And the last one, as you have probably seen a lot lately, is real-life humans turned into 3D cartoon counterparts.

Without further ado, let’s dive into some amazing websites that embrace the 3D illustrations trend and all its subtrends to the fullest.

2. CGI

The next trend is all about creating strong interactive websites that guarantee customer engagement. In fact, CGI graphics work best in web design with animation and their complexity speak of quality and high-end technologies, which is a huge advantage for brands that can afford them. With the endless possibilities and benefits of having CGI graphics, this is becoming a trend for agencies and companies that don’t do CGI as a profession. The higher the quality of the graphics, the higher the quality of the brand and the higher the impression of professionalism, reliability, and trustworthiness.

However, there is some great news and that is CGI is not always that complex. Surely, using Cinema 4D, ZBrush or Maya requires a lot of skill and practice, but we’re not talking about making full cinematics. Creating high-quality CGI graphics for a website to make the brand stand out doesn’t require long and complex CGI scenes and hyperrealism.

In fact, your design could do perfectly fine with short animations and semi-abstract imagery. Let’s see a couple of real-life examples that use the right amount of CGI graphics.

WSJ Custom Event: The Field VR Experience Landing Page

Lady Gaga X Dom Perignon Website

Pocketverse: The Universe in Your Pocket Website

RESN Website

Master Hybris Mechanica Calibre Landing Page

NAOZ: Digital World of Entertainment

3. 80s Synthwave Aesthetics

This trend won’t surprise anyone as it’s already everywhere in music, movies, tv-shows, and is taking web design by the horns as well. The retro-futuristic neon style from the 1980s is known as Synthwave or Outrun and you can easily recognize it by the dak mode, glowing neon colors, and grids. Its beautiful night city aesthetics bring nostalgic vibes to a beloved decade long gone. Well, at least we can enjoy it in art and design and in these beautiful real-life websites.

Nesh Enterprise Answer Engine

4. Parallax

Not long ago, parallax was quite popular and took over the internet, making scrolling intriguing and engaging. Unfortunately, the trend died for a while as it got overused and not in a good way. At its peak, the parallax was an inseparable part of websites but in many cases was poorly executed which resulted in bad website usability, slow page loading, and way too much scrolling.

So, guess who’s back.

After the calm, parallax websites are back on track and becoming a trend once more, however, this time with caution. No more overdoing, no more unnecessary aggravating the design or making the page endless and heavy. The new parallax experience is more subtle and follows the oldest rule in the book: less is more.

Scepter and Sword

Fabienne Chapot

Kalso: The Story Behind the Original Wellness Shoe

Discover Ray-Ban Stories Feature

Residential Complex Eniteo

Develop Press

Bugatti Smartwatches

5. 2D Cartoon Illustrations

Aside from mixing with 3D, 2D illustrations go their own way as a trend in cartoon style. There are three approaches to this tendency that we noticed in websites when we made our research.

The first one is including simple animations of 2D cartoon characters or items to make an overall simple website way more engaging. It could be the loading screen, the hero section, or small animated cartoon visuals complementing each section. The second way for 2D cartoons to make a website stand out is to make the entire interface cartoon. In this case, specific cartoon characters aren’t necessary, as each button, menu, and element look cartoonish.

The last approach overlaps with the 3D illustration subtrend of 2D cutouts in a 3D environment. As usual, let’s enjoy some real-life examples of such websites.

Circle of Life Website

Crazy About Eggs Website

Core Share Website

Oatly Website

Enhcd Website

Hybrid Working by Paul Furey

Lunchbox Online Solutions Website

Galeries Lafayette

6. Real Objects as Elements

Businesses that have authentic and memorable packaging designs are seizing the opportunity to show it off the best way possible: to make it a part of their website’s design. Instead of simply including a high-quality photo of the product, these websites use the product photos as separated elements that they can animate or emphasize through the parallax effect. This trend centers around the product and makes it a part of the experience.

Below are some amazing examples of websites that embrace the trend and understand the assignment differently, all with very creative and interactive solutions where you can interact with the items.

7. Brutalism

Actually, the next trend is more of a reactionary anti-trend and it’s taking over the internet to destroy the established web design practices, strip them from their lightness and optimism, and make them unapologetically bold, candid and ugly on purpose.

Originally, the name Brutalism comes from the French phrase “Beton brut”, meaning raw concrete, and characterizes the Brutalism architectural style emerging in Europe and the USSR after WWII. This architectural movement is all about a strong impression and communicating directly to the viewer with an industrial look, simple geometry, and unapologetically oppressive aesthetics. Furthermore, Brutalism is often used to convey post-apocalyptic, dystopian, and totalitarian aesthetics in fiction.

So what does this mean to web design?

In simple terms, it means stripping the design to its most basic raw appearance, making it more of an anti-trend against all established trends. Brutalist web design uses basic web-safe colors, raw interactions, big and heavy fonts, a lack of hierarchy, and ignoring the basic best practices for web design. So no rules, little sense, and a lot of 90s websites nostalgia.

In the following real-life examples, you can enjoy some raw Brutalism in the wild and perhaps find the beauty in its chaotic honest nature. These websites stand out from conventional websites and stay strong.

I Am A Top Site

Chrissie Abbott Website

Sick Agency Website

XXIX Creative Studio Website

HAWRAF Design Studio

The Outline

8. SciFi High Tech

Moving forward, the next trend isn’t limited only to tech companies and developers, as experience showed us it can work even for fashion websites, portfolios, and marketing agencies. Where corporate design gets boring and overused, high-tech aesthetics surely do the job for the website to stand out with a more futuristic look and sleek interactions. In addition, this trend can overlap with CGI graphics, 3D illustration, and even with some elements of the retro-futuristic synthwave 80s style, more particularly the glowing grids and neon colors. So let’s see a couple of examples of websites embracing the High Tech trend.

Kinetix Tech

Kinetix – Website Intro by Yoann Baunach for Clint Agency.

JoyHub Website

30SEC – Combis

Russo Creation Portfolio

Totem Earth Website

Neon Space Force

9. Glitch Effect

Everything is coming together: parallaxes, futurism, brutalism, and retrowave. With this, it’s easy to predict that glitches and psychedelic effects will also get a lot of use in the upcoming year’s web design creations. Fortunately, glitch effects work perfectly with all other web design trends 2022 that we already mentioned and will complete the experience.

Huffington Post Disappearing Data

Chafik Jr Data and AI Engineer

Melt the Fly Website

Francesco Michelini Freelance Developer Portfolio Website

Anime Project Obsolete

10. Psychedelic Color Combinations

Nothing is too much for 2022 and the psychedelic trend for all graphic design fields proves this tendency. Unapologetic vibrant colors, patterns, and animations turn any website experience into a psychedelic trip. Depending on how much you’re willing to distort and melt your elements, you can create an unforgettable experience for the viewers. This is another logical conclusion of the rising trends. In fact, if we combine all the previous 9 web design trends the result would be absolutely psychedelic.

However, just like with everything else, this is not everyone’s cup of tea and should be compliant with specific audiences. So below you will see real-life trippy websites that embrace the psychedelic design trends to different levels, depending on the overall purpose of the website.

Crumbskees Website

The Brand Experience Masterclass

Cartoon Network Studios

Dead Obies

The Dilla Dimension

Final Words

In conclusion, we see a much more logical connection between the web design trends 2022 where all trends can easily overlap and work together in different combinations. In fact, we see that most of the examples do just that: embracing more than just one trend. The upcoming year is definitely something to look forward to.

So what are your observations and predictions about graphic design trends in 2022? Do you have a favorite trend? Share with us in the comments.

In the meantime, you may also be interested in some of the related articles:

The post Web Design Trends 2022: Weaponizing Chaos to Deliver Unforgettable UX appeared first on GraphicMama Blog.

Inspirational Small Business Website Examples That Do It Right

Ludmil Enchev — Mon, 06 Sep 2021 20:19:16 +0000

I’m a small business, working locally with a good reputation and client base, so do I really need a website? The answer is undoubted – YES, you need one.

The web has changed everything and will continue to do so. Consumers, customers, and clients all realize that going online to find a business is the fastest and most efficient way. Just look at the number – a huge 97% of Americans go online to find a local business and there are similar statistics for Europe, in a trend that is Whether you are a cleaning service, freelance photographer, coffee shop, own a store, or have another type of small business, a great website is vital for your success.

Now that’s established here are some examples of small businesses that have done it in style. A great selection to inspire you as a business owner, or self-designer. Enjoy

1. Pixel-industry.com – Restaurant Website

Royal Plate starts with an above shot of a table containing food both static and moving. There’s a very clear navigation bar across the top so you can access any information you need quickly and easily. Food shots and shots of the restaurant itself are mixed and merged throughout. There’s an additional gallery to make the most of their scene plus a blog to get you coming back for more. And not to forget the vitals, reserving a table, getting directions at the touch of a button to get those customers through the doors.

2. Omegacarrental.com – Rent a Car Website

A car rental site that does everything required but does it well, starting with three alternative languages is an absolute must for this type of business. The choice of images features cool photographic shots of the cars available and the search bar across the center asks the key questions you need to answer to get a quote. There really is nothing superfluous here. It’s focused and to the point.

3. Stphilipshomes.co.uk – Real Estate Website

The Phillips Homes estate agency uses a variety of techniques to attract us to their site and therefore their business. The site is clear and clean with a handpicked selection of examples of properties on a crisp white background. You are not mauled by a great mass of houses and flats, there is space to breathe with further information to be found in your time. The photos are also a nice mix of professionaL property shots and friendly staff group pictures with the occasional family grouping. Professional, friendly, and aspirational.

4. Uvelanghe.it – Wine Bar and Hotel Website

Uve Wine Bar & Hotel La Morra starts our selection. Opening with a brief animation, then a panoramic photo. If you’ve got something this beautiful to show off, you may as well get it upfront. There is a video accessible from the homepage, combining drone and video footage with a classy soundtrack. The information, from rooms to services is well-spaced, clear, and illustrated with soft photo shots. The whole site encapsulates a feeling of classy elegance. A great example of how your site can set the feel and atmosphere of your business. Of course, there is key information too regarding prices and availability. Everything you need is there but it’s a pleasure to find. And all in a choice of languages.

5. Le-mugs.com – Restaurant Website

Another restaurant that sets out its vibe on the opening page and keeps it going throughout with a consistent theme of great photography on bold backgrounds. To add extra interest, the photo images float around as you scroll down, and backgrounds slide in and out of the shot. It’s cool and funky and very fashionable. Food shots included on a timeline of food from breakfast to evening meal are other clever twists.

6. Roastworks.co.uk – Coffee Shop Website

Another site grabbing your attention with an above shot this time of an inviting cup of coffee. What we like about this site is the absolute clarity of purpose, of selling coffee. Black, grey, and white with a tiny shot of coffee brown keep the site minimal and extremely easy to find exactly the coffee you want. A great example of a functional website doing its job and doing it with style.

7. Thegoodburger.com – Burger Restaurant Website

A Spanish burger site with photos of its product does not sound particularly inventive but the Good Burger shows a great use of icons, including the burger itself to organize the site and allow you to navigate around it. From the burger, everything else emerges. Therefore the burger is always front and center and rightly so.

8. Soapwater.com – Cleaning Company Website

Soap + Water is an outside cleaning company with the landing including lots of glossy action shots just to let you know what kinds of things they cover. The specific information pages are bullet-pointed with cool little water drops as bullets. (the little details matter) and some excellent before and after shots of the service they provide. A testimonials page too, so you can read the reviews and feel confident about the workmanship.

9. Burgerij.be – Burger Restaurant Website

This time a Belgian burger site or restaurant, takes a different approach, including a 360-degree view from inside the restaurant. Side navigation bars pop out to allow you to quickly nip to your required destination. Each separate page has a clear consistent theme based on actual real-life situational photos. These photos in particular give a natural rather than staged image.

10. SW.co.uk – Consultant Agency Website

Chartered Surveyors, Property Consultants and Asset Advisors, I want to see trust, honesty, and professionalism. This site gives all that with a simple branded blue and white theme and solid typography. It then adds some photos of the office day to day approach with a much more friendly open focus. Add to this a video, blog, and further detailed information section and you really have what you need all in one place.

11. Mio3.de – Cafe Bar Website

Mio3 cafe bar and restaurant is another site that ticks all our boxes. Friendly active photos of real-life customers and staff, reservation pages, full menu, map plus directions. The tone is professional and stylish.

12. Weareforeal.com – Design Agency Website

Forreal design agency has gone to town with their site, as you you imagine lots of great illustrated graphics, and photos of products. Clicking on each will bring you more information, alongside a larger image. There is also an interesting social wall element taking you directly to the Instagram page, showing the design next to comments from followers.

13. Taleo-consulting.com – Management Agency Website

Taleo management consultants have constructed the site images around a graphic target of red concentric circles, a video background showing clips from major world cities, and angular flashes of bold colors for the text boxes. The theme on a landing page is continued on the other information pages. This is a bold design that tells the visitor exactly what the company does and stands for.

14. Rootandflowervail.com – Cocktail Bar Website

Root & Flower is a wine and cocktail bar offering drinks and tasting sessions. The site background is an exceptionally stylish beige and grey look of hand-printed wallpaper. The typography throughout is clear and spaced in boxes with explanatory headlines. The only deviation from the color scheme is the photos of food, drink, space, and staff. You are left with the feeling the owners know exactly what they want and how to express themselves without being showy. Distinctively low-key but very cool.

15. Msplaced.com– Professional Organizers Website

Professional organizers Ms.placed from Austin, Texas go for a white clean background full of personal and professional glossy photos. As you would expect the site is well constructed and organized, feeling fresh and room with images that show you what the team offers. The further information pages use bullets points to arrange the information with clarity the fundamental response. There is also a “Meet the Team” section with mini penpics of each staff member, this adds a personal touch.

16. Myclean.com – Cleaning Agency Website

The MyClean site is fresh, bright, and clean with white, blues, and greens. Not an unexpected choice of colors but appropriate nonetheless. The landing page offers a straightforward step-by-step timeline with cool icons showing you just how simple the service is. The whole site a reassuring and trustworthy, exactly what you want if people are coming into your home. There’s all the information you need plus a comprehensive FAQ, a good idea when your business is relatively niche.

17. Poetic.io – Marketing Agency Website

This site is dominated by broad horizontal bars, symbolically giving a very solid and stable effect. This is carried through to the other pages beyond the landing page. We like the mini personal philosophy profiles of the team, with action shots and all linked to other media sites in this case Linkedin. The service section is also a nice example of easy to access information with each service given a title and a drop-down arrow opening more detailed information, meaning you are not overloaded with lots of useless info you don’t need but can focus on exactly what you want.

18. Ridgewells.com – Catering Website

A catering site, lots of food pics but event shots too. Sidebar navigation allows access to specified event types and offered menus. Each contains limited well-edited text explanations but is dominated by nicely chosen photos showing how successful your event can be.

19. Kasparsseattlecatering.com – Catering Website

Another catering site but with a different approach. Here each event is broken up into themes, with tabs giving you access to the menu for each. We like the way these tabs deliver you to a menu as if you were sitting choosing in a quality restaurant, even the cooking classes on offer are presented in the same menu style. A well-thought-through site.

20. Jcpportraits.com – Photography Website

This photographic portrait site offers so many examples it could be easy to get lost. However, clever organization and construction are obvious. A main top navigation bar gives you overall categorization and a second sidebar gives options within the category. This means that a vast amount of examples and options don’t overwhelm you.

21. Studiobfilms.com – Video Production Company Website

StudioBfilms uses its own specialist area to make its site special. The landing page contains filmed demo reels and video testimonials. The portfolio section is particularly inventive, grid line organized stills to grab the attention, hover over them to find their title or use.

22. Artexproductions.com – Video Production Services Website

Artex productions similarly open with a video, well cut and interesting, gracing the landing page. Artex uses a case study section to highlight exactly what they offer, with some very interesting accompanying text so you get a real feel for the productions. The about section also works well, clicking on individual photos of the various staff member brings a mini-history accompanied by a childhood photo, an interesting and different way to personalize.

Final Words

You know you need a site, you want it to do all the jobs and more. These a just a selection of great sites that have moved out of the traditional zone and into a more creative space, whilst (and this is probably the most important thing) still keeping the point of the business clear. Despite the fabulous designs we’ve featured, it takes only moments of viewing for you to know exactly what the business is, what they do, what they offer, and where to find them. Inspiring designs working with the key business functions. We hope you have had as much fun looking through them as we did select them. There are others out there, have a browse, take pointers and start to think outside the box for your new site.

You may also be interested in some of these related articles:

The post Inspirational Small Business Website Examples That Do It Right appeared first on GraphicMama Blog.

The Ultimate Source for Free (and Paid) Design Bundles and Resources

Al Boicheva — Mon, 23 Aug 2021 13:03:52 +0000

Instead of an article or a tutorial, today we decided to make something different and create a rich library of design bundles and resources for designers. The collection features almost entirely free resources. However, there are some premium ones too since we believe they are worth checking out. We will also feature links to some of our previous articles that offer additional resources for every section. Let’s consider this our ultimate constantly-growing list made with love from design lovers to other design lovers.

Without further ado, let’s jump right into it. As usual, here’s the overview for easy navigation through the entire list that will help you fast-travel into the exact section you need.

Article overview
1. Illustrations
2. Infographics
3. Mockups
4. Fonts
5. Icons
6. Color Tools
7. Stock Images
8. Stock Videos
9. Presentation Templates
10. Logos and Logo Resources

1. Illustrations

We’ll open the list of design bundles with a collection of illustration resources. Easily customizable, the characters and graphics can be easily adjusted to your projects and give them even more personality and playfulness. The graphics are mostly made in flat style, following the latest trends and they suit presentations, websites, and infographics.