Are you seeking to do one thing just a little completely different together with your subsequent weblog design?
There are a variety of completely different pages to fret about while you design a weblog, however an important are archive pages, together with your foremost Weblog web page in addition to your class pages, the weblog’s particular person weblog posts, and the weblog’s homepage.
On this submit, we showcase design examples for every so you may get some inspiration.
Weblog website designs to encourage your subsequent challenge
Weblog web page designs
1. UpFlip
Main Design Parts: Search bar in hero part; search filters in sidebar
That is the Weblog web page of UpFlip’s web site, an internet site we featured in our submit on enterprise weblog examples.
UpFlip is a enterprise weblog and course academy that gives startup and facet hustle suggestions for small-time entrepreneurs.
The positioning’s Weblog web page deviates from the standard weblog web page fashion of that includes a easy chronological archive of the positioning’s newest posts by utilizing a hero part that features a search bar readers can use to search out matters they need to examine.
There are even 4 buttons beneath the search bar that act as search options. They modify the textual content throughout the search bar when clicked.
A small “x” even seems on the right-hand facet of the search bar while you hover over it, permitting you to delete the search question inside it.
The web page does have a chronological archive as customers would anticipate, nevertheless it options filters on the left-hand facet that permit customers to filter posts by subject and business.
The archive itself makes use of a three-column grid structure by which every submit is a card that features the submit’s featured picture, title, writer and class.
The Weblog web page makes use of pagination, so there are solely 5 rows within the grid.
It concludes with an e-mail opt-in type.
2. Linearity
Main Design Ingredient: Featured posts slider with card-based animation
Linearity is a design device graphic designers can use to create animations, illustrations, digital adverts, social media pictures, branding property, flyers and extra.
The device’s Weblog web page includes a distinctive factor within the type of a featured posts slider that makes use of card-based animations to vary from one featured submit to the subsequent.
The variety of featured posts within the slider is featured on the backside of it with the one in view highlighted with a skinny, orange define across the quantity.
This define even options an animation that acts as a timer, letting you realize when the slider will swap to the subsequent featured article.
Beneath this slider are buttons offered in a grid structure with every button representing completely different weblog classes.
The following few sections promote the model’s content material in numerous methods:
- Product Articles – A 3-column, one-row showcasing of the weblog’s newest posts on Linearity itself.
- Watch and Be taught – A piece to advertise video tutorials from the Linearity Academy. It includes a video background and three featured movies.
- Current Articles – An archive of the weblog’s newest posts. It options a big part showcasing the latest submit. That is adopted by a three-column grid structure of further posts with a Load Extra button supplying you with the choice to disclose as many further posts as you want.
- Inventive Group – A name to motion selling the positioning’s neighborhood gallery, which showcases initiatives Linearity clients have used the device to create.
- Get Began – A name to motion selling Linearity itself.
- Instagram Feed – A five-column, two-row grid structure of the most recent Instagram posts revealed below the #linearity hashtag.
3. TechnologyAdvice
Main Design Ingredient: Featured submit slider
TechnologyAdvice is a outstanding know-how media website that publishes evaluations, analysis and different data-driven articles, and guides.
The positioning’s weblog structure makes use of a hero part that features a featured posts slider on the best.
The slider options two articles offered as playing cards which are facet by facet. Every card has a featured picture, submit title and publication date.
There are two arrows on the backside of the slider, which you should use to cycle via every submit within the slider.
The slider additionally has a progress bar to point how far you’ve scrolled into it.
The remainder of the web page is fairly commonplace. It includes a paginated grid structure of the weblog’s newest posts. That is adopted by a easy record of hyperlinks of the weblog’s classes and a staff factor full of playing cards that introduce the weblog’s consultants.
The underside of the web page options an e-mail opt-in type.
4. Intellectsoft
Main Design Ingredient: Classes as buttons in hero part
Intellectsoft is a software program improvement firm who publishes guides for fellow software program improvement companies in addition to sensible guides on software program improvement typically.
The corporate makes use of an awesome weblog structure that’s easy but helpful.
The hero part options a number of buttons for the weblog’s classes with the buttons resulting in class archive pages.
This part additionally includes a search bar readers can use to search out particular matters they’re in search of.
The remainder of the web page includes a paginated newest posts archive in addition to an e-mail opt-in type.
Weblog submit designs
5. Salt in Our Hair
Main Design Parts: Huge imagery; floating part selector; factor bins
Salt in Our Hair is a journey weblog we featured in our submit on journey weblog examples. It’s a journey weblog operated by Nick and Hannah, a pair from the The Netherlands.
The positioning makes use of a fantastic weblog structure that principally depends on giant pictures the couple has snapped from their adventures. They use knowledgeable digital camera, permitting them to seize high-quality pictures.
Probably the greatest parts on the web page is definitely a floating part selector that permits readers to simply bounce to whichever part they’re most curious about.
In fact, as a result of it’s floating, it follows the reader down the web page as they scroll.
The submit options a number of factor bins as effectively, principally for calls to motion the couple would love readers to work together with with a purpose to guide lodges, view the couple’s map suggestions in Google Maps and save the submit to Pinterest.
6. The Needle Drop
Main Design Parts: Distinctive design; floating social sharing hyperlinks
The Needle Drop is Anthony Fantano’s personal weblog. Anthony publishes music evaluations and different music-specific content material on YouTube.
Anthony’s weblog on the web site makes use of a surprising flat design that includes a pastel yellow background and a border round every part of the submit, such because the content material space and the sidebar sections.
Every border is thickest on the underside, making a flat 3D impact.
A floating factor for social sharing hyperlinks hugs the left-hand facet of the submit content material field.
The positioning additionally makes use of animations to depict progress for website guests. There’s a progress bar that floats on the high of every submit in addition to one which fills up the again arrow that takes the reader to the highest of the web page.
These animations encourage readers to learn posts during because it lets them know the way little of a submit they’ve left to learn.
Weblog homepage designs
7. Pinch of Yum
Main Design Parts: Class hyperlinks and search field on the high of the homepage
Pinch of Yum is a well-liked meals weblog we featured in our submit on meals weblog examples.
The weblog’s design will get proper to the purpose for readers. Their homepage options a number of hyperlinks readers can use to entry the weblog’s completely different recipe classes.
The hyperlinks are picture based mostly with 4 picture hyperlinks on the high depicting the weblog’s hottest recipe classes. That is adopted by 9 smaller hyperlinks for added classes.
There’s additionally a search field right here, which brings up a complete search overlay filled with submit options for the weblog’s newest posts, well-liked weblog posts and tales.
The remainder of the homepage options the weblog’s newest posts, well-liked weblog posts and a number of e-mail opt-in types.
8. Vogue Jackson
Main Design Parts: Affiliate hyperlinks in featured submit field; tab choice for featured posts
Vogue Jackson is a way of life weblog we featured in our submit on trend weblog examples.
The weblog makes use of a clear and minimalist structure, nevertheless it has a number of little parts that give it a novel design.
A number of might be discovered within the weblog’s foremost featured submit factor. They’re image-based affiliate hyperlinks for merchandise Amy, the weblog’s proprietor, recommends within the submit being featured.
There’s one other part for added featured posts, however this one has a tab choice the reader can use to cycle via completely different collections of featured posts, similar to well-liked posts, journey suggestions and evaluations.
The remainder of the homepage options completely different parts for beneficial merchandise, Instagram posts, latest posts and an e-mail opt-in type.
9. Hope Taylor
Main Design Parts: A number of calls to motion for assets, completely different content material and merchandise
Hope Taylor is knowledgeable photographer and content material creator who publishes content material on her weblog in addition to her YouTube channel.
Her weblog web site makes use of a visually interesting design, and her homepage is a implausible instance of a weblog that mixes content material options with skilled advertising parts, similar to calls to motion.
The homepage has a number of calls to motion to promote Hope’s providers, merchandise and assets.
Over to you
There now we have it, 9 weblog website designs to encourage the structure on your subsequent challenge.
On the lookout for extra data on beginning a brand new weblog? Try these posts:
