In this round of the series, we have a tool to create nice realistic shadows using CSS3, several new frameworks and libraries for React.js, and PHP.
Without further ado, let’s jump in to see the full list.
Shadow Palette
A little GUI tool that allows you to create a more realistic drop shadow for your website. You can customize several of the shadow properties such as the light position, color, and opacity. The tool will generate the CSS rules that you simply can copy and implement on your website.
Firefox Relay
Relay is a service from Firefox that allows you to create an email alias of your real email address. You can create several email aliases of one email address, and use them when signing up on websites like e-Commerce, membership, and subscription, etc. It’s a great service to protect your online privacy further.
SVGCode
A little online app to convert raster images into SVG easily. The tool supports several image formats including JPG, PNG, and WebP. It’s built with the “Progressive Web App” approach, which means even if you’re offline, the app is still going to work. Simply drag-n-drop any image onto the app and it’s all set.
A simple framework to create a reactive application using PHP. Internally, it leverages some PHP extension like Coroutines and Fibers (available since PHP8.1) to handle the concurrent and async operations akin to Node.js. You can use Framework X everywhere that runs PHP including shared hosting.
Shopify Hydrogen
Hydrogen is a new React.js framework from the team at Shopify. It comes with building blocks to create a custom Shopify storefront such as utility functions, custom React.js hooks, and components.
If you’re looking to build a Headless store with Shopify, this framework has got you covered with the necessities.
Frappe Charts
A lightweight JavaScript library to create a chart. You can install it as an NPM module or simply load the JavaScript file on your webpage like in the old days.
It supports several types of charts including bar and pie charts. It’s also responsive and fast since it is not dependent on other external JavaScript libraries.
Chrome DevTools Recorder
Google Chrome has just made an improvement to the DevTools with a feature called “Recorder”. This feature allows you to record your website interaction.
You can replay the recorded interaction or emulate it with certain environment and conditions. It provides a better measure on the real web application performance. This feature will be shipped as a beta feature on Chrome 97.
Remix
Remix is a new full-stack React.js framework that provides an abstraction to build a better website. It handles routing, error requests, and other tiny details of building a website with great user experience — out of the box. The framework will help web developers become more productive.
Redux Toolkit
An official collection of tools from Redux that aims to make developing a website with Redux more efficient. It includes some utility functions and configs for common use cases.
This way you can be more productive, instead of befuddling with the configurations and the boilerplates, which can be a bit cumbersome.
Bulletproof React
A collection of tips, advice, and best practices for developing React.js application. Here you will learn a lot of topics surrounding app architecture, project structure, styling, state management, and a lot more. If want to improve your React.js skills, you should definitely have it bookmarked.
Apache EChart
An open-source initiative from Apache, EChart is more than just a chart JavaScript library. It’s a robust collection of interactive charts with animations, and with an overall better visual. This allows you to convey the data to the users better than a static chart.
Awesome Design Tools
This resource contains a massive list of tools for designers from various categories. Here you can find tools for accessibility, prototyping, sketching, stock assets (icons, photots, etc), and a lot more. I’m pretty sure a lot of designers will find this list extremely useful.
Localstack
Localstack is a fully-functioning local AWS cloud stack. This means you can develop, run and test your AWS application offline. It supports a number of AWS services including AWS Lambda, S3, DynamoDB, Kinesis, SQS, and SNS.
Having AWS stack run locally will help you speed up and simplify the testing and development workflow of your application.
Founder Resources
A collection of resources like tools and content for those who’d like to start their journey as a business or startup founder. Being an entrepreneur is not easy. So get this list bookmarked and get prepared.
EmailValidator
A PHP library that makes it easy to validate an email address. It provides several methods of validation including validation through the email RFC, DNS, or you can also write your own validation.
Docker OSX
A Docker image that allows you to run a container with macOS. This is another cool stuff to help effectively test your application and ensure that it runs across different platforms.
Fonoster
An open-source alternative to Twilio. It allows you to run a stack application from VOIP, SMS, mail, chat, and video on your own server. A great alternative for those who’d like to have full control over their platform and the data.
Freescout
Freescout is a lightweight help desk application built with Laravel. You can use it to help and manage your customer tickets, mailbox, and conversations. It’s open-source, free, and packed with features.
Freescout is overall a great alternative to the paid-platform app like Zendesk and Help Scout, especially if you value and need control over your data.
Laravel Tenancy
A robust PHP library to set up multitenancy in Laravel. This allows you to run a single Laravel application with multiple database connections. It works seamlessly and works out-of-the-box with several popular Laravel packages like Vapor, Nova, Livewire, and a lot more.
SwiperJS
A modern JavaScript library to create a slider. Designed and intended to be used on mobile websites and apps. SwiperJS is framework agnostic which allows you to use any framework including jQuery and Zepto.
On top of that, it also provides official integration that allows it to work out-of-the-box with some of the most popular modern frameworks like Vue.js, React.js, Svelte and Angular.
The footer is the area at the bottom of your website, and it’s often overlooked by website owners. By checking out great website footers, you can get design inspiration and improve your footer.
In this article, we’ll show you some of the best footer design examples and offer best practices and tips to help you take action.
Why Is a Good WordPress Footer Design Important?
The footer is the area of your website that appears at the very bottom of the page. It will normally be on every page of your WordPress website.
Here’s an example of our footer on WPBeginner that millions of readers see every month.
Since it’s located at the bottom of the website, most beginners forget to optimize this area.
However, your website footer is a very important area of your website. It lets you show important details and final takeaways in one place.
By customizing your footer, you can improve the overall user experience of your website and even optimize your site for WordPress SEO.
Plus, visitors who scroll to the bottom of the page are very engaged, so you can capture their attention with a call to action, email subscribe box, or send them to the most important pages on your website.
That being said, let’s show you some of the best footer design examples and best practices to optimize your footer.
Best WordPress Footer Design Examples
We’ve rounded up some of the top footer design examples to help you get design inspiration for your own footer area.
1. WPForms
WPForms has a footer with all kinds of useful links. You’ll find links that go to the most helpful company pages, top features of the plugin, and useful WordPress links.
This ensures that when the reader gets to the bottom of the page and still has questions, they’ll find the exact resources they need. There’s also a floating alert bar at the bottom of the page with a call to action.
2. OptinMonster
OptinMonster has a footer that offers readers links to important company pages, top features, helpful product links, and much more.
It also has simple social media icons, trust icons, and a company logo for branding purposes.
3. Neil Patel
Neil Patel has a compact and straightforward footer that offers readers quick navigation links. The footer menu is the same as the navigation menu at the top of the site.
Plus, readers have the option to follow Neil Patel on social media as well.
4. Michael Hyatt
Michael Hyatt has another simple and compact footer. It highlights the copyright date, easy social sharing buttons, and links to pages like terms of service and privacy policy.
Directly above the footer, you’ll see a call to action to download a free guide, which can convert a lot of visitors that make it to the bottom of the page.
5. ReddBar
ReddBar is a WooCommerce store with a footer that encourages email sign ups. Directly above the footer links, there’s a massive sign up box for readers.
Some of the helpful links include a link to their FAQ page, contact page, wholesale pricing page, and more.
6. Reader’s Digest
The Reader’s Digest footer contains a lot of information for visitors. You’ll find links to their category pages, other company brands, social media sharing buttons, and more.
Plus, there’s an eye catching email sign up box to encourage visitors to join their email list.
7. IsItWP
IsItWP footer has a quick section on what the website is about and links to other sites and company pages.
It also has a very unique site links drop down that lets readers click to find the exact type of content they’re looking for.
8. Born Fitness
Born Fitness has a very minimalist footer that focuses on helping readers find the information they need. There are links to their premium services, free resources, and company pages.
Plus, there’s a search bar to help visitors find what they’re looking for, along with social sharing buttons.
9. Printing New York
Printing New York is an online store that ships worldwide. The footer highlights their address, services, and popular products.
They use the structure of their links to help boost their local SEO and search engine rankings.
10. Nalgene
Nalgene has a clean and well organized footer section. Directly above the footer, there’s a simple email sign up box.
After that, there are well organized links to help visitors find the exact products they’re looking for, along with company related links.
11. ProBlogger
The ProBlogger footer has links to their most popular posts, top resources, and new jobs posted on their job board.
There’s also a big email sign up form directly above the footer, and a small footer navigation menu with the same menu options as the header navigation.
12. Custom Seafoods
Custom Seafoods is a popular eCommerce brand that has a very different footer. Instead of including navigation or page links, they only feature an email newsletter sign up box.
Although it’s different from most other brands, a minimalist footer like this can convert well, since there are no other distractions or actions the visitor can take.
13. The Next Web
The Next Web has a footer that stands out from the rest of the website. It has social media sharing buttons, links to important pages, and more.
You’ll see a social proof section directly above the footer where they feature logos from popular brands and websites they’ve been mentioned or featured.
WordPress Footer Design – Tips and Best Practices
There are a lot of ways you can improve your user experience and create a better footer for your WordPress blog.
Let’s take a quick look at some of the best practices to keep in mind as you edit your website footer.
Include Your Business Contact Information
Having contact information listed on your site is essential. You should have a separate contact form page on your website, so your visitors can get in touch.
However, the footer is also a good place to include your contact information, especially if you have local customers who will be looking for your physical address.
For local businesses, the more you ways you can feature your contact information, address, and even business hours, the better.
Add Links to Important Website Pages
It’s important to have clear navigation across your entire website. That’s why it’s so common for websites to include links in their footers.
You can add links for your most important product pages, top blog posts, about page, and more.
Think about the most valuable pages on your website and what your visitors will find the most useful.
Adding and optimizing your links can also give you an SEO benefit and boost in your search engine rankings.
Add Social Proof to Improve Conversions
One thing you may have seen certain websites do in their footer is add social proof. This can help to earn your customer’s trust and position you as an expert in your space.
It can be as simple as a customer testimonial or logos of popular websites you’ve been featured on.
Here at WPBeginner, we highlight logos of popular websites where we’ve been featured directly above the website footer.
Add a Call to Action
When your visitors get to the bottom of your website, you’ll want to tell them the exact action they should take and how they should do it.
For some websites, this will be a call to action to sign up for their email newsletter. For others, it will be links to explore popular product features, or even a call to action button.
Your footer is the last chance to get your visitors attention and encourage them to become a subscriber, customer, or simply spend more time on your website.
The post 13 Best WordPress Footer Design Examples (+ Best Practices) appeared first on VVDesigns.]]>But, sometimes, life happens and you have to work alone on a project. Be it a specific technology, budget reasons or something entirely else, it doesn’t really matter. Working alone doesn’t mean it’ll suck or be really stressful if you keep yourself in check.
I worked on a couple of projects as a solo frontend developer, but I rarely had the feeling like I couldn’t do it or that I maybe didn’t learn as much as I could have. If you “act” like there is a whole team involved (or that someone new will be joining you on the project), that can force you not to take shortcuts and do everything properly.
Don’t be lazy
Avoid shortcuts
It’s really easy to skip a couple of steps when working alone because, honestly, is anyone going to notice? The answer should be yes, you’ll notice it!
Opening a pull request that will be merged to master immediately might seem illogical, but having everything consistent will surely help you out in the long run. On top of that, you might notice something wrong when you’re doing a once-over.
Keep your code neat
Keeping your code neat is something you also shouldn’t skimp out on. Linters, prettiers and everything else should be setup as if you were in a team!
Be your own QA
Writing tests is a no-brainer. It’s always a great relief knowing that stuff works even after a refactor. Not having to constantly think about that will allow you to focus on more important things! That shouldn’t change even if you’re working alone.
Documentation!
It might be boring, but if you don’t do it, nobody will. At a first glance, it doesn’t seem important since you’re the only one that will be reading it. I can tell you that I know for a fact that the future you will thank you for it. It’s unrealistic to expect you’ll remember every little detail, even though you’ve written everything yourself. Having a good documentation means that some of the mental burden can be relieved because you can refer to it at any time.
Heck, something might even change within the project and your new teammate will be even faster with the onboarding.
Ask for help
Collaborate with other frontend developers
I have the benefit that there are other brilliant teammates on other projects. They might not know the domain of my project, but they can offer technical help if you explain it to them. Try to make it easy for them to understand it, and I’m sure that you’ll get new insights. The same goes for asking for help online. Just because you’re alone on the project doesn’t mean that you have to do everything by yourself.
If you have work colleagues, it’s not a bad idea to assign them on a pull request once in a while. You might be surprised how tunnel-visioned you can get!
Learn about the domain from backend
If there’s a backend, I’m sure you can discuss domain issues with them, as well. They probably know a lot and it’s a good idea to double-check with them. You might learn about something you weren’t aware of!
Improve wherever you can
Now that you’re alone on the project, you can do anything to improve your development experience. If there is a task that needs to be automated, why wouldn’t you automate it? If you can get the budget for it, you’ll save time and you’ll learn something new. This is a great opportunity to make up for not learning from your teammates. Something that a senior colleague always set up can now be done by you. It might seem daunting if it’s out of your comfort zone, but hey, how else are you going to learn?
From personal experience, these situations taught me some skills I would rarely have the time to research in other projects.
By sticking to these tips, I’ve been able to maximise my learning and do quality work as much as I could. Not having a teammate doesn’t mean that you really have to be isolated from everything else. And, who knows, you might even get someone working on a project by your side so you want to be proud of what you’re capable of doing all on your own, right?
The post How to work as a solo frontend developer appeared first on VVDesigns.]]>The design of blogs and other online publications needs to encourage people to stick around and explore the content. It should improve their reading experience, increase user engagement, and keep them interested in what a certain platform or individual has to offer. The site’s design needs to mirror the quality of the articles, and so the designers need to find a way to present valuable information and a large number of articles in a visually appealing fashion.
The look of the following blogs and magazines is inspiring and captivating, artfully commanding the users’ attention. These examples are a true visual treat. No matter how aesthetically different they may be, they all have one thing in common – astounding design and beautifully organized content that allows readers to quickly and easily find what interests them the most. The publications we will discuss include:
Surface
Surface is a magazine that covers design, architecture, art, travel, and fashion. The content on their website is organized into three columns. The one on the left includes a slideshow of a few featured articles, with large images instantly capturing your attention. This part of the screen is non-scrollable, with article previews changing automatically (or after you press the designated arrows). Even if you start scrolling over this area, the action will only impact the column in the middle, which features significantly more articles than the section on the right but also smaller photo previews. And lastly, the collection of top stories is displayed in the column on the right-hand side of the screen with no pictures whatsoever. This kind of a layout is a bit unusual, especially because each column is essentially an individual element. The design of some of the inner page layouts is similar to that of the homepage, with fixed images in one part of the screen and scrollable sections in the other.
NYLON
NYLON is a popular magazine that covers fashion, music, and entertainment news. The background in the top section of the homepage is in a zestful orange shade. It resembles a badly glued poster, with all its crumples and folds, ensuring a powerful and unusual opening to the site. The orange then melts into a white canvas, filled with large, uppercase, serifless typography and gorgeous imagery that illustrates the content of each article. The homepage seems to be never-ending – the more you scroll, the more articles pop out, ensuring you never run out of material to read. The design of the fullscreen menu mirrors that of the opening section – it looks like a wrinkled white poster with the menu links displayed in a light grey shade. When you place your mouse on a page, the letters become black. Moreover, some sort of a seemingly hand-drawn scribble appears behind the selected word. The same effect can be seen on the homepage, next to section titles, giving the site a slight alternative vibe.
Gaffer
Gaffer is a magazine that publishes articles on fashion, football, music, and lifestyle. The homepage starts off with a fullscreen image slider, where each photo represents one article. You can only see the title of the article in question displayed on the picture, but in combination with the large, engaging visuals, that’s enough to lure you into reading more on a particular subject. In general, the powerful images are the most prominent element on the site and their irresistible allure is what stands out the most and encourages you to read the articles. The content is presented in several different ways. It goes from being featured in a slider and displayed in a masonry layout to carousels and several articles displayed in one row. The diversity in the content organization makes the page more immersive and fun. As you scroll through the homepage, the black background changes into white and vice versa. Elsewhere on the site, the designers colored entire pages in one of the two hues. The neutrality of both colors is the ideal backdrop for the vibrant imagery, perfectly enhancing the appeal of the colorful visuals. The website doesn’t include any wild animation effects, letting the beautiful content do all the talking.
Materia Press
Materia is a cultural publication with “uncommon content on art, design, people, and places in the Americas”. The site opens with the magazine’s logo in gigantic, mostly serifless, uppercase letters. The letter “M” is the only one in a cursive, lowercase font, softening the robustness of the surrounding typography. After the first scroll, the logo becomes slightly smaller in size, making room for the article previews. The featured photographs vary in size, ranging from full-width to mid-sized and small. The prevailing visual discrepancies make the page all the more compelling and appealing to the viewer’s eye. The dominant all-caps, sans serif typography gives the site a contemporary vibe. The hover effect helps further immerse readers into Materia’s content – when users place the cursor on an image, a slight zoom-in effect activates, bringing the visuals closer to the observer. The inner pages are equally impressive as the homepage, combining sans serif and serif fonts with alluring photos and videos into an irresistible magazine experience.
NOFILTER. SPACE
The header and the top section of the homepage on NOFILTER. SPACE evoke a brutalist vibe. The large, serifless, uppercase typography and the combination of black and white make the site appear raw and simple. The site’s brutalist character is further amplified by the interesting imagery which enlivens the homepage. The same aesthetical robustness of the header can be seen on the “About” page (it includes just text and no images). The inertia of the colorful photographs on the homepage is broken with animated visuals placed against a zestfully green background, introducing the readers to some of the magazine’s philosophies. The color alone is enough to capture the viewers’ attention, with the letters that move in every which direction sealing the deal. Inner pages include very large photos that are a terrific way of grabbing the users’ attention and encouraging them to read the texts.
Losko
Losko is an online magazine that focuses on contemporary design, architecture, and art photography. They also publish biographies of inspiring creatives in these fields, sharing their stories and as well as their most notable works. The website is beautifully organized, clean, and very easy on the eyes. The fixed menu, rich with grids, is placed in the header. It comprises several sections that facilitate website navigation, but perhaps the most amusing part of the menu is the “Случайный пост” button, i.e., the “Random Post” button. On click, it opens a random article, allowing readers to have more fun while exploring the site’s content. The section below the header includes a slider with gigantic article previews. The first thing you’ll notice are the full-width photographs and big titles, inviting you to read the articles. In some parts of the homepage, articles are presented in a gallery layout, while in others, grid lines separate the selected blog entries. Towards the bottom of the page, you’ll also come across scrollable and fixed areas placed one next to the other – on one side, there is a string of article previews you can browse through, while on the other, you’ll see links to Patreon and the magazine’s profile on VK. These links stay on the screen as the articles continue to move one after the other on scroll. The fact that articles are presented in several different ways on the homepage means that you never really know what the next scroll will bring into the viewport, and that makes the Losko magazine more alluring and interesting to explore.
Blog & Magazine Themes
Behold
Buzzy
Journo
Creative Magazine & Blog Theme
CC/magazine
CC/magazine specializes in travel, art, design, culture, gastronomy, and lifestyle. The background on all pages is in gorgeous, pastel shades that alternate with pure white surfaces. Sometimes, the site opens as a combination of soft orange and white hues. On other occasions, it blends pastel blue with white. In either case, the contrast between pastels and the white color provides a terrific base for the designers to experiment upon. The colors and the clever typographic choices that unite serif with sans serif fonts make this website highly enjoyable to explore. The contrast between the bold and regular typefaces as well as the vertically positioned dates contrasting the horizontal titles further amplify the layouts’ appeal, creating a highly exciting environment users are sure to enjoy.
Latitude
Latitude is a publication that delves into the topics of cannabis, art, equality, sex, and much more. Considering the content, the magazine is intended only for those of legal age. So, before you access the site, a lovely, pastel green pop-up will appear on the screen, containing a question about your age. Once you get in, the colossal “LAT” taking up one half of the screen captures your eye. The other half of the page contains a brief introduction to the magazine. When you start to scroll, that’s when the real party begins. The Lat logo shrinks in size while an army of articles appears in the viewport. Lovely, artistic imagery and the combination of italics and standard fonts in titles lure you into reading the texts. When you hover over the images, the graphics disappear, and instead, excerpts or quotes from the text show up, further encouraging you to press the “Read More” button. On the homepage, the background is white, which is a great choice considering the vibrancy of the visuals. However, when you open the inner pages, you’ll enjoy the powdery pink, yellow, and green backdrops. The change of scenery is a great way of keeping you interested in the magazine, especially since the color of the background differs from one article to the next, setting a different tone for every text.
Cup of Couple
Cup of Couple is an influential fashion and lifestyle blog curated by Mike Madrid and Gabriel García. The first word that popped into my head once I opened the site is – serenity. A pastel color palette prevails on the layouts, making them appear delicate, sophisticated, and easy on users’ eyes. The homepage opens with an attention-grabbing image carousel that offers a preview of some items featured in the brand’s online shop. Elegant grid lines separate the content, ensuring each element has space for itself and gets an equal amount of attention. The designers have also embraced negative space, which helps enhance the site’s clean appearance. The homepage is image-rich, with the name of the product and the category it belongs to displayed beneath the photographs. The typography on the site is interesting, combining sharp, uppercase, sans serif typefaces with a refined serif font. When they click on an image, users are redirected to a project single page that includes large pictures and succinct copy, providing a beautiful and appealing introduction to the selected collection or product. All blog entries are tagged, which allows visitors to easily find the posts they are interested in.
Another Escape
Another Escape is an independent media company that champions outdoor lifestyle and sustainable living. The loading screen of this magazine shows a fullscreen photograph of the fresh, deep green flora, along with an explanatory text presenting the company to the visitors. The sticky menu facilitates the navigation on the site, helping visitors quickly jump to any page. Another Escape is all about encouraging people to (re)connect with nature and inciting them to protect it, and the design of their website is an ideal match to their mission. The homepage is quite minimal, combining large negative spaces between the displayed photos, cleverly organized images, and simple typography. Users don’t feel overwhelmed for a bit. Everything flows rather slowly, and calmly. The content subtly appears on the screen on scroll, gently introducing more issues to the viewer. In some sections, the content categories appear vertically displayed next to the photos, contrasting the horizontally-positioned titles and making the page more interesting to look at. Individual articles are rich with imagery dispersed throughout the entire pages, beautifully accompanying the featured texts and bringing them to life.
Wax Poetics
Wax Poetics is a publication dedicated to music journalism and discovery. Their website is a true feast for the eyes. The background is predominantly light grey with occasional black surfaces. Its texture is uneven and slightly rough, resembling that of paper, making people feel like they’re reading a print magazine. An image slider with expressive imagery and big, bold typography leaves an excellent first impression on the reader. The design of the mouse cursor is also something that captures the viewer’s attention. The pointer includes a blend mode effect, so when you hover over an element, it turns it into a negative. At the same time, some text appears within the circle, instructing users what sort of action they can take regarding the element they’re hovering over. The use of the mentioned massive, sans serif typography makes the titles particularly prominent, especially in combination with the more delicate, refined serif typefaces. On single article pages, an animated line appears across the letters. It looks like it was hand-drawn, and so do the lines that show up when users place the cursor over the menu links. This effect is, again, something that resembles the act of reading magazines in print, when we often mark and highlight titles and other elements that capture our attention.
The New Yorker
The New Yorker is a famous American weekly magazine. In the online version, they use the same font from their recognizable logo to display article titles. The refined and evergreen look of the typeface evokes the spirit of the old times when all we could read were the newspapers in print. A myriad of articles is showcased on the homepage, but you can easily navigate them by relying on a tagging system. In some sections, the articles are displayed as lists, with only their title, the name of the author, and the category visible. In others, they are arranged in a gallery-like layout, with complementing imagery illustrating the text. The article categories are displayed in red, which makes them particularly prominent on a white background. The site’s layout is ideal for all users, ensuring excellent navigation and readability. Inner pages don’t contain as many visuals as the homepage, but the gorgeous serif typeface ensures the text is easy on the user’s eyes.
Teeth Magazine
Teeth is a biannual publication that publishes articles on music, art, fashion, and culture. The most eye-catching element on the homepage is the sticky-on-scroll header. It is split into two parts. At the top, readers can see a part of the magazine’s logo and some of the menu sections, while the rest of both the logo and the menu appear at the bottom of the viewport. As they begin to scroll down the page, the header disappears. But if they scroll upwards, it appears again. This is a convenient UX solution, because, when people scroll upwards, they are usually trying to get back to the top of the page. By creating a practical sticky-on-scroll header, the designers have anticipated their needs, allowing users to go back to the top or jump to another section without too much scrolling. At the top of the homepage, there is a large showcase of one of the selected articles, followed by an empty, grey area. In fact, there are several empty sections on the homepage, and they behave as separators, creating some breathing space after a set of articles and giving the whole page a certain rhythm. This is a simple and elegant solution that ensures viewers don’t get overwhelmed by too many articles at once. Moreover, the light grey color makes these areas perfectly match the subtlety of the white background, with the two hues beautifully blending together and creating a coherent visual experience for users. The design of individual posts is amusing and engrossing. When users finish reading a particular article, the next one immediately appears on the screen, and then the next, and so on. There are no boundaries between the articles because these pages include the infinite loop effect. The list of all entries that belong to a certain category is displayed on the right-hand side of the screen, so users can click on a specific title or scroll and read all articles one by one.
HAJINSKY Magazine
HAJINSKY is a magazine that combines psychology with fashion. Their goal is to inspire creatives within the fashion industry to put people first. The site opens with a showcase of a featured article, with the visuals and the colors from the article in question stretching across the entire screen. The typography in the titles and headings is in all caps, but the serif fonts attenuate the robustness of the uppercase letters. The images used to present each article are all the same size, ensuring a visual congruence throughout the website. If you open the “Articles” page, you will probably feel like exploring an image gallery rather than an article directory. The background on every layout consists of several blocks of color, mostly in neutral shades, such as grey, as well as in the dark but subtle green, yellow, blue, brown, etc. Given the beauty of the photos, adding too many animation effects would’ve been superfluous. The most vivacious element of the homepage (and the entire website) is the animated horizontally-scrolling bar that contains the names of the publications that featured articles from HAJINSKY. But since this is one of the rare sections without visuals, it needed the animation to make it match the liveliness of the rest of the site.
I Weigh Community
I Weigh Community was founded by Jameela Jamil with the scope of creating a safe, inclusive space and a platform that breaks down stereotypes and discusses shame and self-hatred. The first thing you see on the site is the black-and-white picture of Jameela’s eyes peeking above a woolen collar. She is surrounded by a large “Mental Health” caption in all caps and some abstract shapes and lines in various shades of blue. This part of the page looks almost like a collage that provides a colorful introduction to the platform. As you move the mouse around, the image and the rest of the elements at the top follow the movement of your cursor. You can stop this interactive movement by pressing the pause button. As you further explore the site, you’ll notice the fun way the content slides into the view. Some words and visuals come from either side of the screen, others from the bottom, assembling at the designated part of the page, forming a complete picture. The color choices are also impressive. For example, the typography in titles is all black. When you hover over the letters, they become pastel purple, orange, or yellow. And then, when you click on a particular article, cerulean lines surround the title just before the content loads, setting the chosen entry apart from the rest of the content. The play of colors is especially evident in the menu – when you put the cursor on a section, the letters automatically and incessantly change their color from purple and orange to blue and red. The background is mostly white, but on some pages, there are also parts in other hues. In combination with the typographic color changes, striking visuals, and cool effects, the site is exciting to explore from start to finish.
Openhouse Magazine
Openhouse is a biannual magazine in which you can read about art, culture, design, and architecture. On the homepage, they’ve combined several attractive ways of showcasing the articles featured in the magazine. You can enjoy immersive fullscreen image slideshows as well as engaging image carousels. There is also a section with several article previews, two in each line. The accompanying images are in contrasting sizes, one small and the other significantly larger. In one row, the first image is smaller while the other is bigger, and in the row that follows, they switch sides. The zig-zag design is a simple and clever solution that makes the layout look interesting even without the over-the-top visuals and effects. When you place the cursor on the majority of the photos, they lose most of their color while the “Read More” button shows up on top of them, encouraging you to read the articles. The color palette on the entire website is subdued and soft. There are no elements that stand out more than others, and that helps ensure you pay equal attention to all of Openhouse’s content.
Real Life
Real Life is a magazine about living with technology. The design of their website is dynamic and eye-catching. The first thing you’ll probably notice is the ever-changing color of the background. It ranges from blue and green to a myriad of different gradient color combinations. The color of the background mirrors the change of the content that appears on the screen, breathing new life to the page each time a change occurs. The homepage opens with the latest published article singled out above all others, just beneath the logo. It is followed by a list of magazine categories displayed as old-school illustrations. Next comes a rather long list of articles from the archive, but if you ever get tired of exploring it, you can use the handy, vertically placed menu to find the topics that interest you the most. Aside from the links, the menu also includes an illustration of an eye that monitors your every move just like modern-day technology. The design of the magazine’s logo and its behavior are attention-grabbing. The words are geometric, mostly consisting of triangles, squares, half-circles, and rectangles glued together, forming the letters. The letters are outlined by default, but an animation effect colors the empty spaces in black, making the logo stand out against the soft background. As you scroll, the logo follows your movement – it stays in the background, behind the rest of the content.
Flacon Magazine
The website of Flacon Magazine is proof that integrating illustrations into designs can make projects more memorable and compelling. Like several other websites featured on our list, they start the homepage off with a large, immersive image slider. It includes both photographs and illustrations, ensuring an enrapturing introduction to the magazine. The visuals on the site are quite unusual. The use of abstract, illustrated, and surreal motifs makes the texts all the more appealing. And while the majority of the content is unmoving and rooted in place, the general passiveness is occasionally broken with horizontally scrolling texts. Even though the layouts include a lot of colorful graphics and texts, the user interface is uncluttered and easy to explore.
Emergence Magazine – Papas Nativas
Emergence Magazine is a publication that explores ecology, culture, and spirituality. In their Papas Nativas travelogue, the authors share the experiences they had on a one-month journey into the Andes Mountains, where they explored the cultural importance of potatoes in Peruvian culture. At first, you see a stop motion animation, showcasing a variety of dishes made with potatoes. The meals are bursting with colors, which look especially eye-catching against the dark green background. After a mouth-watering introduction, you come across stunning images and animated photographs that depict the atmosphere of the local areas and the people living there. Visuals take up one part of the screen, where photos appear one after the other on scroll. Meanwhile, the other part of the screen remains fixed, displaying textual descriptions of each day the authors spent in the Andes. You can click on a specific day and enjoy the multimedia presentation that accompanies it, or scroll down the page and enjoy the presentations one after the other.
The post 19 Examples of Captivating Blog Layout Designs appeared first on VVDesigns.]]>