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 […]

Daily UI #028 Contact us page

Contact us page where you can send a message and find out more. <3

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 […]

Chungi Folio Contact Page

Friday friends, We are very pleased to receive a lot of positive feedback on our latest project for Chungi Yoo — Germany-based art director, graphic designer, and illustrator. This means a lot to me and folks at Synchronized Studio 🙏🏻. This is the contact section designed to keep up with the overall playful and easy-going vibe of the site. As you might remember, this website is nominated on Awwwards. If you haven't yet had a chance to vote — please support us ❤️

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

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

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

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

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.

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

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.

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

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.

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.

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 […]

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.

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.

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.

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

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.

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.

Bill Split App UI

Hey Friends 👋 Here is Bill spliter app UI concept, hope you are gonna love it. 😘 If You like it Then Press F or L to show some love and don't forget to comment. A Quick tip for you, Its morning so eat bnnana for good and health day 🍌 🍌 🍌 Feel free contact us - helloui.Amjad@gmail.com Follow me on Instagram : My Instagram Page Thank you

BRENDA Game Web Landing Page

BRENDA Game Web Landing Page Included 3D Modelling&AnimationPress "L" for love ❤️UI/UX, Development, Illustrations, 3D Modelling&Animation - Let's keep in touch!Contact: hello@karakaya.coWebsiteInstagram

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.

Cryptocurrency Landing Page

Cryptocurrency Landing PagePress "L" if you like it. ✉️ Have a project idea? I am available for new projects.Do you have any project ?Feel Free to Contact me :masum24y@gmail.comContact for Team:itobd2019@gmail.com🔥 I will provide a quick analysis and a free proposal for it. Don’t worry, it is secure and confidential.

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.

Warts - Fashion Webpage Hero Design

Hi there, It's Only a hero page of a fashion webpage. Attractive and minimal. It's a Shopify webpage. I designed this page by photoshop. Hope you guys like it. For more you can contact me here: faysalrabby75@gmail.com https://www.uplabs.com/fleming_283 For Download: https://www.uplabs.com/posts/warts-fashion-webpage-hero-design Thank You.