Contact page design examples

7 contact page design tips your visitors will love you for

Visitors who come to your website have many different reasons to stop by your contact page whether you’re a social… The post 7 contact page design tips your visitors will love you for appeared first on 99designs.

Dark Igloo makes emailing fun with a Contact Us page that doubles as a 3D video game

10 years ago, the Brooklyn-based studio switched its Contact Us page for an 8-bit mini game. Now, it's launched an addictive 3D update where users can collect coins to increase email character count.

Leno

‘Leno’ is a free One Page HTML app template built by Inovatik. Features include a sticky header navigation that smooth scrolls to sections, clear intro CTA buttons with alongside devices, testimonial slider, impressive feature carousal, video modal, slick lightbox functionality, stats and a contact form. This is one of the better free Landing Page templates […]

7 All-Too-Common Landing Page Errors You Must Avoid

A properly designed and functioning website landing page is a thing of beauty. It greets customers warmly, informs leads, and even collects customer contact information. It presents news and information relevant to its industry, and shares internal and external communications.

Designing Effective Contact Pages: Best Practices for Phone Number Display on WordPress Sites

A well-designed contact page is an essential part for any business website. It serves as a gateway for potential customers to reach out and connect.  One crucial element of a contact page is the phone number display.  A clear and easily accessible phone number can significantly impact user experience and conversion rates.  Now, suppose you’re... The post Designing Effective Contact Pages: Best Practices for Phone Number Display on WordPress Sites appeared first on noupe.

Browny

‘Browny’ is a free CV-style One Page HTML template built on the Bootstrap Framework. The long-scrolling resume template features a fixed header navigation that smooth scrolls to sections, and intro biography, skills graph, work history timeline, a simple portfolio section that needs to link out, client logos and ends with a contact form. Thanks for […]

Expert

‘Export’ is a free HTML template by Free-Template.co. The template can be used as a portfolio and even product/service Landing Page. Features include sticky header navigation (that smooth scrolls to sections), good whitespace, statistics, project slider with Lightbox gallery functionality, neat testimonial slider, services slider, pricing table, video modal, contact form and newsletter sign up […]

Template Review: Start Lite

‘Start Lite’ is the free version of the Start Landing Page HTML template by UIdeck. Features include a fixed header navigation (that smooth scrolls to sections), services overview, pricing table, contact form and a big footer with a newsletter sign up box. Full Review

Furnish Lite

‘Furnish Lite’ is the free version of the Furnish Landing Page HTML template by UIdeck. Features include a fixed header navigation (that smooth scrolls to sections), intro slider with lovely transitions, product carousal (that could link out to a Commerce solution like Shopify), brand story, big image slider, team, video modal, testimonials and a contact […]

Responsive CSS 3D Contact Form

See the Code - See it Full Page - See Details A responsive 3d contact form. This Pen uses: HTML, CSS, JavaScript, and

Paradigm Shift

‘Paradigm Shift’ is a centrally-divided but also long-scrolling One Page HTML template by HTML5 Up. The freebie offers everything you’ll need to for a personal or portfolio website including big image intro, biography/about, multiple image galleries (with big image pop-up browsing) and ends with contact details with alongside enquiry form. If you want the attribution-free […]

New Prints 2017

My new print - 4 colour silkscreen printed on paper 270gsm, 30 x 42 cm, limited edition. This prints is hand screenedby studio @thearchivistproject now available for order Even number contact my email rukkit_k@hotmail.com , or my page Facebook.com/rukkitworks Odd number contact The Archivist Singapore contact Habitual

Zample

‘Zample’ is a One Page WordPress theme perfect for musicians. The long-scrolling layout features a big text load animation, a music player, album list, gig guide, pop-up image slider, video modals, WooCommerce store integration, contact form, Instagram feed and ends with a newsletter sign up block. Great to know Zample also includes 7 additional long-scrolling […]

Interior Lite

‘Interior Lite’ is the free version of the Interior Landing Page HTML template by UIdeck. Features include a fixed header navigation (that smooth scrolls to sections), services overview, neat image slider, team, testimonial slider, contact form and a big footer with Google Maps integration. Full Review

HTML forms: Learn how to create them like a pro

One of the main drivers of business success is good customer relations. Companies must listen to their customers and take appropriate action. Many online businesses collect feedback from their customers through online forms. You can see these forms on the contact page of almost every website. They ask for the following basic information: Name Email...

Contact Cards

See the Code - See it Full Page - See Details Pen #1 ~ Hello Codepen 👋 Contact cards | banner, avatar, email/telephone/website, social links, hover animations This Pen uses: HTML, CSS, JavaScript, and

Website Inspiration: Folk

Long-scrolling Landing Page for contact management app Folk. The previews are comprehensive with interactive big image screenshots sorted by use-case. Full Review

Website Inspiration: Asher Web Design Studio

Dark-schemed One Page portfolio for Dallas-based web designer Asher Zahid. Note how he has a quote about slow speed and clicking the CTA button below it pre-populates the contact form with I need help with website optimisation. Full Review

10 Examples of Innovative Contact Form Design

More so than any other element on a site, contact forms help incite and establish interaction between a user and a business. They are a medium that helps generate more leads, which is why they should not be treated as an afterthought.If a contact form is too long and time-consuming, users may outright ignore it. If it looks bland, they may not even notice it at all. Brands should carefully craft their contact forms in a way that inspires users to get in touch. To do that, they need to be mindful of their users’ interests, ask them the right questions through a form, and wrap it all up in appealing packaging. The end result should be an authentic and a well-thought-out, imaginative contact form that clients will enjoy filling out.There are a lot of brands that have found terrific ways of creating irresistible, fun, and beautiful contact forms. We will introduce you to some of the most innovative examples from the web that demonstrate what you can do to create engaging and effective contact forms. The websites we will discuss include:Zorka Agency730DCNoodz — Nothing to hideThe Covid Art MuseumCevitxefantidoteMysta ElectricWE3The Badass ProjectAlfa CharlieZorka AgencyZorka Agency is an international digital marketing agency focused on developing ROI-forecasted strategies. They’ve worked with Activision Blizzard, Hennessy, Domino’s Pizza, AliExpress, and many other notable companies. Their homepage is all about juxtapositions between the black background and white and yellow typography. Save for several geometric shapes and a smiley face, you won’t see too many visuals on the agency’s site. Instead, they manage to keep the visitor’s attention by skillfully combining uppercase sans serif typography with subtle, yet engaging hover effects that sometimes change the color as well as the position of the displayed text. The biggest surprise on the site is nestled at the bottom of the homepage. As you reach the end of the layout, the color of the typography and the background invert, with gigantic black fonts inviting you to “Say Hello” and type your full name in a designated field. The encircled “Next Step” button informs you that this is just the beginning of an imaginative contact form. Instead of listing form labels and fields in one or two columns (which is a common practice on most sites), Zorka Agency structured their contact form as a 5-step feature asking clients for required information one question at a time. Users can see five short lines on the side, suggesting the number of questions the form contains. A contact form that doesn’t immediately reveal its content seems less scary to viewers. If they were to see a lot of questions at once, they’d be more likely to skip the form. By requesting information from users one step at a time, brands ensure their audience doesn’t feel stressed out by the sheer length of the form. And that, in return, positively affects conversion rates.730DC730DC is a daily newsletter that contains all the latest news from Washington DC. It is delivered to subscribers every day at 7.30 AM, hence its name. The design of this site is extremely minimal. Its content is in grid and the screen is divided into several sections. The main navigation is at the top, with each menu link placed in a separate field. The rest of the screen is divided in half. On all of the site’s pages, the left side is intact, while the right is further divided into smaller sections with straight horizontal lines. The color palette predominantly consists of white and red hues, save for the shop page that contains colorful items. The contact form is featured on the homepage and it has only two questions. The moment you click on any field, the color of its lines goes from red to blue. And when you start typing your name or email address, the questions disappear from the view, leaving you an empty field to fill in with your details. On hover, the background color of the call-to-action button and that of the button text transpose, so that the button becomes red and the text white. Aside from signing up for the newsletter, you can also submit a story to 730DC. The design of that form matches the subscription form, except that it requires more information from the users’ end. Both forms are incredibly simple and geometric, yet it is precisely their minimalism, rawness, and slightly brutalist vibe that makes them interesting.Noodz — Nothing to hideNoodz — Nothing to hide is a brand that makes vegan oral-care products. The design of their website relies on eye-catching combinations of contrasting colors, such as yellow and dark purple, pink and dark purple, lime green and dark green, to name a few. The vivacious color palette is applied to the overlay contact form as well. The screaming lime green color is the most prominent hue of them all. It is applied to the checkbox field as well as the call-to-action and close buttons, setting them apart from the rest of the form’s content. Its vibrancy disrupts the more peaceful pink and purple hue used on the form, creating a simple yet exciting and alluring visual unit. The contact form fields are all placed inside of a rectangle that is visible at all times, so users immediately know what kind of information they are expected to provide. Beautiful font choices and the playful character of the typography further enliven the form, while a cute smiley face helps add more of a fun character to it.The Covid Art MuseumThe Covid Art Museum is the world’s first online museum for artworks created during the Covid19 pandemic. The design of the site is rather simple, with selected artworks dispersed throughout the homepage. All pieces are marked with a number. Some fields seem empty, but if you click on them, the “Keep Social Distance” text will appear. You can explore the website in dark and light modes. Depending on your choice, the color of typography changes. However, the artwork submission menu link stays red at all times, ensuring this section is noticeable regardless of the selected mode. On click, the form appears in the viewport. If you don’t like its default location (on the right-hand side of the screen), you can move it wherever you like. The form’s design is simple and clean, combining white and grey sections with black and red typography. The call-to-action button is in red, with “Submit” placed on the far left part of the field and the forward-facing arrow on the right. On hover, the two elements come closer together in the middle while the background color of the button and that of the text invert. This subtle change breaks the inertia of the form, making the “Submit” button all the more prominent.CevitxefCevitxef is a restaurant in Bilbao and their website is a stunning synergy of immersive visuals, beautiful parallax effects, and excellent typography combinations. The link to the reservation form is placed in the sticky menu, along with other navigation links. Typography in the menu is mainly black and outlined, but some words are in full color, including parts of the reservation form link (“Reserva Tu Mesa”). The words “Reserva” (reserve) and “Mesa” (table) are in bold black while “Tu” (your) is outlined. This text is placed inside of a rectangle that on hover turns neon pink. When you click on it, a brutalist-looking reservation form appears on the screen. It is entirely in black and white, with lots of grid lines. When you click on a field, a red circle appears on the text line. This attention-grabbing element injects some color into the form and signals that you should enter the required details. The call-to-action button contains scrolling text, which, in combination with the outlined and bold black typography, infuses the form with life and excitement.antidoteFor their contact form, antidote used only lowercase letters. This email and SMS marketing agency opted for a monospace font for both the labels and placeholder text. The font’s typewriter character is a great fit for the form’s slightly retro design, evoking 90s vibes. To start collaborating with this agency, you need to go through a series of questions first. The questions appear one at a time and are positioned at the center of the page where your eyes are most likely to land first. This contact form contains 7 questions that allow “antidote” to learn more about you and your business, helping them choose potential clients. The backdrop, the button background, and the placeholder text are in various shades of blue, and the calmness of these hues accentuates the whiteness of the label and button texts.Mysta ElectricMysta Electric’s contact form is placed at the bottom of his commanding one-page website. Everything is in black and white, with Mysta’s head in the background following every movement of your cursor. The site is filled with huge typography. On hover, some words reveal gorgeous examples of this tattoo artist’s outstanding work, immersing you into his world of “dark melancholy”. The contact page is simple, containing just three fields that allow you to get in touch with Mysta. When you place the mouse on any field, the cursor enlarges. Some text also appears, inviting you to fill in your details. The “Submit” button is transparent, but it becomes eye-catchingly white as soon as you hover over it. The minimalist style of the contact form perfectly blends in with the rest of the content and its simplicity ensures that Mysta’s art remains the star of the site.WE3WE3 is an internship program developed by Jam3, a design and experience agency that’s collaborated with Adidas, Levi’s, eBay, Postmates, and many other huge brands. The application form for the WE3 internship consists of 14 steps. Thanks to the practical bar displayed on the left side of the screen, you can take a look at all of the questions without entering any of your details first. The form is uncluttered, with labels and form fields taking up the majority of the screen. The homogeneity of the white background is interrupted by large, light grey, question numbers. While the form labels are pretty standard, the placeholder text is quirky and humorous. For instance, in the field where you’re supposed to enter your email address, the placeholder text says “We’re not judging you if it’s hotmail.”. Another useful feature each field contains is a character counter as well as a character limit. Even though this form may seem too long, the questions make perfect sense and are there to help find the best applicants for the program.The Badass ProjectThe Badass Project is comprised of two wedding and documentary photographers and filmmakers. The ubiquitous large typography and the interplay of black and yellow hues are among the most prominent features on their website. The design of the contact form is not any different. The backdrop is mostly black while the content is yellow, and the stark contrast between the two colors captures the viewers’ attention from the get-go. The contact form starts with an image of the two members of the team holding binoculars, signaling they are on the lookout for potential clients. Another unusual and rarely seen element on contact forms is the word “Blah”. By writing it repeatedly on the page, the Badass team added a bit of nonsensical playfulness to their form. The typography is mostly in all caps and it goes from outlined and serif to bold and sanserif. These constant style changes make the text more interesting to the viewer’s eye. The call-to-action button includes a graffiti-like font that enhances the form’s alternative vibe. The company’s email address and the phone numbers of the two members are displayed in three lines that on scroll start to move in opposite directions from one another.Alfa CharlieAlfa Charlie is a branding studio based in San Francisco. Their website looks clean, fresh, and modern, providing a beautiful insight into their impressive portfolio. The studio’s contact form stretches across the entire screen. Its design aesthetically matches the rest of the site — it is elegant and simple, with questions written in a big, refined serif typeface. The form starts off with a playful greeting. A simple “Ahoy” sets a relaxed and fun tone. It also breaks the linguistic monotony typical of most contact forms. You can’t immediately grasp the length of the form because the questions are presented to you one by one. However, if you look closely at your cursor, you will notice a circle around it. As soon as you go to the second question, one quarter of the circle becomes dark grey while the rest of it remains in a lighter shade of the same color, suggesting you have three more quarters of the form to go. This seemingly small detail ensures excellent UX because it gives users a hint of how long the form is, which can greatly increase user engagement and conversions. By knowing there aren’t too many questions to go through, users are more likely to stick around and fill in the necessary details. Below the line where you are supposed to type in your replies, you can see two arrows — one lets you go back and the other allows you to proceed with the form as soon as you are done with a question. But when you reach the end of the form, the forward-facing arrow turns into a “Send” button, signaling you’ve successfully completed all the steps.Closing WordsContact forms help bridge the gap between brands and users, which can often make them one of the most important elements on a website. This is especially true if your business hinges on generating leads. In these cases, a contact form can and should be viewed with the same significance as, say, a hero slider.The brands we’ve mentioned in this article understand the significance of contact forms. They’ve created them with just as much attention as any other element on their website, which is why their forms are so well-structured, immersive, and beautifully designed.We hope these innovative examples will be of help when you start creating your next contact form. You can organize yours in several steps if you like, as well as add imagery, illustrations, and other cool visuals to it. Even if you decide to forgo imbuing graphics, you can still inject a fun factor into your form by experimenting with entertaining copy, typography choices, letter sizes and weights, colors, and hover effects. Don’t limit yourself thinking contact, reservation, and submission forms need to be clean and prosaic. Sure, you do need to request certain information from your users, but that doesn’t mean you can’t be creative while doing so. You should incite the audience to contact you, so try your best to create visually stimulating and engaging forms that users won’t be able to resist filling out.Originally published at https://qodeinteractive.com.10 Examples of Innovative Contact Form Design was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Jonny McLaughlin

Such a fun One Pager for front-end developer & illustrator Jonny McLaughlin featuring interactive tiger claws that bash the page content around. Just when you think you’ve experienced it all, you hit the contact link and a massive claw swipes the content away revealing his social links. Bravo! Full Review | Direct Link

How to Create a Mobile App Landing Page That Drives Downloads

A lot of people mistakenly consider the app stores for the only sources of traffic to their mobile apps. That’s not the case.The truth is that you will actually need a central hub of marketing your app — somewhere you can grow your mobile app’s audience by creating an overall sense of excitement around it.That’s the exact reason for which every mobile app needs a well-made and optimized landing page.Alright, so What’s a Landing Page?You can think of it as a very specific, targeted web page which is solely created to promote a product or a service. It’s typically used by marketers in order to capture leads through online forms or any other content which is behind the gate.Hence, a mobile app landing page will be specifically designed to promote your mobile app. It should properly describe the features of your app and its value proposition so that everyone who goes through it will be enticed to click, download, and consequently install.Keep in mind, though, that this is likely to be the first contact between your mobile app’s brand and your potential customer. This is why it needs to be absolutely crystal clear regarding the problems your app is solving.There are plenty of tips for designing an effective landing page in 2019 that you can take advantage of. Below, however, we’re going to go through some basic elements that you need to keep in mind.Main Elements of an Effective Mobile App Landing PageWhile that’s not necessarily true for every mobile app landing page, these are the elements that you can expect in the majority.The Call-to-Action (CTA)The CTA is likely to be one of the most important things that you would have to consider when creating your landing page, or when you have someone create it for you.It’s that propeller which is going to drive action from the user — something that prompts him to react. Usually, call-to-actions are spread throughout the entire landing page.It’s important to be both subtle and, at the same time, tempting enough to cause an action. Regardless of whether you’re using a button, a form, or a simple text link, this CTA is one of the most important elements that your landing page will need.The HeadlineYour headline is another critical element of your landing page design because it’s the first thing your reader will see.You need to guarantee that it properly communicates the value of your application. It’s not necessary for it to be witty or clever — it just needs to drive the point home that your reader needs your app. Or, at the very least, it needs to intrigue him enough to stay on the page.The Body CopyThis is usually the part of your landing page where you are going to list out some strong suits of your app — its benefits. You need to provide as much copy in order to answer your readers’ unasked questions.You should also satisfy their motivation to get to your landing page — why did they do it in the first place?Now, there’s no pre-set rule of how long your copy needs to be. Typically, the shorter it is — the better. After all, you don’t want your reader to be overburdened with text.The Social ProofSocial proof is very powerful and that’s why it is omnipresent in a range of different mobile app landing page designs.You need to figure out a way to show to your reader that your mobile app is trustworthy. Normally, a lot of designers would showcase the glowing user reviews or any testimonials from some big-name customers. You can also display any awards that the application has managed to get or any recognition if there is some.Enticing and Attractive MediaThat’s the only thing that’s going to make your mobile app landing page stand out and be different than the rest.Media — your chosen images and videos, will become the eye candy to your page — it’s as simple as that.The goal of your visuals isn’t to build a beautiful app landing page but to enhance the overall story that your body copy is trying to tell.Hence, it’s particularly important not to disconnect the media elements from the overall vision for the app and what your story’s about.Some Extra Tips and TricksNow that we have the basics all sorted out, allow us to throw in a few extra tips that will make your landing page a lot better.#1 Keep it ShortAs we hinted above, your copy is better off if it is short. Why? Well, because of attention spans. You need to make sure that you only keep body copy which adds value to your page and take out all the filler.You can use bullet points in order to outline the essential information — this is something particularly important.#2 Make it SpecificIf you can attribute your application to a certain community — that would be awesome. In fact, that’s one of the things that you ought to be aiming for.It’s a lot easier to start getting a relatively smaller group of targeted people excited about your mobile app than the general public. You can leverage communities to increase mobile app downloads.It’s a common misconception that your app should be targeting a large audience. While there’s nothing wrong with that, it’s also a lot more challenging to make it successful, and it will take a whole lot more of your resources.#3 ExplainMake sure that the benefits of your app and the problems that it solves are properly communicated. If you can sell your users on the value proposition early enough, you will be able to convert them into a customer fairly quickly.Keep in mind, thought — the simpler your copy is, the better.ConclusionA landing page for your mobile app is something that can undoubtedly enhance its overall online presence. Moreover, it can be used as a hub for all of your marketing efforts, bridging the gap between your mobile app and your potential customers.How to Create a Mobile App Landing Page That Drives Downloads was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Helium

‘Helium’ is a free One Page Portfolio HTML template by UIdeck on the powerful Bootstrap 4 Framework. The long-scrolling template features an intro slider, services grid, portfolio section (with thumbnails that link out, no pop up gallery), statistics, team, pricing table, testimonial slider and ends with a contact form. Full Review | Direct Link

Website Inspiration: Pudding Studio

Cannot get enough of this mega long scrolling One Page portfolio for Pudding Studio. I’ve raved about both members personal sites in the past, so it’s wonderful to see a new studio site for their shared clients. Will be adding the ginormous contact form and earnest big footer to our new UI component section soon. […]

Template Review: Pursuit

‘Pursuit’ is One Page CV-style template by Squarespace. Highlights include emphasis on work experience, skills graphs, interests, education and a pop-up contact form. Nice touch with the subtle load-up animation on the infographic charts, adding to their first impression. Full Review

Franz Wiebe

One Page portfolio for product engineer, Franz Wiebe. Two simple wins in an online portfolio: a clear first image and a contact form built for quoting. Full Review

Reviewed: New Logo, Identity, and Packaging for Dimple by Universal Favorite

“Powers That Be” Established in 2018 and launched earlier this year, Dimple is a new daily disposable contact lens subscription service in Australia. Looking to stand apart from the four manufacturers that control 97% of the contact lens market in Australia, Dimple is a direct-to-consumer brand and focuses on the millennial market. As a bonus, $1 from every monthly order goes to Guide Dogs Australia. The identity and packaging for Dimple has been designed by Sydney, Australia-based Universal Favourite. Logo. Although there isn't much to the logo at a quick glance, there is actually a lot going on here with the subtle angles in various places, particularly the "l" and the "e". They almost look like mistakes and I'm not sure how much they are needed but they certainly add a touch of quirkiness. Other than that, it's a fairly innocuous sans serif with a colorful tittle. The identity we created comes from the fact that, for the most part, everyone's left and right eye prescription is different. We created an illustrative suite of 60 colourful, complementary circles that correspond to each power number (from -12.00 to +6.00) and combine to show the vast number of combinations of individual prescriptions.Universal Favourite project page Unique visual "IDs" for each power number. All the IDs. And the brand system doesn't just look beautiful, but answers a huge flaw in existing contact lens blister packs. By creating these custom patterns (IDs) for each individual power number and displaying them boldly on each blister, it's significantly easier for users to identify the pack that's specific to each eye... especially when they don't have their contacts in.Universal Favourite project page How they work together when depicting left and right eye combinations. The real hero in this identity is the icon system that assigns a graphic representation for each prescription power increase. Although it might be tempting to try to derive meaning from each configuration or be sarcastic by saying "Of course, two half circles in lavender and orange mean +01.75" the system is about providing each consumer two distinct visuals for them to associate with their left and right eyes and I can empathize: Once outside their packaging, I have to write with a black marker "L" or "R" on the "blister" packs of my contacts because I can never remember which one is my fucked up eye that needs the -2.75 power. (It's my left, btw.) Aside from being helpful, the combination of power IDs look great and it's quite amazing that Dimple committed to printing them on the blisters, which I am sure was the path less traveled in the industry. Website. Packaging was a hugely important component to this task. As a direct-to-consumer company, we wanted the unboxing experience to be an utterly unexpected delight. From the blister packs coated in our custom pattern IDs to the boxes, mailers, sleeves and monthly information cards, we designed the entire packaging suite with our millennial market at the forefront of our minds.Universal Favourite project page Outer packaging. Inner packaging. Lots of packaging. The packaging is quite nice, with a strong set of colors for each "layer" of packaging, starting with green on the outside, orange holding the two blue boxes, and culminating in bright white blister packs with the colorful ID accents. It's a really nice set of gradual steps and the design is kept minimal and attractive. The only thing I question, on the packaging and website in general, is the combination of the light serif and medium weight sans serif... I sort of like it, but maybe it needed one more degree of separation, perhaps one bolder weight on the sans. Nonetheless, it's a minor quibble in an otherwise nice identity. The art direction we took for the launch centres on a vibrant community of contact lens wearers and packs a highly visual punch. Shot by Jonathan May, it celebrates the individual quirks of each member of the community and the freedom to have fun that contact lenses provide them.By partnering with the Benito Martin and Jessica Johnson dream team for our product shoot and Lyndon Foss for our lifestyle shoot, we built a comprehensive and flexible suite of brand assets that could be used across web, communications, social and advertising in the year following the launch.Universal Favourite project page Lifestyle and promotional shots. Your browser does not support the video tag. Promo video. While the identity and packaging are simply strong, attractive designs that don't overly pander to the millennial crowd, the lifestyle photography and promo video go a little more heavy to the deep end of that spectrum which, to an older crowd, like me, can be off-putting but, hey, you gotta play to your core audience. My only real question to millennials, after seeing the very final scene of the video, is are you really always dancing to everything? But I digress, overall, this is a strong entry into the market, with an identity and packaging that feel clinical enough to shove the product into your eyeball but fun enough to take a photo with it for your Insta fam.

Noted: New Logo and Identity for Contact by Bob's Your Uncle

“Arch-nemesis” (Est. 1996) "Contact Energy is one of New Zealand's leading energy generators and retailers. We supply electricity, natural gas and LPG to 562,000 customers across the country, with a focus on delivering great value, products and services. Contact owns and operates power stations throughout New Zealand. These include hydro power stations on the Clutha River in Central Otago, geothermal plants around Taupō, and gas-fired power stations in Taranaki, and the Waikato. We're especially proud of our world-class expertise in the development of geothermal energy projects. Contact's an integral part of the national economy and our local communities. We empower the over 1,050 people who work with us to achieve great things, and our sponsorships and partnerships reflect our deep connection and commitment to the communities in which we live, work and operate." Design by Bob’s Your Uncle (Auckland, New Zealand Related links Bob's Your Uncle project pageContact press release2013 Brand New Review Relevant quoteThe design, which we are calling the arc, has been chosen as a symbol of the energy that connects and surrounds us. It represents our desire to be continually growing and striving to the future. We think it suits us to a tee. It shows that we genuinely care for our customers, our communities, our people and shareholders every step of the way. Images (opinion after) Logo. Your browser does not support the video tag. Logo animation. Ads. "Fairness" and "Control" spots. Opinion Not to repeat myself too much from the 2013 Review but the old logo was a great piece of lettering… for the wrong company. It simply didn’t look like a major energy company and while I’m all for breaking conventions some conventions are better left unbroken, like an energy company looking like a big corporation and not an art supply store. The new logo, for better or worse, brings back Contact into the realm of looking like a corporation. Unfortunately, I do think think it’s for the worse as the logo has a weird, unbalanced, and trite approach. The mega swoosh that bounces back and forth atop the wordmark is stiff and harsh and huge in relationship to the wordmark which has suffered the usual case of custom-itis in trying to turn a geometric sans serif into something more than it needs to be. The gradient doesn’t do the logo any favors either and simply adds to its visual noise. Both the logo animation and the animated graphics in the video show more potential than the logo itself — I think the bouncy-arc-bridge-thing could have been salvaged with a better execution and the more “human” style of the flourishes in the video could have been a better, um, bridge between corporate coldness and human warmth.

Website Inspiration: Carl Beaverson

Clean as a whistle One Page portfolio for Australian web developer Carl Beaverson. Neat touch with the sticky footer CTA button to contact him. Full Review

Top Web Design Tips for eCommerce Website to Boost Sales

[Image Source]A web design company could deliver great eCommerce web design to help convert web visitors into customers. Ideally, the design of the website should make for an easy, faster, and stress-free purchase process. No matter how great the online ads are, you could lose valuable clientele if your site is not sales-optimized.Additionally, it could also be a waste of valuable money if visitors leave your site the moment they’re on it.Tips on Website Design to Boost Sales[Image Source]1. Keep Users in MindAlways keep users in mind with every decision you make on your web design. From product images to contract forms, every single detail could be a contributing factor to the decision of a user to buy. User experience is paramount to turn web visitors into customer and to turn customers into repeat buyers.If you are not certain that your site has a good user experience, consider an eCommerce website development service provider like eTatvaSoft to help you develop a design that boosts sales.2. Using Simple Web DesignConsistently rated as visually more trustworthy and appealing is minimalist web design. To optimize the eCommerce web design for conversions, consider streamlining it. Any information that’s not necessary should be removed. Moreover, make sure to use a minimalistic design theme that has a lot of white space.There should be no distracting images, videos, or links. The call of action as well should be defined clearly and the simplistic design sends off a minimalistic, professional feel.3. Honesty On PricingWhen designing, always be upfront and honest regarding the prices of products and services. Never attempt to hide information or make it hard for visitors to find it on your website. You don’t want your visitors to feel that they’re tricked or deceived.The price transparency should also be applied to shipping. It’s important to be upfront about the costs of shipping on products and shipping policies as well. Make it a point that your customers could see the total product amount, including shipping before they make a purchase.4. Quality PicturesBoost web design with high-quality images of products and perhaps even a video. For internet shoppers, the biggest pain point is likely the reality that they could not see a product in person, like with a physical shop. To help ease this, you would have to boost your web design with product images that are of high-quality and a video could even be added, depending on the product.High-resolution images are a must. Blurred or pixelated pictures could turn away customers, thinking that they produce your offer is cheap. Photo galleries for each product is a good idea, so users could click through and see various product angles. A pop-up box is a wonderful feature where people could zoom in on a particular image and see the fine details.Using lifestyle photos of people who actually interact or use the product is a great idea. Clothing is much more alluring when worn by a model, instead of worn by a mannequin or laid flat.5. View Cart ButtonIt’s proven that keeping this button visible at all times boosts the rates of conversion. Most eCommerce websites have a tiny shopping cart icon somewhere on each page, which enables users to see items they’ve added to their cart easily. Among the eCommerce web design strategies, this is one of the most vital.Make certain that the icon is something that people could easily recognize, such as a shopping bag or shopping cart. Since this is one of the most critical buttons on the website, consider using bright colors to make it stand out from the background. Furthermore, it should be bigger than the other buttons.6. Testimonials and ReviewsThis helpful statistic could be used to your advantage by promoting conversions and sales. Sixty-one percent of internet shoppers read customer reviews before buying. An effective strategy in web design is the inclusion of a product-centered review directly beneath the description of each product.7. Keep The Products OrganizedOrganize products into specific categories. Make it easy as possible for users to find what they are looking for, make certain to keep the products on the site organized and divided into separate categories.A menu bar helps keep categories easy to find and to simplify the search process. Furthermore, this provides users a glance into the product categories that they are not even aware that you have.8. Navigation MenuMenus enable users to navigate pages of the website easily. For maximum ease, the menu must appear across all pages, at the top of the page preferably. In some instances, menu bars are vertical along the left side to accommodate the F format.However, you have to be careful to load up the menu with a lot of options, because this could look confusing and cluttered. If you have numerous pages and categories on the site, consider using a drop-down menu to organize them more easily without sensory overload.9. Search BarThis bar enables visitors to find the product they have in mind in a seamless manner. Most web visitors probably have a certain product in mind when they enter the site. If they could not find a way to search through the site for it, then most likely they would go to another site.The search bar therefore must be situated near the top of the site, normally in the right hand corner, to easily and quickly find it.10. Show Product ScarcityBuilding scarcity of products could play tricks on the psyche of customers. The best-sellers are those products that are often out of stock. More often, users notice products that are sold out, limited stocks in the homepage or category pages.If visitors fear that they could be missing out on a product, it would result in buying on impulse, which of course boosts brand sales.11. Contact InformationThe contract information, as much as possible should be easy to find and should also include as much information. Should a customer have any query or problem while viewing the site, they would likely look for the ‘contact us’ page or scroll to the bottom of the homepage.You wouldn’t want to lose customers simply because you forgot to put your contact number or email address. There are several options, including your phone or cellphone number, email address, contact form, operation or store hours that let users send an email directly or even a widget to allow them to send an FB message directly to the company.12. Simple, quick CheckoutAlways simplify the entire checkout process. The higher cart abandonment rates are due to a complex checkout process. Simplifying it could include enabling users to check out as a guest. It’s easy for visitors to be suspicious when they’re required to put too much information when making a purchase.You should only ask for information that’s absolutely necessary, including the name, payment information, and shipping address. For an entirely digital product or service, you don’t have to ask for an address at all.13. Mobile OptimizationToday, a site that’s mobile-optimized is paramount. The majority of sites are being opened and accessed from mobile devices. One of the biggest mistakes you could make is failing to make your website mobile-optimized.A responsive layout lets your site adapt to any kind of operating system or screen, thus you need not worry about making a whole separate mobile website version for every device. Nonetheless, make certain that the sizes of the image and form fields would work on all platforms.14. The ”Thank You” PagesThe page serves very important purposes, thus do not forget to redirect a customer who makes a purchase to a thank you page. When someone makes a purchase on your site, redirect them to a thank you page. Thank you pages or order confirmation pages are a necessity to track conversion via social media ads in the right way.15. Consistent BrandingConsistent branding across website pages makes standing out from the competition easy. Make certain that the logo could be seen on each page of the site, as well as keep the fonts and color schemes consistent. Nobody wants to click on a page only to wonder if they’re entirely on a new site. The same exact design scheme and navigation menu should be maintained across all pages, to display consistency and trustworthiness.16. FAQ PageThis page establishes more trust from website visitors. This page lets your visitors be aware that you’re making an effort to be transparent with your goods and services. Moreover, they let users know you’re serious in answering their questions and suggest that you have great customer service skills.Having an accessible list of answers to common questions regarding the brand will establish you as an expert, which creates confidence in prospective customers. More likely, people would purchase from a company that looks knowledgeable and reputable.17. Social Media LinksIt inspires long-term relationships between the customer and the business. The most popular eCommerce shops have buttons linking to their social media on their site. Including social icons in the design invites customers to stay in touch, as well as encourages more long-term relationships between your brand and the customers.Social media links on the site additionally have also been proven to enhance the SEO rankings. Make sure that the links open to your social media accounts in a new tab so people would not leave your site.Top Web Design Tips for eCommerce Website to Boost Sales was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

What makes a great landing page?

Explore the design process behind some great landing page examples with Bristol-based UI and UX designer, Simon McCade.It’s more business-critical than ever to have a landing page that captures the attention of your visitors before they head for the dreaded ‘Back’ button. Thankfully, though, the design process of a great landing page can be much more informed and calculated than ever before — the trick is in figuring out what core elements are required to achieve that all-important cut-through.Nobody likes to hang around. If you don’t give your site visitors what they want or, indeed, explain what you think they should want within a matter of seconds, they’ll be off to find a better alternative. Translation: you lose sales.If it’s an all-too-familiar pain-point for you that people are doing more bouncing than converting, here’s where you discover what your landing page(s) could be missing and, of course, what you can do to put that right.Here are the principles that should be at the core of any landing page, whether it’s for a plucky B2C startup going through a launch or an established B2B giant going through a revamp:A straightforward value propositionPut simply, if a user has to work hard to understand what it is you’re offering them, they’re not going to work hard to give you their time or money. The benefits of the features must be immediately clear and this can be really bolstered by great design.If a user has to work hard to understand what it is you’re offering them, they’re not going to work hard to give you their time or moneyTake Headspace, for example. The popular app’s landing page is not only visually striking, but it also makes it clear as day what it’s all about. It eases the visitor into the experience with tunnel vision — the header and subheader supplemented by two clear calls-to-action get the value proposition across in only 15 words. The impression of calmness and efficiency that this communicates is one of the reasons why it’s been downloaded over a million times.Headspace app — A clear value propositionA clean and simple UIMost design services will shout about the importance of UI from the mountaintops, but not that many get it right at every level. If it is an app or some software you’re selling, the product itself might promise an incredible UI that surpasses all user expectations, but if the landing page ‘shop window’ for it creates a barrier between the user and the product because of a poorly designed UI, the journey will stutter and business will be lost.Duolingo boasts a landing page that gets right to the crux of people’s desires to learn a new language in a way that is easy to navigate and understand. There’s virtually zero clutter — access to the product, all the languages it offers and all the devices and platforms it’s available on are immediately clear, so there’s no need to grapple with the site to find what you want. It makes the whole experience a pleasant and rewarding one and the same sentiment applies to the gamification of the app itself.Duolingo — An uncluttered landing page designA consistent UX with other marketing activitiesConsistency is key — you’ve heard that a million times, but it’s so true in all walks of digital life. Users not only expect a consistent experience within a programme or website, but they demand a consistent experience at every touchpoint, whether that’s via email, on social media or in-store.For a site that built its name on seamlessness and interconnectivity, IFTTT offers up a great example of a landing page that’s aligned with its overall user experience. The style with which it communicates its core benefit of making life smarter is as obvious in its email marketing as it is in its landing page.IFTTT — Consistent design that communicates the nature of the softwareA logical structure with killer copyEverything needs to work together when it comes to the perfect landing page. It’s not just about design, it’s not just about copy, it’s not just about a great offer. It really is about everything coming together into one cohesively structured page that shows the user the full picture.It’s not just about design, it’s not just about copy, it’s not just about a great offer.Apple has always done this extremely well when it comes to utilising copy to put the user first. It’s all about “you” and “your” needs and they position the products in such a way that makes them seem like an absolute necessity to fulfilling those needs.Apple — User-centric design for user-centric productsA straight-to-the-point CTAIf a user’s attention span is on the short side, stirring them into action as soon as possible couldn’t be more important. It’s a fine balance in such a frantically competitive digital world, but competitors are continually entangled in games of one-upmanship when it comes to the likes of design, pricing structures and customer service.The music streaming industry sees one such battle play out between Spotify and Deezer. The former might be slightly older than the former, but they’ve found themselves fighting it out in the same age of on-demand entertainment with essentially the same product for the lowest price and best UX. Consequently, the calls-to-action on both landing pages are financially motivated to get right to the one major gripe that most people have about music streaming: the price.Spotify — Stripped back yet powerful design that draws users in on the price pointAs demonstrated here and in many registration or sign-up buttons, imperative verbs give a real sense of urgency in CTAs: ‘Get Spotify Free’ and ‘Try Deezer Premium’, the latter of which is preceded by a mention of the price stir up a sense of ‘need’ as opposed to ‘want’.Deezer — A simple CTA that couples cost with qualityImperative verbs give a real sense of urgency in CTAsA relatable amount of social proofingWhether we like it or not, many of our decisions are made based on those that have already been made by others. Think of how crucial reviews are to the purchase cycle now; it’s no wonder sites like Trustpilot and Yelp are flying. A report by Mintel found that 70% of American shoppers actively sought out reviews before making purchases — and that was back in 2015.Proof from others that something is actually worth your time and money is not just about opinions in testimonials and reviews either; usership numbers and sales figures can often do the trick.Shopify utilises these kinds of social proofing with impressively large numbers and positively glowing testimonials on its landing page. They might be below-the-fold, but they’re strategically placed low enough to add further encouragement to the type of scrolling user who might still have one or two niggling doubts about committing to the company at hand.Shopify — Power to the people with designIt’s become a modern-age-old trick that works time and time again, so it’s a critical part of any landing page worth its salt.Different audience, different landing pageThere might be a number of similarities between top landing pages these days, as we can see from the above, but the truth is that there is no set structure for the ideal design for “a landing page”. All of these examples depend on the likes of unique searching behaviours, purchasing cycles and device usage and so on, but the core principles here should be the foundation on which you build your direct responses to your audience requirements. Get that right and your landing page will do you right.Are you in the process of designing a new landing page? Get in touch today to discuss how I can help you incorporate all the UI and UX design elements required to make it a successful one.Originally published at www.simonmccade.com.What makes a great landing page? was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Case Study: Redesigning the website for ‘The Intersectional Feminist’

This project elaborates on the design decisions taken while redesigning a website for The Intersectional Feminist from scratch. The project took about a month and a half to design & develop.IntroductionThe Intersectional Feminist is a pioneer online magazine dedicated to creating content relating to intersectionality, which looks into promoting social & political equity amongst all segments of society.Who are the clientsThe magazine is powered by a group of passionate women from all walks of life-lawyers, engineers, young editors, and illustrators from varied regional, cultural, and educational backgrounds.“We strive to celebrate diversity by representing varied geopolitical, ideological, and linguistic identities through our writing.”Scope of workTo redesign & develop the entire website to enhance the look & feel.To capture the essence of their story and spin a narrative around that.To create a more engaging experience for readers, while educating first-time readers about the breadth of topics they specialize in.Note: The design of the website was a collaborative effort. We tried multiple design options that appealed to our design sensibilities before going live.The singular focus of the IF team towards striving for equality struck a chord in me & further fueled the desire to create a meaningful design for the cause.Here’s a preview of the website. Do have a look at the website, since it is now liveHere’s a sneak peek of what the redesigned home page looks like!https://medium.com/media/ae04c8827be474bf4ccd1d34ac5afe14/hrefIdentifying high-level problemsSince there was no preliminary data on what the website readers were feeling, preliminary assumptions were made on what improvements could be made.Brand identity is not cohesive: There is no indication of what the website’s vibe is, nor is their clarity on what the website’s core functions are.No defined color scheme: Too many different colors are used throughout the site. These are inconsistent with the logo & create visual chaos.Multiple typography styles: Multiple types of font result in a lack of visual cohesiveness.Complex navigation: Having six tabs for a growing website where content is still being generated leads to unnecessary complications while exploring different sections of the website.Competitive AnalysisTo begin with, other competitor blogs were studied & the UI was thoroughly analyzed. This was a starting point in defining what vibe the website would exude. Awwwards & Site Inspire were referred to for drawing inspiration in the preliminary stage.Home PageProblems with the old designHero section lacks context: For a first-time user, there is no context about what the website is about. There is also no information about what intersectional feminism is.‘Editor’s choice’ section lacks visual appeal: Having a carousel to view articles may not be the best experience, as it prevents a user from viewing multiple articles at one glance. The background was drawing attention away from the article cards.No scroll journey on the home page: This is the page where ample information about the organization’s goals & stories could have been mentioned, to provide ample context to the user.Confusing navigation: Having 6 tabs for a website that is still growing seemed unnecessary. Toggling between these tabs repeatedly was complicated. The tab does not signify the active page. This can lead to confusion in the user’s mind about which page they’re currently viewing.Two headers create visual chaos: Especially since they are visually distinct with a number of elements ( i.e. tabs, social media icons, contact details) The contact details, social media handles are de-emphasized too much.Footer is not aligned with the home page colorsBefore vs After-The Design Process1. Improving navigationFor a team that was still growing & scaling the amount of content on the platform, providing lesser tabs seemed like the primary change to the design. Improving the brand identity of the team was also essential.2. Enhancing brand identity-Landing pageHaving a single quote that defined The Intersectional Feminist was not sufficient in providing adequate context to readers.On every screen, a user must have clarity in the functions that ought to be performed. Providing relevant context to readers is of the utmost importance.3. Editor’s Choice & Latest ArticlesThe intent was to showcase a diverse series of articles, so as to appeal to a larger audience. It was also essential to highlight the relevant data points keeping in mind the visual hierarchy.Displaying only 1 article with a carousel does not do justice to the quantum of work done by the IFMAG team & results in an average browsing experience, from the reader’s perspective.The Editor’s Choice & Latest Articles sections are also separated from one another to minimize the visual load for the reader.4. Redesigning the footerThe dark backdrop in the old design was not cohesive with the brand identity. Also, there were too many visual elements that needed to be simplified.Exploring Articles1. Article categories:Currently, a user must use the drop-down menu to toggle between different categories. This hinders the reading & discoverability of new content for a user. This transition between different articles can be a lot more friction-less.Discovery of article categories must be seamless. A reader must be able to toggle between different categories with ease.Collapsible header categories seemed to be the simplest, most easy to use & implement, so those were adopted.2. Redesigning the article card:The visual hierarchy of data points in an article card needed to be refined, so that data was easier to digest. It was also essential to include the average reading time per article.About PageProblems with the old designVisually chaotic cards: This makes the team lack cohesion as a single unit.‘Read more CTA’ is distracting: Having a concise copy would negate the need for a CTA & improves the scannability of data.One of my favorite parts of the entire redesign for this website was the ‘about page card hover state.’ Check out the redesigned about page below.https://medium.com/media/859ae07f79cfb437208eb2139312f402/hrefRebrandingDefining the typography & color schemeThe design brief was to incorporate pink as the primary color, since it was in the logo. But to pair it with other accents that would bring out the beauty of the brand. A new typeface seemed like a mandatory change as well. The intent was to have a reader instantly know what the website was about. Using a serif font seemed like the perfect choice!User Testing8–10 users were interviewed over a video call/phone call & the website was showcased to them. They shared feedback on what their views on each screen were & how they felt on each screen.This was an important stage in the process as it made us relook at the design from the user’s perspective & further refine the website.Check out the Figjam file to take a closer look at what our users had to say!That's a wrap!Big, big thank you to Abhishek Nair, my buddy who helped with the design process & handled the website development. Also, for incorporating all the little tweaks that I requested him to make while coding & for giving me a glimpse into the world of development.This was a blast to work on! Not only did I get to hone my skills as a designer, but I also got to take a peek into the world of development & how design translates into code. Shout out to Amrita Nair for entrusting us with this project!A while back, I had also published other case studies on topics as well. Do have a look at them too :)Case Study: Introducing Adopteroo, A new app to connect pets, adopters & existing pet parentsCase study: Introducing Spotify snippets, a new feature to enhance podcast based learningCase study: How to enhance the user experience of a pizzeria appThanks for your time! Hope you found this interesting to read :DCase Study: Redesigning the website for ‘The Intersectional Feminist’ was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

10 Best Free Landing Page Themes for WordPress in 2025

Landing pages are a great tool for marketers. They introduce your product or service, promote key selling points, and aim to increase conversions. All of that sounds wonderful, but building a great page is easier said than done. The right WordPress theme can streamline the process. A theme optimized for landing pages includes clean layouts, compelling typography, and top-notch performance. The result is a faster build with all the basics you’ll need. The advent of the WordPress Block and Site editors adds even more convenience. They reduce the need for custom code and give you more control over design and layout. We’ve rounded up a collection of ten of the best landing page themes on the market. You’ll find options to fit every need and technical preference. Let’s get started! Vexis Full Site Editing WordPress Theme Free to Download | Demo | WordPress Hosting Vexis is a block theme with a clean and modern look. The 20+ included block patterns cover a variety of common design components. You’ll also find a whopping 19 style variations that pair attractive fonts and colors. Note that Vexis is a child theme of Plover and requires that theme to run. Superb Landing Page Theme Free to Download | Demo | WordPress Hosting Here’s a classic theme focused on building landing pages. For example, there’s an option to hide the navigation – perfect for one-page sites. There’s also a handsome blog layout to help you keep visitors in the know. It features a responsive layout and is ready for translation into various languages. Poe Full Site Editing Theme Free to Download | Demo | WordPress Hosting Poe comes loaded with block patterns to make customizing your landing page a breeze. There are multiple post grids, calls to action, headers, and footers to choose from.  The theme also includes style variations with light and dark options. There’s enough here to get your project off the ground in short order. Variations WordPress Block Theme Free to Download | Demo | WordPress Hosting Variations is a multipurpose theme with great potential for landing page design. It includes dozens of block patterns to match just about every need. That level of convenience means you’ll spend less time building and more time optimizing. The theme is also free, which is better for your bottom line. BB Mobile Application Landing Page Theme Free to Download | Demo | WordPress Hosting Naming aside, BB Mobile Application is a great theme for showcasing a wide range of products and services. Inside, you’ll find a slider, social sharing features, and helpful page templates. It’s also fully responsive, making it easy to serve mobile users. Landing Pagency WordPress Theme Free to Download | Demo | WordPress Hosting Here’s a lightweight landing page theme to help you build quickly and beautifully. It features a responsive layout, custom widgets, and an ultra-clean look. The theme is Gutenberg-friendly and is compatible with all the popular page builder plugins. Gutentools Full-Site Editing Theme Free to Download | Demo | WordPress Hosting Gutentools has everything you need to build a stunning landing page. The included block patterns and style variations offer convenience and a business-like aesthetic. You can use them to create an informative and easy-to-read page that encourages conversions. Solarium Landing Page Block Theme Free to Download | Demo | WordPress Hosting Are you looking for a landing page with a dark and sleek style? Solarium is a theme that comes with a block pattern containing an entire page’s worth of blocks. Tweak the styles, add content, and you’re good to go. Templazee Block-Based WordPress Theme Free to Download | Demo | WordPress Hosting Templazee is a block theme that encourages customization. Use the included block patterns to build the foundation of your landing page. From there, make it your own with custom styles and images. The theme comes with all the basics and lets you add the finishing touches. wpOpus Studio WordPress Theme Free to Download | Demo | WordPress Hosting Big and bold, wpOpus Studio brings an array of options for building the ideal landing page. The theme comes with light and dark style variations to match your desired atmosphere. You’ll also find block patterns to give your content a stylish home. Create a Better Landing Page With WordPress Building an effective landing page requires creativity and the right tools. A quality WordPress theme will help bring your ideas to life. It makes creating custom layouts and styles easier, leaving you to focus on content. The themes in this collection provide you with helpful features. However, they differ in how close they get you to the finish line. Some themes offer a near-finished product, while others work best as a starting point. Choose the one that allows you to work your way. There’s a landing page theme for you, no matter your goals or skill level. So, let your creativity shine and watch your conversion rates rise! Landing Page WordPress Theme FAQs What Are WordPress Landing Page Themes? They are specialized themes designed to create effective landing pages on your WordPress site. They focus on converting visitors into customers or subscribers. Who Should Use Landing Page WordPress Themes? These themes are ideal for marketers, businesses, bloggers, or anyone looking to create a focused, goal-oriented page, like promoting a product, event, or service. How Do Landing Page Themes Enhance Online Marketing Efforts? They offer clear, persuasive designs and call-to-action (CTA) elements that are essential for successful online marketing and conversion rate optimization. Are Landing Page Themes SEO-Friendly and Mobile-Responsive? Many landing page themes are built with SEO best practices and are responsive, ensuring they perform well in search engines and look great on all devices. Do These Themes Support Integration with Email Marketing Tools? Most landing page themes are compatible with popular email marketing services and tools, allowing for easy integration of sign-up forms and contact capture features. More Free WordPress Themes Free Block WordPress Themes Free Blogging WordPress Themes Free Business WordPress Themes Free Fashion WordPress Themes Free Food WordPress Themes Free Magazine WordPress Themes Free Material Design WordPress Themes Free Minimal WordPress Themes Free One-Page WordPress Themes Free Photography WordPress Themes Free Portfolio WordPress Themes Free WooCommerce Themes Free Writing WordPress Themes Free Starter Themes for WordPress Free WordPress Theme Frameworks The post 10 Best Free Landing Page Themes for WordPress in 2025 appeared first on Speckyboy Design Magazine.

Website Inspiration: Sebastian Graz

Unique, stacked project browsing experience in this One Page portfolio for the one-man brand studio of Sebastian Graz. A few lovely touches to note; blurring the background within the project titles as you scroll, the categorised project slider (eg. brand tone, colors) and stating his availability in the contact drop down nav. One of the […]

Sam (Game-Ready Character) by Yulia Sokolova

Hi all! ♥ It's time to share another character that I've made for the upcoming game by NineZyme: Laura Bow and the Mechanical Codex. As previously, I’ve been working both on the concept and 3D model of this serious-looking gentleman (as well as the detective lady, you've might already seen her in my previous post here, on Artstation)! https://www.artstation.com/artwork/Ya6ZDY If you want to know more about the game itself, NineZyme have launched their official website with all the info and even more art! Follow this link: http://ninezyme.com Also make sure to subscribe for their newsletter in the bottom of the page if you wanna get updates every month including new wallpapers and blog posts about how the game is developing (WIPs of environment, character animations, concepts and more interesting stuff). For any questions and more information, don’t hesitate to contact NineZyme directly: info@ninezyme.com

Broken Terracotta Tiles by Maxime Guyard-Morin

I wanted to have a more classic material in my portfolio, so back to tiles I went. I had a lot of fun mimicking zbrush style sculpting again. I got inspired by this video from Arte: https://www.youtube.com/watch?v=sQMg_EwiUzU that made me wonder why everywhere is getting boring squared tiles. 100% procedural, 100% Substance designer. Rendered in Marmoset Toolbag ------ Artworks on this page are protected by copyright and may not be used for any commercial or non-commercial purpose without the express written permission of the copyright holder. Any unauthorized use of the artwork, including but not limited to AI training, is strictly prohibited and may result in legal action. By accessing this page, you agree to abide by these terms and conditions and to respect the copyright of the artwork displayed on this page. The copyright holder reserves the right to modify these terms and conditions at any time without notice. By using this artwork/picture for any commercial or non-commercial purpose, including but not limited to AI training, without specific prior agreement with the copyright holder, you agree to contact and pay the copyright holder 5 thousand billion dollars.

Web Header Exploration

Page Builder Website Header Exploration Customized Illustration from Undraw.com ----------------------------------------------------------------------- Hiwow is open to new projects! Contact us: hiwowstudio.com@gmail.com

10+ Best UX Practices For Your Ecommerce Store

There was a time when your business’s identity was recognized by your visiting card. Now your website does that work.We will focus on your Ecommerce website in his article. As an online store owner, your website is the center of your growth. Higher engagement and conversions, as well as lesser bounce rate and cart abandonment rate, should be the primary goal.But how does one achieve this? We are sharing with you some best practices that we employ while designing our client stores.Design an Enticing Home PageWe are all guilty of judging a store, book, person, by their cover. Your website will not be an exception! What can you do to make a great first impression of your virtual store?You can start by highlighting your USP right at the door of your store (yes, the virtual store). All you have is a few seconds to get your user to engage with your website. Aim for:Clean, simple, minimalistic designMaximum two CTAs to avoid confusionMentioning your vital product categoriesA simplistic hero page ensures that your visitor focuses on the message that you wish to convey. Too much information and visuals can distract your users.Ask for sign-up as late as possibleImagine being asked for your details right when you are entering an offline store! You will have second thoughts about stepping inside the store altogether. So why do this with your virtual store?Let your visitors browse around! The more time they spend on your website, the better the chances of conversion. Also, one can say we can always ask for a sign-in at the checkout. Just ensure that it is a quick and smooth process. You can streamline this process via social login options and make a provision for guest sign-in too.Streamline Your Checkout processAccording to Statista, the average shopping cart abandonment rate is 88.05%. A multi-step checkout process contributes to this number.To avoid this, you can have the buy option on the product page directly, just like Amazon. Another option is to avoid getting users to fill in multiple form fields via autofill implementation. You can have a progress bar, remove all distractions, and allow login via existing email and social accounts.Visible and distinctive search barA working on-site search bar is like a helpful sales assistant. Your users should not abandon your website because they didn’t spot the exact product they were looking for. Also targeted searches have more conversion chances thanks to the defined need of the visitor.You can also implement an autocomplete and predictive search to save your customer’s time.High-quality imagesThe only way to understand the product is via its image and description (more on this later). Therefore, all your product images must be in high resolution.Upload images from different angles and do mention the dimensions in the image. Take care of the color especially as sometimes it can be different from the actual product due to lighting, camera quality, or even when optimizing the images. And have a thumbnail for all your products.Also, if possible, keep a short video too. Good image quality will reflect well on your brand.Accurate product descriptionsContinuing the above point, an accurate description is a must for all your products. The smallest of details, if not mentioned or inaccurate can backfire on your organization’s image. Mention the available size, size chart, accurate color, its availability.Avoid long paragraphs, break down the description in bullet points, and arrange them as per the importance. You should also use visual hierarchy to establish a pattern.Cross-sell your products‘You might be interested in’, ‘Customers also bought this’, etc can increase your sales. And this is very much present in offline stores.“Sir/Ma’am by adding a large Pepsi this becomes a happy meal, should I?” Sounds familiar right…so why not implement cross-selling for your ecommerce store too?Place these suggestions towards the end of the product description as visitors will read the description. But ensure that your user experience is not hindered, aim for subtle clues.Intuitive product categorizationCategories help visitors for a more targeted search. Better categorization is always appreciated by users as it saves their time and energy. And it goes without saying that, think from your user’s perspective when categorizing your products. You can always put a product under multiple categories say, a “dinner set” can be under kitchenware and gifting categories.Additionally, do mold your categories as per needs. To elaborate, Thanksgiving and Christmas are coming up, create a ‘Gifting’ or ‘Sock Fillings’ category and look for products that can go under these options too. Such thoughtfulness will assist all your last-minute shoppers.Product reviews are a mustReading up on previous customer experiences will give a push to your potential customers for buying. It’s word of mouth but the virtual version.Don’t make the mistake of publishing just the positive reviews. Adding negative reviews will help customers make an informed choice! You can respond to them in a way that shows you are open to criticism and work on it too. You can send emails to customers for writing reviews of the products purchased.Also, you can come up with a reward system for writing reviews, attaching pictures, etc. Include social media reviews as well, as they showcase more authenticity.Transparency = TrustBe transparent about your shipping cost across geographies, return policies, your sourcing place, tracking packages, payment channels, etc. You can add social proof, your active social media accounts, even your blog, etc.State the pickup formalities required receipts and return period in clear words for your return policies. Have a chart for varying shipping costs that customers can easily access and understand.All this will make your customers trust you more and increase their willingness to purchase from you.Include horizontal filtersYes, in addition to the vertical filters, you should implement horizontal filters. Say, you have an online clothing store. Include all the filters in vertical format, additionally, keep the most common ones on the product page itself in a horizontal format, like gender, price ranges, customer ratings, etc.You will need to choose the most common filters opted by your customers and make them more accessible for your customers.Create relevant contentGooglebots index your blog page, FAQ page, case studies, etc.If you can anticipate possible questions that your customers might have and give clear answers to them, your page can be picked up by Googlebots. This will improve your indexing, thus more traffic.You can include questions related to your products, say if you have a furniture store, answer questions related to furniture care, baby proofing of furniture, best-suited furniture for XYZ weather, etc you get the point. Furthermore, include your return policy, procedure, customer care services in the FAQ page.Increase engagement via micro-interactionsMicrointeractions are like the cherry on top! You can implement hover effects, animations, color changes, etc to introduce new features. You can implement micro-interactions in your cart icon, highlight promotions, upcoming sales, etc.Additionally, a small conversational copy of these interactions will have a lasting impression on your visitors. Just ensure that nothing is overdone or distracts customers from the main task. The end goal is to nudge your visitor for spending more time with your design experience and convert them into customers.Optimize your website’s loading timeThis point is towards the end because it is being repeated more times than the Christmas carols during the festive season. However, its importance remains the same.Your visitors are not a fan of the empty white screen. You have only a few seconds to enchant them. You can look into Google’s page speed insights to see your current load time and fix whatever needs fixing.To summarizeAll these practices will get you closer to your growth goals. And since the online marketplace is a crowded one, you can either nail the fundamentals perfectly or do something out of the box. Also, don’t forget that your visitors need to understand and share the same vision.For any ecommerce store design and development assistance, contact us here.About usWe at Galaxy Weblinks specialize in developing the best online experiences for your users. We have expertise in customizing websites using multiple platforms, be it Shopify, Woocommerce, Magento. Contact us for a consultation today.10+ Best UX Practices For Your Ecommerce Store was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Case Study: THT. Web Design for Electrical Engineering Service

Welcome to take a glance at one of our recent projects, created at the crossroads of the practical and creative, design and engineering. In this case study, we unveil the story of website design by the tubik agency for THT, the company making electronics that breathe life into innovative products.Client and ProjectTHT is a USA-based team that offers electrical engineering and firmware development and services that span from proof-of-concept prototyping to designs for mass production. As they describe themselves, they are committed to producing reliable technology that performs at the highest standard, with honest, well-organized, clearly documented, and trustworthy work. They back clients who they believe in and whose goals they can achieve.The THT team approached us with the request for their website design to amplify their online presence, highlight the benefits of the service, tell about the projects that were already accomplished, and enhance communication with their customers. As well, we implemented the website on Webflow.Website DesignThe general visual and interaction design for the THT website is based on the following points:the solid visual hierarchy that makes the web pages highly scannable and allows website visitors quickly get into the essence of the servicesimple, elegant, and readable typography corresponding to the theme and not distracting visitors with decorative elementsthe deep dark color palette and the balanced usage of stylish gradientswell-arranged content allowing for quick skimming and uniting different sections into the integral user experienceeffective and consistent graphics performance and custom visual elements for the original presentationsmooth, catchy web motion effectsAltogether, those factors do their best for the website to make it present the essence and benefits of the service, engage visitors, and set a quick and strong emotional connection.The typography choice fell on Alliance, the sans serif typeface flexible for various goals and providing good legibility in both short and large texts.And here’s a glance at the colors used for the website, deep, eye-pleasing, and providing a good background for various visuals and text blocks.The home page of the website presents an overview of the services the company provides and the portfolio of completed projects. The hero section features a prominent custom illustration our team made to set the topic and activate instant visual connection to the theme of electronics, devices, and digital technologies even before the visitor reads the text. The image is supported with the blog tagline, a short, concise text block unveiling the main idea of the company activity, and a noticeable call-to-action button for those who want to connect the team right from the point.Scrolling the page down, the visitors can learn more about what the company can help with; all the services are well-organized in a clear, digestible list supported with neat line graphics. The following Portfolio section shows up the cards with project previews. All preview cards are endowed with special custom illustrations in one style, which helps to reach visual consistency and integrity.And here’s a glance at how web animation helps make the experience even more dynamic and impressive on the home page of the THT website.https://medium.com/media/cce7315d2276f938d20ac41881664535/hrefHere’s a glance at the particular project page in the portfolio. It echoes the visual style set on the home page, with neatly arranged, hierarchic text blocks, illustrative and photo content, and supportive line graphics.Here’s an example of the page presenting the tool dealing with different data. For the design here, we had to consider various types of infographics and stats that would look clear and consistent.Another interesting design point to mention is the animation of the interactions with the tabs of different projects, imitating a sort of curtain moving up and opening an extensive preview of the project.https://medium.com/media/802768dd4455e4964af5148e10dfe382/hrefIn the structure of the company website, a contact page is usually quite simple. Still, it has great importance as it sets the direct communication with the potential customer, so it’s crucial not to overdesign it to make the page fast to load, informative, and functional. That’s also the idea behind the contact page for the THT website: a contact form is added to the page to let the visitor quickly send the message right from there, or they could choose from other convenient methods like writing an email, giving a call, or arranging an online meeting.All website pages are adapted to the efficient mobile experience to make the design work at its full and let the brand communicate successfully on any device.https://medium.com/media/37ee70b8587ea0183842c8be26a72694/hrefAll the design solutions were implemented by us on Webflow, which ensured that designers kept their eye on the slightest details of the development process.New design case studies from our team are coming soon. Stay tuned!More Design Case StudiesHere’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by the tubik team.Nibble Health. Identity and UX Design for Healthcare Fintech ServiceProAgenda. Identity and Website Design for Golf Management ServiceBlockStock. Brand Identity and Website for Minecraft Models ResourceKaiten. Identity and Product Design for Food MarketplaceKomuso. Website Design for Wellness ToolNonconventional Show. Website Design for PodcastFulfill. Illustrations and Web Design for 3PLs MarketplaceGlup. Delivery App Branding and UX DesignCrezco. Brand Identity and UI/UX Design for Fintech ServiceFarmSense. Identity and Web Design for Agricultural TechnologyOriginally written for Tubik BlogWelcome to talk to us and check designs by Tubik via:WebsiteDribbbleBehanceTubik ArtsCase Study: THT. Web Design for Electrical Engineering Service was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

HTML forms: Learn how to create them like a pro

One of the main drivers of business success is good customer relations. Companies must listen to their customers and take appropriate action. Many online businesses collect feedback from their customers through online forms. You can see these forms on the contact page of almost every website. They ask for the following basic information: Name Email...

17 Exciting Examples of Hidden Menus in Web Design

The use of hidden menus in web design has been an upward trend for several years, largely due to smartphones becoming such a huge thing. The widespread use of mobile phones led designers to come up with a solution that would allow them to place multiple menu items or options in one place without sacrificing a website’s usability. And so, they created hidden menus.Hiding website navigation from immediate view is now commonplace. Contemporary websites need to look spotless on all devices, so the extensive use of pop-up menus seems like a logical choice. A hidden menu doesn’t bother visitors, but it’s there when they need it.The main navigation is shown to the user upon some sort of action. And the most common action used to reveal hidden navigations is clicking on an icon, which usually comes in the shape of three horizontal lines placed on top of each other. Arranged like that, they resemble a hamburger, hence why they’re also called hamburger icons. Of course, the way a menu icon looks can vary, mostly depending on a website’s aesthetic. You’ll come across semicircles, three dots, arrows, and combinations of various shapes and letters.Hidden menus are almost exclusively placed in one of the upper corners of the screen. They’re prominent enough for people to spot them, but they don’t overshadow other elements on a page, ensuring users stay focused on the main interface the entire time. Due to their unobtrusive appearance, hidden menus don’t clutter websites and leave a lot of room for content. Because of that, they’ve become somewhat of a designers’ staple at this point.The following examples demonstrate how sleek and subtle hidden menus are, and how much creative freedom they give to designers:CollageCanalsGlobeKitKatchMeCuspHelias OilsExtra l’AgenceDecadeBlabDaniele BuffaAlan MenkenUltima CapitalKatifoner DesignAnimalMaudCoboHarvard Film ArchiveCollageCollage is a Canadian studio that makes a wide range of hand-crafted objects. Their website oozes brutalism, with all the bold lettering, cool micro-interactions, and interesting text arrangements. The menu icon is elegantly shaped as four horizontal lines of different lengths arranged one on top of the other. It is placed in the top left corner of the page, but still easy to notice because of the striking contrast between the dark background and brightly-colored elements, as well as the smart use of white space.The menu icon is easily noticeable. On hover, its color changes from salmon pink to white, and all its lines become equally long. Once you click on the icon, the fullscreen menu appears, all in white and pastel hues, with black typefaces.Menu items are on the left-hand side, with primary links written in a larger font. When you place the cursor on a primary link, the letters become underlined. On their right, a tiny number shows up indicating how many elements are featured in the selected section. Secondary links look more subdued. Their color goes from black to light grey on hover. A picture of some of the Collage’s products takes up the large portion of the menu screen but is separated from the links by a decent amount of negative space. The products belong to their S019 collection, hence why they’ve displayed a link to that year’s lookbook over the image. The tiny section on the far right includes the link to the homepage and the online store.CanalsCanals is a great project that introduces users to the history of Amsterdam’s canals. This website comes with horizontal navigation, which gives it an editorial feel. You can either drag or scroll through sections with your mouse, discovering interesting facts about Amsterdam’s canal ring. Every story is backed up by exciting imagery, transporting you to the river banks and canal bridges.The hamburger button is in the top left corner. Its three parallel lines look demure until you click on them. The menu icon goes from three lines to one, and a burning-red menu takes up the entire screen. There are only four menu items to explore, which gave the site’s designers a large canvas to make use of. So, they decided to present the menu links in massive, bold letters. All of the menu elements are black, but on hover, the number placed next to every link turns white while the letters become strikethrough with a white line. To close the menu, you can either click on the large “X” button at the top right corner or tap the menu icon again. The “About & Sources” section is also included in the bottom right corner of the menu. If selected, it will take you straight to the page where you can discover the names of the people included in the making of this site as well as the content they used to make it all happen.GlobeKitGlobeKit is an animated interactive 3D globe that can be used in various types of projects, and its characteristics have been beautifully showcased on this one-page website. The transition from one section to the next is marked with a wavy effect that changes its color the moment you reach a new section. The hamburger icon is in the top right corner with “Menu” written right next to it, so there’s no doubt this is where you’ll find the main navigation. When you click on it, a futuristic-looking overlay menu loads. The company’s contact details are displayed on the left side of the menu, with the company inviting users to reach out to them to request a quote for their project. At the bottom left, you’ll find links for the newsletter subscription and social networks. The larger portion of the menu is taken up by six different versions of a globe, each representing one section of the website. On hover, the globes become slightly bigger, the names of pages go from white to black, while the background behind them changes its color.KatchMeKatchMe is a recruitment agency with a colorful website that includes terrific transition effects, a video background, parallax effect, and a myriad of fun animated elements. The main navigation is hidden behind “Menu” in the top right corner of the page. The word “Menu” is surrounded by a thin white circular shape that becomes larger when you place your cursor on it. On click, the baby blue fullscreen menu appears. At first glance, it’s very minimalistic, with menu items placed horizontally, one next to the other, in the middle of the page. In the background, several concentric circles follow the movement of the mouse pointer, while other, smaller circles float all over the menu screen. When you place your cursor on any link, an image appears behind it while all other menu items lose their color and become see-through. The images are round for the most part, save for occasional intentional glitches that transform them into squares for a tiny fraction of time.CuspThe Cusp website is minimal, but it comes with a compendium of interactive elements and striking animation effects that make the browsing experience all the more enjoyable and fun. The colors on the homepage are subtle, with images in beige, green, and soft black hues, while typography comes in prominent red. Once you click on the menu button in the top right corner of the screen, the web scenery changes. A black canvas drops from the top to the bottom of the page and all the colors disappear. All you see is the dark backdrop, menu items written in huge, all-caps, serif white letters, and several subtle favicons. But, that’s not all there is to Cusp’s main navigation. Since it features only four items (each link is marked by appropriate Roman numerals), the site’s designers have made things all the more interesting by adding the infinite scroll effect to the menu. The cursor is shaped like a large outlined red circle that becomes significantly smaller when placed on any clickable screen element. When you hover with it over menu items, an outlined white circular shape encircles the Roman numerals. You’ll find links to the Cusp’s social networks in the top left corner of the page, while the icon that takes you straight to their gallery is placed at the bottom left. To exit the menu, click the “Close” button in the top right corner.Helias OilsHelias Oils make natural oils and homeopathic remedies. Their website is a colorful web oasis adorned with a liquid scroll effect that imitates the movement of oil. As for the navigation, you can either click on the menu icon or explore the most important pages that are highlighted at the top of the page. The hamburger menu is more convenient for mobile users, whereas desktop users can choose the option they find more convenient. The menu icon opens a content-rich overlay menu. The four primary links are highlighted using big, black, bold letters. When you place the pointer on one of them, the color of the other primary links fades and turns light grey. Secondary links are separated by a decent amount of whitespace and are written using a smaller-sized font. Social media icons and contact details are vertically positioned in the middle of the page, while the right side of the menu features the latest posts from Helias’ Instagram feed. The images include the undulating scroll effect. When you click on any of them, you will be redirected to the brand’s Instagram page.Extra l’AgenceExtra l’Agence comes with a black-and-white website that looks very artistic because of the background that resembles a sheet of drawing paper and the use of elegant and handwritten typefaces. The main navigation is hidden behind a simple lowercase “menu” link, but you can’t possibly miss it as there’s nothing else in the top bar save from the agency’s name at the far right. While the site’s backdrop is white, once you open the menu, its color goes to black and the texture becomes grainy. The menu is very simple and features four items in white letters. When you place your mouse on any of the four, the font loses some of its weight and turns from bold to slim. The cool thing about the menu is that every time you open it, the items will be arranged in a different manner.DecadeDecade is a branding and creative studio from New York. Their website is peppered with attractive videos and imagery illustrating the projects developed by the company. At the top of the page, there’s a white section with the studio’s name written in the middle and the menu icon in the shape of a black semicircle. The choice of menu icon is a bit uncommon and interesting. However, all users have some preconceptions about where navigation will be located on a site, so they already expect to find the main navigation icon somewhere at the top. When you click on the semicircle, a fullscreen menu unrolls from the top of the page. You can learn more about the studio by exploring the “About” section on the left-hand side of the menu. To control the amount of displayed information, use “Read More” and “Read Less” links. The right side of the menu introduces you to Decade’s “Clients” and “Selected Projects”. To exit the menu altogether, you can either click on the semicircle again or on “Decade”.BlabBlab is an Italian communications agency with a website that’s filled with entertaining animation effects. The menu is positioned right above the agency’s name in the form of the three big dots. Again, this isn’t a common choice for a menu icon, but it’s easy to guess what the dots “hide”. When you place the pointer on them, they transform into a hamburger button and take you to the site’s main navigation. The pink-colored menu features red typefaces and irregular, blue pulsating shapes that enliven the menu. The name of the company is subtly incorporated into the background using a soft shade of pink. The links are organized into two sections, with primary items in bold letters on the left and secondary items in italic on the right. The contact link and social media icons are featured at the bottom of the page.Daniele BuffaThe portfolio website of Daniele Buffa is bursting with exciting animations and microinteractions that make the browsing experience smooth and enjoyable. You can reveal the hidden menu by clicking the word “List” in the top right corner of the site. When you place your mouse on it, it becomes strikethrough. The menu items load as if they’re on a spinning wheel. They stop moving the moment you access the menu. The website makers have used the infinite scroll effect here, so you feel like there’s much more to explore than the five selected works. The links are written using black typefaces, but when you start scrolling, the top and the bottom part of each letter turn to red. The faster you scroll, the more a letter becomes red. On hover, you can see the image preview of the selected project while the names of other projects become invisible. The far-right side of the menu is where the website’s sections from 01 to 04 are vertically displayed. When you put the cursor on them, you’ll see what each section is called so you can jump straight to any of them.Alan MenkenAlan Menken is a legendary composer and songwriter with a website that introduces the audience to his impressive oeuvre. Considering his profession, the use of several piano-inspired elements on his site comes as no surprise. First and foremost, the way his works are presented on the homepage resembles piano keys. On hover, each key springs to life and turns into a preview video of Alan’s projects. The three-lined menu button also looks more like piano keys than a hamburger because the bars are vertically placed. When you click on them, the dropdown menu appears, but it doesn’t take up the entire screen. Instead, the homepage is still visible and you can simply click on it to close the menu. The menu is very simple, and includes just several categories, without any audio or visual ornaments. However, the playfulness of Alan’s songs is beautifully translated in typography and the way the navigation links are written in an animated Disney-esque style.Ultima CapitalUltima Capital’s website comes with a menu hidden behind two parallel horizontal lines of different weights. The moment you put your pointer on them, they merge into one line. The fullscreen menu is in grid and it looks like a chart where each of the 8 fields contains one menu item. Everything looks clean and minimal, in black and white, so it’s easy for users to find the section they’d like to explore. On hover, the fields become dark beige (the field where the homepage link is placed is always colored in that hue) and that is the only touch of color in the menu.Katifoner DesignKatifoner Design’s website looks very modern and simple, with large typography and attractive imagery that capture the visitor’s attention. The main navigation is, even though hidden, easily noticeable and well separated from other elements by a large chunk of negative space. When you put your mouse over “Menu”, the letters take a zigzag form. The overlay menu includes just three links elegantly positioned in the middle of the page. The fonts are huge. Next to every menu item, there is a two-word description of what that section is about. And that’s not all. When you hover over any link, a fullscreen background image appears illustrating the selected section while the remaining two items become see-through.AnimalAnimal’s website is all about minimalism. The pages are not cluttered with too much content, save for a few images and witty copy. The menu icon stays in the top right corner at all times so you can access the navigation whenever you want. The menu is splayed across the whole screen and is divided into two sections — “Our Work” and “About Us”. Secondary menu items are written in a smaller font size and displayed at the bottom of the page, but still easily noticeable. On hover, the color of all menu links changes from black to light grey.MaudMaud’s website features fullscreen showcases of their projects, both imagery and videos. The menu is hidden behind a small circle at the top right corner of the screen. The word “Menu” is displayed right next to it, so you will easily spot it. When you click on the icon, the menu loads from the bottom to the top of the page. As soon as it pops up, the whole screen gets split into four equal horizontal parts. The homepage is visible in the top one. The menu items are placed in the remaining three sections along with snippets from every page included in the navigation. This kind of a menu isn’t something you see every day and it speaks volumes about the creativity of Maud’s team. You can explore each one either by clicking on or by scrolling over the item of your interest.CoboCobo is a world-renowned brand known for plastic injection molding. Their website looks very modern, with a black background, interesting typography choices, and great animation effects. The menu is hidden behind the hamburger button which is surrounded by a thin-lined circle. When you place your cursor over it, the circle becomes bouncy and starts following the movement of your cursor. When you click on the menu icon, a side menu appears on the right. It looks clean and sleek, ensuring an easy navigation experience for users. The four primary links take up the better part of the menu and are highlighted using bold and large typefaces. On hover, a short description pops up next to every menu item telling you what each section is about.Harvard Film ArchiveThe Harvard Film Archive website is imbued with numerous details that create an enthralling cinematic atmosphere. The grainy background resembles a 35mm film stock. While you wait for the content to load, the old movie countdown appears over the entire screen. The navigation is safely tucked behind the hamburger icon in the top left corner. On click, the side menu appears, featuring a handy search option. The main menu items are displayed at the very top, in sans-serif, elegant lettering. The links to HFA’s social channels are placed at the bottom of the menu. Navigation is simple and well-organized, so you can effortlessly find what you’re interested in.Final WordsWebsite navigation is, unquestionably, one of the key elements of web design. As such, it needs to be organized in a clear and logical way so that users can easily engage with your website. However, that doesn’t necessarily mean you have to display menu items in an obvious way somewhere on the main page. As the examples in our roundup illustrate, you can hide your menu from plain sight and have it appear only when visitors interact with your menu icon. Using a hidden menu on your site is a refined and simple solution that enables you to prioritize content and keep users focused on what you have to say and show.Originally published at https://qodeinteractive.com.17 Exciting Examples of Hidden Menus in Web Design was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Case Study — AREEV 2022: Conference Website Redesign

Case Study — AREEV 2022: Conference Website RedesignHere’s a walkthrough of how we re-designed the AREEV 2022 website from scratch for a Two Day International Conference. We will share our redesign process along with our design decisions.ContextTo establish some context here…let me first state that this redesign job was done by my friend Sudhanva Acharya and me. This project was a task from the head of the department to redesign the conference website. This project was given to us as we were looking at our department’s marketing and social outreach.About the projectAdvances in Renewable Energy & Electric Vehicles (AREEV-2022), is a two-day International Conference as part of the Multi-Conference “International Conference on Emerging Trends in Engineering” (ICETE-2022), which will be held on December 22 & 23, 2022.The Conference aims to drive innovation in all aspects of Electrical and Electronics Engineering by providing a platform for researchers, professionals, executives, and practising engineers from various research and educational institutes and industries to exchange ideas on the Conference’s Theme.The project’s scope was to redesign the entire website, to enhance the visual appeal and improve the UX of the conference’s registration process.Note: The design of the website was a collaborative effort. We tried multiple design options that appealed to our design sensibilities before going live.So let’s get started.Design ProcessWe started the process by analysing the current website. This helped in mapping out the flow and helped to find major issues with the design.The current website was a single-page website. After prioritising sections, we decided to shift some of the sections to other website pages.We found that many users had difficulty with the registration process, so we wanted to make it easier for users to complete the registration.We decided to add a FAQ section to answer many commonly asked queries that could pop up in the users’ minds. This also could prevent them from directly contacting us and waiting for a response.After listing down the problems, we started gathering design inspirations and references. We used popular curation sites like landingfolio, btw.so, awwwards and lapa.ninja.Secondary researchMultiple iterations before the final designAlright, now let’s dive deep into the final designs ✌️Hero Section👑Hero sectionYou can tell right away that the hero section needed a significant visual overhaul from the get-go. Let us now walk you through the changes.HeroSince the majority of individuals visiting the websites intend to register for the conference and submit their papers, most will be familiar with the conference and may have attended many such conferences in the past. So the first thing they would search for is the brochure. So we decided to maintain a ribbon for them to download the brochure.The old design lacks a clear navigation bar, and as we mentioned earlier, we considered switching from a single-page website to a multiple-page website. As a result, we came up with a navigation bar that includes the logo, CTA buttons, and other text hyperlinks that direct users to other pages.In contrast to the previous design, we included CTA buttons in the hero section. We added two CTA buttons since there were two distinct actions happening on this page that were not tied to one another in any way.It is essential to share that information if the event is sponsored by reputable and significant organisations since it increases the event’s legitimacy. So we decided to move this part to the hero section.To give the hero section a sense of a college or conference, we included a video element that plays in the background.About Conference✍️About the conference sectionThe about section in the previous design was quite messed up with various bits of information like “about the conference,” “important dates,” and “conference partners.” As a result, we separated this into three distinct sections: the about section, the important dates section, which was displayed later, and the sponsors and partners, which was shown in the hero section.In the previous design, the “about” section included a lot of text, leading to users ignoring them. Therefore, we reduced the amount of text by introducing a see more button that directs viewers to another page. The website now has a better visual appearance, and since most users prefer watching videos over reading through a ton of text, we included video components.The hover state design of a video component is shown below👇Hover state for the video componentTheme of the Conference📝Theme of the conference sectionAs you can see in the previous design, all the topics for which papers may be submitted are displayed on the front, by grouping them under several themes. This design was quite overwhelming, and because the majority of the participants are planning to submit a paper and are so aware that simply by glancing at themes, they can readily choose what they want to focus on.Therefore, we decided to go with accordions. This reduced complexity and also enhanced visual appearance.Invited Speakers🗣️Invited speaker sectionWe redesigned the “Invited Speakers” section as per the new design language. We adopted a three-column grid system, to showcase the speaker profiles.We included a profile picture, as well as their name and designation, which were previously not available. When clicked over the profile, the visitors would be redirected to the speakers’ Linkedin profile.The flow is now beginning to alter. Let me explain the changes in flow before heading on to the next section.Updated flowThe previous flow had an invited speakers section followed by a publication section, then a section showcasing the committee members, then a date section, and finally a CTA for submitting papers. Then there were registration details and a registration CTA. Finally, the section concluded with contact information, an instructional video, and a footer.We simplified the entire flow, by moving the committee section to a new page, and registration details also to an entirely new page. We also removed unnecessary information from the original website.Important Dates📅Important dates sectionWe thought about prioritising the dates in the new design. However, because each date was of equal importance, we decided to achieve this by emphasising the date that is approaching the deadline and de-emphasizing the date that has passed the deadline.Publications📢Publications sectionAs stated earlier, we added two CTA buttons in this section, one for submitting the papers and the other for registration for the conference, which when clicked go to their respective pages.FAQ’s❓Commonly asked questions sectionThis was an entirely new section that was not present in the old design. We decided to add a FAQ section to answer many commonly asked queries that could pop up in the users’ minds. This also could prevent them from directly contacting us and waiting for a response.Conference Location and Contact Details📌Conference location and contact details sectionNow, with the new design, we modified the layout by retaining the location and contact information side by side. The location was provided in map mode, making it much easier for viewers to find the venue.Gallery Section📸Gallery sectionOn the home page, this is the last part before the footer. Previously, the photos were displayed in the hero section as carousels, which we now separated by creating a distinct gallery section that auto-scrolls horizontally.Footer🔚FooterThis is the last part of the website and is a quick one. We included a sign-up for updates, which was missing in the previous design and is particularly important as we can collect the visitor’s mail address and send them relevant updates.Presenting to you the final design 🤩Home pageAdditional PagesRegistration PageRegistration pageIn the previous design, the steps for registration were not properly conveyed to the users. There were a ton of instructions given which might be overwhelming.So, we decided to redesign this section by splitting the information and showcasing the registration process into a two-step procedure. The first step included details of online payments. The second step included a CTA button where users can upload the transaction details.Committee PageCommittee pageAs the previous design was a single-page website, the committee section was added to the home page. However, because it involved a large number of individuals and was not of much importance, we moved it to another page and improved the aesthetic by adding profile images and updating it as per the new design language.About PageAbout pageSimilar to the committee page, we also decided to maintain a separate about page, which included all the details about the conference, hosting institute and hosting department.And that’s a wrap… Thanks for reading!♥️We appreciate your efforts in sticking till the endIf you enjoyed reading this case study then long-press on the clap icon, drop a few claps & shower your support. This does not have to be the conclusion of the story. You may contact us through any of our social handles and ask questions or have a chat. We would be happy to connect with you soon 🤟🏻Read more of our works on:Case study: Designing a job search app for wizardsSocial LinksSagar Prabhu: LinkedIn | Instagram | TwitterSudhanva Acharya: LinkedIn | Instagram | TwitterCase Study — AREEV 2022: Conference Website Redesign was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Lego generator (Substance Designer) by Maxime Guyard-Morin

I've saw multiple Lego SD material these past few years and I though they were lacking of the volume that you would expect by building stuff with Lego, so I gave it a try. It was both harder and easier than expected, the biggest struggle being getting a good displacement without having my poor laptop turning into a barbecue 😄 Base Moon map were made by nice ppls at NASA: https://svs.gsfc.nasa.gov/4720 (and a bit processed by me to look better when Legoified) Object come from Megascan and were reworked to fit in the project ------ Artworks on this page are protected by copyright and may not be used for any commercial or non-commercial purpose without the express written permission of the copyright holder. Any unauthorized use of the artwork, including but not limited to AI training, is strictly prohibited and may result in legal action. By accessing this page, you agree to abide by these terms and conditions and to respect the copyright of the artwork displayed on this page. The copyright holder reserves the right to modify these terms and conditions at any time without notice. By using this artwork/picture for any commercial or non-commercial purpose, including but not limited to AI training, without specific prior agreement with the copyright holder, you agree to contact and pay the copyright holder 5 thousand billion dollars.

Website Inspiration: Sanne Wijbenga

Long-scrolling One Page portfolio (built with Webflow) for Dutch product designer Sanne Wijbenga. Neat touch adding the green “available for hire” dot over his logo avatar and clicking it slides up his contact form. Full Review

Product Page Design: Handy UX Tips and Practices

In e-commerce, the measurement of success is not the number of website visitors or clicks. It’s the number of finalized purchases. From that perspective, a product page is crucial as it is usually the spot where most decision-making on “to buy or not to buy” happens. So, designing or improving an e-commerce website or application, UX designers have to think it over and test it up to the slightest detail. That’s what our today’s article is about: let’s discuss what a product page is and how to design it effectively. Packed with plenty of examples from both known e-commerce websites and creative design concepts for niche or specific business goals.Product page design for the BlockStock websiteWhat Is Product PageThe product page is a page of an e-commerce website that provides a customer with all the needed information about the particular item, allows them to check various options if they exist, and enables a customer to quickly proceed with the purchase process if they decide upon buying the item.Unlike a real point-of-sale, an e-commerce website doesn’t provide physical contact with an item or assistance from shop staff. Product page becomes the major source of attraction, impression, information, and persuasion. That’s why its design, navigability, and usability play a crucial role in growing sales.As we mentioned in our guide to the basic web pages, a badly-designed product page may waste all the effort (usually massive and complex) taken to bring the buyer to the website and to this particular product. So, besides the attractive product presentation, focus on functionality, clarity, readability, and intuitive navigation.Product page concept for a gardening e-commerce websiteTypical Elements of Product PageBasically, a product page:shows the image of the productgives all the needed information about the productallows users to check different color/model options (if any)enables visitors to see the reviews, comments, and ratings from earlier buyersallows for adding the product to the cart or wish listshows other relevant options.Additionally, the product page may include such options as a comparison of different items, especially popular on websites selling different devices and appliances.https://medium.com/media/fbf4df9762877774580cc9ad6f038ee5/hrefBased on that, here’s a checklist of basic elements of the product page layout:name/title of the itemphotopriceitem availabilityadd to cart/add to bag/add to basket/buy buttonadd to favorites/save to wishlist buttondescriptionsocial proof: rating, reviews, the number of previous buyers, the number of people looking at the item now, etc.choice of colorchoice of modelchoice of the number of items to buysize guide or calculator (for clothes and footwear)extended details (materials, technical specifications, dimensions, weight, special features, etc.)The list above doesn’t mean that all the points are obligatory for any product page. The choice will depend on analyzing multiple factors, understanding the target audience, and careful prioritization to see which points to include and which may be eliminated from the list for this particular type of goods or kind of customer.Product page first-screen view on Walmart websiteDesign Practices for Product PagesVisual DemonstrationE-commerce platforms are the best place to prove the saying that the picture is worth a thousand words. Not able to contact the item physically, visitors will count on the visuals of the product to make their first impression about the goods. What’s more, images are noticed and decoded faster than words; they will be the first element attracting the visitor’s attention. They present the part of the content which is both informative and emotionally appealing.That’s why many e-commerce platforms:use a set of images to present one item from different points and anglesapply zoom functionality to enable a visitor to look at some parts of the photo closer, see the textures and small detailscombine the photos of the item with photos of it on a model or in the proper environment to give a better understanding of its looks and sizesProduct page first-screen view on Marks and Spencer: a combination of several photos shows the item separately and on the modelThe approaches to photo content can be different and depend on both general brand strategy and particular campaign or collection style. However, what unites them all is:originality: special shootings are organized to make custom photos that correspond to the style defined in a brand book or specific campaign guidelineshigh-quality: no doubt, the quality of photos directly influences the impression about the particular item and the brand in generaloptimization for the web: being quality, photos shouldn’t be too big as it can dramatically influence the loading time, which in turn has a great impact on SEO; also, pages loading slowly are the solid reason for high bounce rate — unless the website offers something absolutely unique and super exclusive, people will just go away instead of waiting.https://medium.com/media/0dbae34320e0fdf1557cb3c1f0a819e6/hrefExcept for images, other media, more complex or interactive, can also be used. Among them, you can now find:product videos, detailed video reviews, and instructions360-degree view of the itemaugmented reality technologies helping people to observe the item in their own environment or try it on virtuallyhttps://medium.com/media/41455d1226847ea12130dc5b5bb0e2c0/hrefhttps://medium.com/media/14946784cfbd8eaf5288cdf71010c4cc/hrefGardening Shop WebsiteObviously, these types of media are often more complicated, time-consuming, and expensive in production than photos. So, the decision on their worthwhileness is usually based on the type and price of the offered item. For example, to sell a 5-dollar T-shirt, photos may be enough, but for buying a massively more expensive fridge, smartphone, computer, or even a car, customers need more convincing in the decision-making way. And in this case, expenses on the more complex but more impressive, persuasive, and informative visuals and media could be a worthy investment.https://medium.com/media/4574e116775a0032a6295c5ec63d54c4/hrefhttps://medium.com/media/6d36ec146e7ead43e4b5ab45ce1817d4/hrefInformative but Simple DescriptionThe saying that people don’t read anymore has nothing in common with the product page: when customers are deciding upon spending their money, they do read what they need to know about the product they are going to buy. Still, it’s not the reason to overload the description, as the attention span is quite limited. The description text should be concise, factual, simple, and talking in the language of the audience. It should answer the basic questions: what the product is, what it looks like, what it does, and how it does it. And better to do it from the first lines, which have the highest chances of being read, instead of filling them with standard marketing hooks shoppers are already sick and tired of.Another rule of thumb here is connected to the previous point: show, don’t tell. Well, better to say, tell, but also show! Don’t just describe in detail how the bag looks inside — show the photo. Don’t just tell how beautifully this neckerchief matches that jacket — show the photo. Don’t just mention the size of a toy — show the child playing with it. Combine the power of words with proper images to make the experience much more effective.Product page first-screen view on Uniqlo: the page features a concise and informative description of the item and puts the details on materials and care in another tab, both in the pre-scroll area of the page. Another good thing is a clear definition of the model's size on the photo, allowing the customers to instantly understand the proportionshttps://medium.com/media/fb1c390085eaaae2df3836596da418b8/hrefSuper Obvious Call to ActionCalls to action (CTA) should be instantly noticeable. In e-commerce interfaces, CTA elements are the core factor of effective interaction with the product; they play a crucial role in usability and navigability and, therefore, in getting profits. When all the path of interaction and transitions is built clearly for users, but the CTA element is not obvious, misplaced, or designed badly, the risk gets higher that users will get confused and need to make additional effort trying to achieve their goals — which is annoying. Therefore, the risk of poor conversion rates and bad user experience grows.ASOS product page first screen: the CTA button differs from everything else on the page due to color contrast and is instantly noticed in the light airy layout.Focus on the ItemNo doubt, thinking about the layout and content of the product page, both stakeholders and designers feel the urge to fill it with everything possible, and even more, to make the page super informative. However, be careful as this strategy may do a dirty trick: in that flood of information, the focus gets blurred, and visitors can get too distracted to make a decision. How to find the balance?On the one hand, it’s recommended not to overload the page with a great deal of information that will overwhelm customers and distract their attention from the major goal — to make the purchase. On the other hand, visitors aren’t ready to jump from one page to another to get different information about the item they are interested in. Therefore, the designer has to take the time for thorough research on the issue, prioritize carefully, and find the balance of data that needs to be provided on the product page.Is there a golden rule for all e-commerce websites? No way, as different customers and markets have different needs, and the type of the product also influences the choice of core and secondary information to show. The analysis of the target audience and user testing can give clues on what information is required for the specific categories of items or services.https://medium.com/media/26962819154291eb06645ebc01b7f1da/hrefThe more pricey, uncommon, or innovative the product, the more information the customers usually want to get about it. And even for common stuff, there may be tons of questions and hesitations. Sure, all the needed information should be accessible from the product page, and the challenge for UX designers here is to find a way to organize it properly. Technical details, materials, weight and size, size chart or calculator for clothing and footwear, functionality for comparing the item with a similar one, and so on, and so forth — any of those details can play the premier violin in a story of a particular item.Use the principle of the inverted pyramid and uncover information gradually, from the most important and demanded shown first to more and more specific details unveiled further.Instead of creating intrigue, be open, direct, and clean in content presentation.Try to put all core information in highly readable form on the above-the-fold part of the page.And test, test, test again, analyze the time on the page, heatmaps and clicks, ask and analyze to know what buyers really need and what makes shopping convenient for them.The product page on Amazon is based on the principle of the inverted pyramid: this above-the-fold view shows the core information and functionality buyers want and need to know about this type of product first of all. Engaging social proof is marked by the label of #1 New Release and showing what other products are often bought together with this one.The second screen uncovers more about the actions of other customers interested in this theme: two sections, visually attractive due to the focus on product images, uncover other items customers view or bought.And only after that, scrolling further, can users find the extended information, editorial reviews, etc., based on text without visuals.Intuitive NavigationEvery button, link, and card design can change the conversion rate significantly. It’s vital to always remember: in the intense competition we observe in e-commerce now, buyers aren’t ready to wait or waste their time on unnecessary operations or efforts to understand where’s what they need. What they do demand from e-commerce is an experience that is faster, easier, and more convenient compared to going to the actual store. If this website doesn’t give it to them, they will look for it somewhere else.So, adding to obvious CTA, make sure that users can effortlessly do common steps, for example:find search fielduse breadcrumbs helping to quickly understand the current position in the website hierarchy and probably take a step or two back instead of just going awaybe totally sure which elements on the page are clickablesee if the item is already in the cartsee the number of items in the shopping cart or bag (usually, in the website header)use the power of visual dividers and common directional cues to perceive the information fasterfind the contact information and navigation links in the website footerProduct page first-screen view on Target: multiple photos of the item, both clean and integrated into the environment, clear and instantly noticeable controls for choice of color, the obvious search field in the header, breadcrumbs creating the secondary navigation level, social proof in the form of ratings and questions, and clear call-to-action element.ConsistencyConsistency means that the product communicates with the user in the same or similar way, whatever point or channel of communication. In terms of user experience, it means that similar elements look and function similarly, this way reducing the cognitive load and making interactions more smooth and more intuitive.In an e-commerce interface, it touches both:Internal consistency is about different parts of your interface or brand that look and behave as one clear system. For example, when you make all the CTA buttons on different pages or screens of your product colored and designed the same way, visitors can learn fast and will be able to quickly distinguish them at any step of their user journey.External consistency is about parts of your interface that look and behave as typical patterns for most products of this kind. That’s, for example, when you use a shopping cart even on the website selling non-tangible products or underline the text links to give users a hint that they are clickable.Sephora product page first-screen view: expected navigation in the website header, easily recognizable for e-commerce shoppers, super obvious call-to-action button, arrows used as the clearest directional cues for most users around the web, focus on the item presented in different visuals and highlights important and influencing decision-making for the target audience.Power of Known PatternsAdding to the previous point, UX designers would better never underestimate the power of habit. In UI for e-commerce, especially in the red-ocean spheres, the primary goal is not to shock and awe. Basically, UX designers become a friend or at least supportive shop assistant who greets visitor, guides them around the store, takes them right to the items they want, and make the checkout as fast and simple as possible. To make that all possible, designers should base their decisions on how actual customers behave.There are many articles and videos calling creative people to hear their hearts, trust their guts and think out of the box. However, design is not just pure creativity striving to show all the power of original solutions. First of all, it’s a way to solve the problem and make users happier. So, it’s vital to look at the interface from the user’s perspective and find a way to make interactions that will provide a smooth and easy way to purchase.The power of habit plays a big role in products of this kind. Choosing layouts, menus, or icons, which stand too far from the ones users are generally accustomed to, often brings confusion and frustration. For a simple example, the usage of any other image instead of a magnifying glass to mark the search field can result in a bad user experience as buyers know that visual symbol and will look for it. If you are ready for such experiments, take time to test them well and ensure that customers are ready for them, too.H&M product page design is based on a minimalist approach: the first-screen view is designed around prominent images, model choice options, elegant and readable basics (product title, color name, and price), a heart icon as a well-recognized visual trigger of adding the item to favorites and a noticeable CTA button. Even the size options are hidden in the dropdown menu to put the number of controls to a minimum and focus all the attention on the visuals. Sure, it means additional clicks and scrolling; however, the approach may be reasonable and effective if the customers are used to this flow and appreciate this particular style, consistently reflecting the brand image in general.In the article on home page design strategies, we mentioned: the website is made not for creative contests or galleries of fame but for real users. The positive impact of habit in terms of user experience can be stronger than the wish for revolution. No doubt, the dose of uniqueness is needed, but not so much to knock down the user. In e-commerce UI design, often aimed at quite a diverse target audience, too much of a revolution might scare and provoke hesitations: do I really need to buy this thing, a user may think, if it’s so hard to get it? Study the interaction patterns and typical products for that particular target audience to make their habits their power. And don’t forget to check that all the icons on the screen don’t have a double meaning; support them with text labels where needed. Strive for the balance between innovation and traditions.Narrowing the focus, we may also talk about the power of habit for a particular e-commerce website. You could have read numerous reviews of the “poor UX design” of this or that e-commerce giant, breathing fire and brimstone into old-fashioned solutions or complex navigation. However, thinking deeper, it’s easy to understand that they activate the power of habit as a major approach of respect to their buyers, as plenty of their customers have been with them for many years. It’s not because they don’t know how to change; it’s because, at some stages of business development, the cost of change may be too high. It doesn’t mean that the changes are never made; they are just not as revolutionary and made in small steps.Product page above-the-fold view on Etsy marketplaceScannability and SkimmabilityIt’s already well-known that coming to a website or app, users don’t usually read and observe all the content on the page or screen. Instead, they start with quick scanning to understand if it contains something they need or want. Knowing the eye-tracking models, Gestalt principles, and laws of visual hierarchy, designers and information architects can put the core data and interactive elements into the zones of high and natural visibility. Other factors making product pages scannable are readable typography and enough white space.There are numerous things that have an impact on decision-making, and harmony is one of them. Eye-tensing color combinations, unreadable or not combining fonts, aggressive background, intrusive pop-ups or animations, annoying sounds, or pages loading for ages — any point of that stuff can spoil the experience quickly, distract users and move them away, sometimes even without a clear explanation what they didn’t like. Details matter; think over them and organize them well.First-screen view of the product page on George: due to the light airy layout, the page looks clean and simple, but at the same time, it’s highly informative even at the stage of fast scanning.https://medium.com/media/534253dc2ee6fbeba0c2ab38afc082f7/hrefFewer ClicksIf going from page to page or jumping from screen to screen is not a part of the journey into the sales funnel, save every user’s click possible. Too many operations are tiring and annoying, which is a kind of negative emotion. And emotions have a huge impact on user experience and make retaining users much harder. Minimize the number of clicks on the way of choosing and buying whenever it’s possible — this way, you respect the user’s time better than the politest words of thanks. For example, avoid dropdowns for a small number of choices in basic options such as color or model choice.Product page first-screen view on Sportsdirect website: no information is hidden in dropdown menus, so it’s super easy to scan the availability of models and sizes, the CTA is seen immediately, the number of items is changed easily by typing or manipulating plus/minus controls, arrows show how to see more images, and breadcrumbs help to jump back to choosing other items easily.Exotic Fruit e-commerce app uses a tab for adding the needed number of products with a simple tapThe OldNavy product page integrates the section of offered combinations with other items from the website, and it is not just an image to get buyers inspired: on hover, the shopper gets the list of links to items with basic information, which enables them to easily get engaged in further shopping and makes the relevant product accessible quickly.Social ProofSocial proof is an impactful factor in the decision-making process in both the physical and digital worlds. It is a psychological and social phenomenon of people copying the actions of others to undertake behavior in a certain situation. This term was introduced by Robert Cialdini in his 1984 book Influence; the concept is also called informational social influence.In e-commerce, the experience of the previous buyers influences the behavior of the next ones greatly; that’s why ratings, comments, and reviews are needed, especially on mass-market platforms. They help customers feel united with a group of similar buyers, which is easy to feel in the actual store among other shoppers but even more needed in the online shopping experience when you are shopping alone in front of a computer or mobile screen. What’s more, reviews can answer the questions the customer has, and this way support the positive decision about buying — or prevent from buying the wrong item and getting a negative experience.Here’s the product page on OldNavy: the first screen view, among all other details, includes the social proof showing the rating of the item with the number of people that marked it. Scrolling down, buyers are getting even more engaged: except for relevant products to combine this item with for the perfect outfit, the page uncovers the relevant items other customers looked at and liked and further customers’ photos and details on reviews.InteractivityWith more and more buyers online, brands and retailers can analyze more data about their behavior, needs, and wishes and integrate new approaches on that basis. Interactivity that imitates seeing the item from different angles and manipulating it, trying on the clothing or footwear, testing the make-up options on your face, virtually placing the piece of furniture or decor into your room — all that and diversity of other innovations are becoming more and more accessible and affordable due to the creativity, customer experience care, and new technologies. And sure, they help customers to make a decision.Another vital aspect of interactivity in e-commerce now is personalization and customization, when people can customize their purchase instead of just choosing it from the catalog. Choosing a custom combination of flowers for a bouquet, customizing the burger or pizza with favorite ingredients, collecting a personal outfit or family look instead of just buying ready-made ones — able to add their own personality to the offer, many shoppers feel ready to buy.Tasty Burger app allowing for creating custom burgers to buyMobile AdaptationNeedless to say, how many daily things people do with their smartphones nowadays, and shopping is getting to one of the top options. Besides, mobile adaptation is among the core web vitals of search engine optimization. If you want an e-commerce website to be googled successfully and let the visitors have a seamless shopping experience from any device, make the product page mobile-friendly and reconsider the layout to make the interface convenient and navigable for mobile devices. Some e-commerce platforms go even further and also invest in creating their native applications for iOS and Android, but for many small businesses, it may appear not affordable or even not reasonable. Anyway, the product page, as well as the rest of the website pages, should be responsive and mobile-friendly, no matter if the native app exists or not.Minimalistic product page for a fashion brand e-commerce website focused on photos, easy choice of color, and responsive to be used on any device.404 ErrorWith product pages intensively used and often updated, there are different cases of running into an error. People can accidentally mistype a letter in the URL, or the page they saved before may not already exist as the product is already out of stock. Make sure not to let customers come across an empty error page and go away. Connect them to other pages, offer relevant options or categories, and do everything to take advantage of the error page involving a customer checking something else.Bottom LineSure, the decision on the design practices to choose for a particular e-commerce project is a matter of thorough thinking, and the solutions on what to use and what to leave will be based on many subjective factors, from the type of product and market segment to the company budget, employers’ skills, individual tastes and specific needs of the target audience. The approach to mass-market e-commerce differs from the approach to a narrow niche. The approach to various generations of customers will be different.Yet, all the practices mentioned above won’t work properly if the major condition of the commercial world is not followed, which is: the product should be good above everything else. All the other steps, investments, and practices make sense if the website sells quality goods and makes a website or app its channel of sales, not the place of lies and tricks. Anyway, if the products you offer are good and the customer is already on the website, let the product page show the item in its best light and help the shopper to feel it like home, convenient, clear, and friendly.Useful ArticlesHere’s a bunch of articles to dive deeper into the theme of usability and user experience design.UX Design: Types of Interactive Content Amplifying Engagement5 Basic Types of Images for Web ContentUX Design for E-Commerce: Principles and StrategiesUser Experience Design: 7 Vital User AbilitiesMotion in UX Design: 6 Effective Types of Web AnimationTypes of Contrast in User Interface Design5 Pillars of Effective Landing Page DesignHow to Make Web Interface ScannableThe Anatomy of a Web Page: Basic ElementsError Screens and Messages: UX Design PracticesWeb Design: 16 Basic Types of Web PagesOriginally written by Marina Yalanska for Tubik BlogWelcome to check designs and art by Tubik via:WebsiteDribbbleBehanceTubik ArtsProduct Page Design: Handy UX Tips and Practices was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to create a perfect landing page

Trends, tips, checklist.In 2021, landing pages and sites, in general, are not the only and definitely not the main communication tools. There are channels in Telegram, social media communities, chats, stories, video channels, and a million other tools. And you need to be able to manage all this orchestra. But the site is still the place where you host your brand, and the landing page is one of the main points of contact with a visitor.This landing page checklist is our internal document, that naturally formed over several years. And we are happy to share it with you. There are no revolutionary ideas and secrets of “how to do it quickly and cool”. But there is a complete algorithm for creating a decent working page that will help you tell about the product and launch its promotion the right way.The described order of actions can be applied to any communication tool, but for simplicity, we will analyze it by using the landing page example.Search engines have learned to better emulate the user’s interest. SEO strategies are increasingly focused on the behavior of a living person, rather than search engines. For instance, ”Korolyov” (a deep neural network-based search algorithm by Yandex) looks for the answers not only by words but also by the meaning. This means the commercial text can now be as natural as speech.Use simple language. Write so you can answer all the questions from the user — as if they’d asked you all these questions themselves in the chat. You can start like: “Hi, John”, and continue the letter to your character. When you finish, just erase the intro, and the letter will become more human.Show everything that is useless to describe in words. Demonstrate the product as if the users themselves held it in their hands. Video content has already become something ordinary: today, if you have something to say, you turn on the camera on the phone and just tell about it. You get the content straight away, and you place it on the site, on Facebook, on the Telegram channel, or on the landing page. And only then, if this approach worked well, you order the content from professionals, so that your following videos are spot on.ChecklistWe understand what questions we want to answer the user.We picked a simple, emotional, and understandable headline — the user can understand where they are at, how it is called, what they are being offered. We avoided double meanings. The reader understands what the benefit of this page is.We understand what the barrier is that prevents a user from accomplishing a targeted action. Their doubts, a source of distrust, a problem.Found arguments for overcoming the barrier. Removed meaningless slogans, found facts. Have made the main answer to the main question visible.We compared our page with references, took the best from them, and understood how we are going to stand out against them.We offer the user a benefit, before demanding action from them.We don’t put the user in the pose of Buridan’s ass and we ourselves offer the best option for this person.We have built an interesting story from the content that helps to overcome the barrier.We clearly offer the user benefit by adding a benefit button.Found the arguments that the user will believe, such as customer reviews.We use video for the demonstration, especially if we need to evoke emotion, explain the process or create a need.We replaced the text, that explained a certain structure, with a scheme.A good site today is not one that is well programmed or has a trendy design. The emphasis has shifted to content and analytics because anyone can create a working and good-looking site.To learn how to do this, read the article “Landing Page Design Best Practices” on TopTal. Unlike in 2014, the website builders now are really convenient.If you need a site for testing a hypothesis, just open Tilda or Webflow, select a template, find a couple of pictures on the Internet and write a couple of simple sentences. It’s fast, free, and no designers or programmers will be harmed.Another thing is that a good designer primarily works on the script and argumentation, and he or she can be entrusted to fill this checklist with the content. Or you can do it yourself if you have enough time.Pay more attention to a competitive structure that will fit well into the user scenario, and to useful content that will answer all the questions. Such a site will work and sell well, even if it’s been built in a day using a free template. It’s much better this way than with a fantastic layout, but without answers to the questions.ChecklistThe page has a clear hierarchy: contrast and subordination.The user sees a noticeable and clear call to action.There are no blocks of the same importance on the screen.There are no random intervals, colors, and font sizes on the page. There is a simple and clear system of visual techniques.We did our best to use fewer fields in the form, words in the headline, words in the text, design elements, columns in the layout (have already tried one column), transitions to other pages, borders in the design.We removed captcha from absolutely everywhere.The main rule is simple — try to get rid of everything that doesn’t help the main person to make the main action. And it will become better.A little tip: after you have thrown out all the unnecessary stuff, try to get rid of something else. It will get even better.And why do you need designers and developers for?UX-designer is the very person who will help you to go all this way. Because designing behavior scenarios is a much more important part of designers’ work than drawing some “beauty”.After you have confirmed or refuted the first hypotheses, you can realize (usually that’s exactly how it happens) that you need to do something that the ready tools can’t cope with.Or you want to add even more “beauty” to the page. Or (most often) it is necessary to incorporate some pieces of business logic into the script. And that’s when it’s time to call a designer and a programmer, that is, to order web development from someone like ourselves.To be honest, when a client comes to us with an unverified hypothesis, we usually suggest: “Let’s do a quick test with Webflow first? And when we will see how it actually works, then we can spend more time and money”.To check the effectiveness of the page, it is not enough to just install the web counters. In order to get the full picture, we recommend adding tags into the site code and setting up Google Analytics and Yandex.Metrica interfaces.Apart from that, new tools for automating data collection and analysis have emerged over the past three years:- Google released Google Data Studio and allowed access to it from Russia — you can pick different sources and visualize the data as you like;- Google Analytics has got a Cohort Analysis with good guidelines in Russian and English;- Yandex.Metrica has learned to work with offline conversions and explained how to send calls to the Metrica;- And also, Metrica can now build reports on cross-device conversions.In general, web analysts have become less dependent on developers. And if in 2016 many of them still ignored Google Tag Manager, today they prefer to manage tags and configure mobile apps for marketing programs independently, without the help of programmers.As a result, the analysts have learned to analyze the actions of users more deeply and began to calculate the economics of clients' behavior: not just conversion, but how much is earned on a particular client, in euros and cents. For instance, we at JetStyle have switched from performance marketing to a more effective model — unit economics. Now we operate with such terms as capital turnover and final profit. We can calculate revenues from a single user more accurately, and therefore clearly understand what is happening in a specific segment of the audience, where we lose, and where we earn.ChecklistWe have set up the analytics systems. (If you haven’t installed Yandex.Metrica and Google Analytics to your site yet, do it immediately).We have linked Yandex.Metrica to Yandex.Direct to get more accurate data, including the information about expenses. And we have linked Google Analytics to Google Adwords.Identified macro conversions — the main purposes of the site: sale, call, application, use of the test period.Selected micro-conversions, which show the interaction of the potential client with the page, and intermediate steps towards the main goal: subscription to the newsletter, download of the user’s manual, switching to a specific page, and so on.Set up tracking of macro and micro conversions on the site.Decided whether we need call tracking. If we didn’t implement call tracking, then we have, at least, set up sending requests from the site and track the viewing of contacts.We have checked the settings of the analytics systems: the web counter is set correctly, the data is collected properly, the information about the target actions is collected, the requests from the site are not lost along the way.The landing page will not bring any sales if the technical subtleties fail. The success of the campaign also depends on how fast the page loads, how it looks on different screens, whether or not it will look too small on an iPhone 5 display. You don’t need to check anything manually or by sight anymore, as there is a specific tool for almost every item of the technical checklist.ChecklistThe page loads quickly.https://tools.pingdom.comhttps://developers.google.com/speed/pagespeed/insightsThe page is displayed correctly in common browsers. It’s a good practice to support the browser if at least 1% of your audience has it installed.https://testmysite.withgoogle.com/intl/en-gbThe page is correctly displayed on various devices (desktops, mobile, tablets).https://testmysite.withgoogle.com/intl/en-gbThe forms work, the applications come to the recipient.(you need to check by hands that they do come)The goals set in the analytics system work well.https://yandex.ru/support/metrika/reports/add-goals.xmlhttp://context-kill.by/blog/kak-proverit-celi-v-google-analyticsThe most common mistake is to publish the page and then just hide and wait for the results. Tell everyone about it!Your challenge is to bring as many visitors as possible to the landing page. But not any visitors, they should be your target audience — to not just look around, but buy or perform another action.Start with contextual advertising — it is work with hot demand, which means that you show the ads to those who are already looking for your product or service. Traffic from a correctly set up context will always be the highest converting one. But it is always not enough of such excellent traffic, you will soon want more.And then you should add targeting to your advertising sources. This traffic has a lower conversion rate. With the help of the targeted adverts, we create demand: we show the ads to people who have not asked for it. Nevertheless, this will bring more benefits than just some media advertising, which can be seen by everyone.ChecklistWe have checked the ads — all banners correspond to the landing page’s message.We made sure that we have linked advertising services to analytics systems — Yandex.Metrica to Yandex.Direct, Google Analytics to Google Adwords.We use UTM tags. We have introduced a single standardized system of the UTM tags to monitor the effectiveness of sites, ads, audiences.We have set up a collection of retargeting audiences before the launch of the advertising campaign.NB! When launching an advertising campaign, we recommend that you immediately set up the function of collecting retargeting/remarketing data and set up retargeting campaigns to show the ads to those who visited, but did not send an application, in Google Adwords, Yandex.Direct and social media.We are keeping an eye on the conversion. We look at the WebVisor and heat map data to understand how visitors behave on the landing page. If users can’t see some elements at all, for example, they don’t scroll down to them, then we correct the structure.We segment the traffic. We define segments by various parameters — resolutions, browsers, devices, etc., — and look at the differences in the conversion. If we see something that gets out of the picture, we look for the cause. We had a case when the site conversion on the desktop was twice as high as on the mobile. It turned out that there were a lot of CTA buttons on the desktop and they were always in sight, while there was just one button in the mobile version, and it was only at the beginning of the page. As soon as we fixed it, the situation improved immediately.We analyze the feedback. People from the landing page call to the call center, send an e-mail or a message on our Telegram or social media. We can see if managers and technical support staff answer the same questions from the users over and over again — this means there’s clearly not enough of this information on the site. We go back to the first two steps of the checklist and edit the message on the page.— — — — —Today there are more and more automation tools in each sphere that can do half of the work for you. And it’s already quite obvious that it is the development of a scenario in statements, facts, preparation of the content — that is what is needed for a high-performing landing page and that is what it’s really worth paying for. For the idea and its implementation, and not for the technical execution.In this sense, design agencies, numerous studios, bureaus, and digital companies will increasingly take on the role of producers and content providers, rather than just technological contractors. This is how we see the future.Follow us on Facebook to get the latest updates or visit our website jet.style.How to create a perfect landing page was originally published in Muzli - Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Chokhmah, Axiom's Vessel by Peter Mohrbacher

The second Emanation. A vessel we use to carry experience itself. Chokhmah is the first moment a newborn child opens their eyes. That child’s first steps. The beginning of a lifelong journey whose path disappears over the horizon. Where Keter is the pen that hangs above the page, Chokhmah is the moment of contact. Descending from the summit of the Tree, we see its duality begin to form. Chokhmah sits atop the Pillar of Mercy, forming the first masculine aspect of the diagram and nesting with his partner, Binah. Their relationship gives us the power of comprehension.

Website Inspiration: r2studio.

Slick One Page portfolio (built with Webflow) for Germany-based outfit r2studio. Couple lovely touches in here. The header ‘Get in touch’ CTA opens up a modal with email, number, contact form and a coffee pouring video. And the About section features a lovely minimal layout of experience, work load and team member location. Full Review

Skyscanner — a UX case study

Helping people discover.Skyscanner is a leading travel search site, used by over 60 million people each month. The platform connects users directly with airlines, making it effortless to easily find and book the right ticket online.But Skyscanner is more than that. As part of their vision states —Skyscanner is a place where people are inspired to plan and book direct from millions of travel options at the best prices.Aiming to be a platform that inspires travellers, their clever search options allow you to fill in the gaps of your trip details that are still unknown.Imagine you have a long weekend and decide to make a short trip within set dates. Searching with ‘Everywhere’ as your destination, you are able to discover and compare destinations and base your decision on whichever criteria are most important to you.The challengeBut what if the opposite is true — you know your destination, but not your dates? Say, for example, that Singapore has always been on your bucket list. You decide to go on a seven-day trip, but are flexible in taking off days from work. Which option would be the most suitable for you?Answering this poses a couple of problems for the user. There is no option to search within a date range, neither is there a way to define the length of your stay. This leaves you with two search tactics:Choosing specific dates and performing multiple searches. In order to compare options, you’ll need to open several tabs (or have a pretty good memory).Choosing the ‘whole month’ as your date range ( while compromising on the range you’re really, specifically looking for). This shows you a graph with different prices for each day. However, the price of the return flight is determined in part by your departure date, which still leaves you with a manual process of clicking through dates and trying to find the best combination. On top of that, the graph visualisation doesn’t allow for comparing additional — possibly relevant — flight information.User story“As a travel fanatic, I want to be able to use Skyscanner to easily compare dates, times, prices and airlines for my seven day trip to Singapore — without having a specific date in mind [scenario 3].”Problem definition: there’s currently no easy solution offered for scenario 3.My goal is to be presented with an overview of the best flight options within a customised date range and trip length, from which I can choose and book my flight.User tasksThis means, I need to be able to:Add one or more origins as a search criteria;Add one or more destinations as a search criteria;Filter my search through flexible dates, aside from the options to select specific dates or a whole month (current options);Specify the duration of my trip;Specify the range (depart-return) I want to search within.User flow — outlining only a single flow (what happens if a user chooses option 1).Suggested solution1. General homepage improvementsStarting from the Skyscanner landing page, I’ve made a few overall improvements that help the user focus and avoid distraction.Current & New — General homepage improvementsGrouping — All alternative searches, such as searching with the map or looking for hotels or cars, have been placed in the upper navigation menu. By increasing the color contrast between active and inactive, these different options become more clear.Imagery and colours — Imagery is an important element that helps people to get inspired. However, when people have their mind set on searching for a flight, images should not compete with the search functionality to get the user’s attention. That’s why in the suggested solution, image usage is restricted to the space below the search area.Discovering — To help people refine their search for the perfect destination, a few holiday categories have been added, such as ‘Sun & beach’ and ‘City trips’. These can be refined according to further research.2. Search areaCurrent & New — Search areaClustering — to help guide the user through the search process, a clear distinction has been made between primary input and secondary options. Trip type, passenger numbers, cabin class and ‘direct flights only’ have been clustered together above the main search area.Below that, highlighting the active field will catch the users’ attention and encourage them to start. The entire search bar is reduced from five to three fields, in order to streamline the flow and make it feel less overwhelming. The departure and return date inputs have been reduced to a single field.3. Search flowSearch flow componentsComponents — Clicking on each of the fields triggers a corresponding component. When that happens, a light overlay will cover the background in order to focus the user’s attention. Options corresponding to that field (such as “include nearby airport”) have been included in the component rather than on the page itself, in an attempt to minimise clutter.Search flow — flexible datesFlexible dates — the key interaction in solving the user problem is the new option to select flexible dates. This is solved in the following way:Additional to ‘specific dates’ and ‘whole month’ a third option is added: ‘flexible dates’.When selecting this option, the user is prompted to specify their trip duration. This can be set to ‘any’, or a specific number of days.Finally, the user selects the range within which they want to search and clicks ‘apply’.Note that while a user interacts with the component, any given input is immediately updated in the ‘dates’ input field.4. Results pageCurrent & New — Results pageWhen the user finally clicks the search button, a selection of most suitable options is displayed.No redirecting — in the new flow, users are not being redirected to a new page where results are loaded. Instead, the search area is reduced in height, as results are loaded below. This also leaves the chance for users to ‘go back’ and change any of their search criteria, without leaving the page.Flight information — the displayed flight information is similar to when a user searches for specific dates. The only variable that now needs to be prominently present, is the flight date itself.Additional filters — these have been collapsed in an attempt to avoid clutter. Further research needs to show the possible up- and downsides of hiding these filters.Final thoughtsDue to time constraints, the pain points that were highlighted are based on my personal experience with Skyscanner and the assumption that this is a wider problem. Further research needs to show whether it actually is a common struggle among users. And of course, additional testing needs to be conducted in order to refine and validate the solution.Looking into many different flight search engines — Google flights, Hipmunk, Kayak, etc. — some of these attempt to make the ‘flexible dates’ case easier. However, there is not a single smooth solution yet. Possibly, technical constraints of search algorithms might have a part in this and need to be taken into consideration, too.Thank you for reading! If you enjoyed this case study or have any feedback, I’d love to hear from you. Say hello at contact@sanne-devries.com or connect on LinkedIn. (Note: I’m in no way affiliated with Skyscanner, just a happy user of their product!)Skyscanner — a UX case study was originally published in Muzli -Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.