Contact page design examples

Designing A Usable Contact Page In WordPress: Tips & Trends

Every great website needs a contact page. You can set this up on a static HTML site or a CMS like WordPress which offers a lot of flexibility &... The post Designing A Usable Contact Page In WordPress: Tips & Trends appeared first on Onextrapixel.

7 contact page design tips your visitors will love you for

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

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

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

Leno

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

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

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

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

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

Browny

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

Expert

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

Template Review: Start Lite

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

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

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

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

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

Template Review: Cayce

Cayce is a free One Page personal template built using the Carrd website builder platform. Features include a centrally-divided layout, a unique boxed content area leaving lovely breathing room around the page edges, social media icons and bonus off-canvas content areas for about + work + contact. 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

SiteClub

One Pager (built with Squarespace) promoting a unique website development service called SiteClub, where $480/mo gets you a 7-page site. Very cool how they position where you are now (including emotions) and where SiteClub will take you. Please note I’ve accepted the Contact page link in header, as it acts as a calendar onboarding without a contact form, so within the rules. Full Review

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

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.

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.

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

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

AR VR page

Hey Dribbble fam! Our friends at @[110168:FS Studio] asked us to quickly design a landing page for one of their services. Here's what we ended up delivering. Press ♥ for l’amour and catch ya’s later! -- Work with our team!

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

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

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

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

Contact page

Contact Page for Figma

Personal Portfolio

Hello Community, Here is my another work . Its a landing page about personal portfolio . Hope you'll find it interesting. would love to hear your valuable feedback about the design :) ---------------------------------------------------------------- Share some love by pressing 'L' if you like this shot 🙂 Looking for UI app design? Learn more about our works here and contact us: getironsketch@gmail.com ----------------------------------------------------------------

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

UI Agency

Hello Guys, Today I'm sharing an agency landing page web design concept which is modern, colorful UI and user-friendly. I hope you will like this concept. ---------------------------------------------------------------- Share some love by pressing 'L' if you like this shot :) We are available for Projects. Estimate your project at contact@teamoreo.com. ---------------------------------------------------------------- Follow us to see our future works :)

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.

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.

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

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.

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.

Architecture website

Hello Awesome Designers! Here is my new design concept of architecture landing page. Your's feedbacks always welcome here :) ====================================== Do you have any project that you need get going? Contact us: info.droitlab@gmail.com ______________________________________________ Follow us on Behance | Instagram | Uplabs Thanks a lot for watching!

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.