6 Common Magazine Design Trends Found in Today’s Web Design

#1 Layered Content Boxes in Web Design

Web design with a content box overlapping a background image

As shown in the example web design above, the content is contrasted over the underlying parent’s background color/ image. As a result, the website content stands out while still gaining influence from the background.

Why use this:

In clarify, stacking content on top of the related image allows you to pair the visual element with the content and provides a seamless relationship for your reader.

#2 Drop Caps for Web Design

Use of drop caps in web design

To give example, the screenshot above was taken from the “I” category at Daily Drop Cap – A free for personal use drop cap resource. Additionally, both images and/ text effects can be used in drop caps in your web design.

For instance, use drop caps to position more of your design elements into your text. In addition, drop caps assist with the flow of colors and textures throughout your web design.

#3 Web Design With Skewed Borders

Web design skewed border design using CSS

Skewed borders are edgy and easily capture your reader’s attention. In particular, use skewed borders on images or content boxes in your web design. To clarify, this can be accomplished with CSS by using the transform property on the ::after selector of an element.

For fear that content will run past the skewed edge, ensure enough padding is set in order to keep content from crossing the slanted border(s).


.block {
background-color: #F00;
height: 200px;
margin: 50px auto;
position: relative;
width: 780px;
.block::after {
background: inherit;
bottom: 0;
content: '';
height: 100%;
position: absolute;
-webkit-transform: skewY(5deg);
transform: skewY(5deg);
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
width: 100%;
z-index: -1;

In the above code, the transform property of skewY(5deg) is what controls the degree of the skew.

#4 Staggered Left/ Right Content in Web Design

For the most part, staggered left to right content keeps the reader’s engagement by limiting their ability to stray from your website. For instance, much like a timeline, you follow the path all the way down to the end.

Left to right staggered content in web design

As seen above is a Screenshot of Neil Patel’s blog at neilpatel.com/blog.

As the founder of multiple analytics and marketing websites such as kissmetrics.com and crazyegg.com, Neil understands web metrics and A/B testing. Taking that into consideration, you will understand the staggered content organization method is worth considering.

How this works:

As shown in the diagram below, this staggered left/right content organization method follows the “Gutenberg Diagram.”
As can be seen in the diagram, your reader’s eyesight travels from the top left to the top right, returning immediately back to the bottom left and ending at the bottom right.

Heatmap for a web design showing how readers scan websites

According to this article on eye-tracking study results, your reader’s eyesight moves in an “F” pattern, going from the top left, over to the top right and  back to the bottom left.

#5 Columns of Text in Web Design

Columns of text for use in web design

As shown above, columns for text separation has been used in all kinds of magazine page design. In brief, use this type of layout to split your content and make reading through your content easier.

Why this works:

Ultimately, this works because most readers will not try to read a big wall of text. In fact, your visitors will likely leave your website because of it. Separating your text into chunks makes your content easier to digest and scan through for your readers.

#6 Text Over Image Backgrounds

On account of magazine design, overlaying text on top of a background image is simple to do in a graphic design software. Using CSS, you can achieve the same effect in your web design.

Here’s how:

A screenshot of fzcreative.com, showing text over and image background web design

As seen in the above image, is a screen shot taken from fzcreative.com. By using this text over background image technique, they are able to put emphasis directly onto their brand tagline. In addition, by using a related background image, they can easily convey more about their business.

Of course, ensure your background provides enough contrast to your text. By doing this, you ensure your visitors are able to read your text easily. I have found that when you add shadow to your text it increases visibility. Do this by adding a bit of CSS to your overlay text.

Here’s the code to do that:

#banner .overlay-text {
text-shadow: 0 0 5px white;

In the above code, I simply added a white text shadow with a 5px spread to the overlay text. To explain, you should use a white shadow for darker background images and a black shadow for lighter background images. In addition, text shadows will also make your text appear visually sharper. You can read more about the CSS attribute “text-shadow” at W3schools.net.

Final Words

All in all, common trends for magazine page design have been picked up and are now being used by web designers. Overall, these 5 common magazine design trends are the most popular techniques being used in Today’s web design.

To conclude, use the techniques outlined in this article to achieve easy to read content that flows much like a magazine. In effect, you will retain more readers and gain more shares on your web design.

Building Your First Website – An Introduction to web development

Building your first website can be a daunting experience. You aren’t sure where to start or what to learn. Start building websites by learning the basics of html and css to begin your web development journey.

What Are Websites Comprised Of?

In other words, what is required to display content on a web page? By and large, these are the tags that you will have to write for every html5 website, you might as well get to know them. The most basic website is comprised of one html file.

Ultimately, this file will contain three parts: The doctype declaration and an html wrapper which holds the head section and the body section of your website.

Creating The HTML File For Building Your First Website

Create a new folder and name it anything. Inside the root of that folder, make a new file with the extension “.html”, for example “index.html” or “home.html” – give it any name you’d like, but be sure to include the “.html” extension. Be aware that web hosts will search for a “default.html”, “home.html” or “index.html” by default.

A very basic html file will look like this.

code for the bare-minimum tags needed for building your first website

As shown above, notice how the code is structured. In brief, it would be fairly hard to read code that doesn’t contain separation. Rather, tabs or spaces are used to create separation between elements. This is not at all required for the browser to render the content, however it is good practice. In the long run, code separation and structure will help you if you ever have to come back and extend from your code. At the same time, clean code separation and structure will also help other developers scan through and read your code.

The Head Section

A basic head of any html5 website will contain a meta tag, a title tag and most times a style tag. Tags are written as <tag-name>

code for building your first website with no content

Website Titles

Notice the <title> tags? Any text that you place inside here, will be displayed in the tab of the browser. For reference, it looks something like this.

a browser tab with title text

The meta “charset” is the key meta tag.

The meta charset tag will tell the browser which character encoding set must be used to render your website. In any event, it must be included in your website. Following, the most commonly used character set for the web is “UTF-8”.
All meta tags are written inside the head section as <meta charset="utf-8">.

Piecing Your Website Together

Generally speaking, building your first website becomes easy after you piece these main components together. Moreover, what about adding content? Notice the <p> tags inserted inside the body tags. In addition, this is called a paragraph tag – and as you probably guessed, it is used to render your website’s textual content.

complete code for building your first website

Adding Content To Your Website

Accordingly, the body of content that is displayed on your website will go in-between the <body> tags. In essence, this is where you place your body of text and media.

Furthermore, check out other resources to learn about all of the different html tags you can use to structure content on your website.

Flask Web Development – An Introduction

Flask websites are built using the Flask microframework. Wikipedia defines Flask as one of many “minimalistic web application frameworks.” In this article I will be giving an introduction to Flask web development, along with resources to get started developing with the flask framework.

What makes Flask web development so magical?

The Flask microframework is backed by Python. Python is a very stable, powerful, aged and most importantly… Legible programming language. So legible in fact, I usually forego code comments.

For example, writing the comment:

For each user in the followers list, display the user’s name

above this ↓
for user in followers:
print user.name
serves no purpose. In fact, it makes my code harder to scan through later on. Which brings me to my next key point…

Websites built in Flask are scalable

Scalability is defined by the effort it takes to come back to a site and build from it at a later point in time. The Flask web framework allows you to build sites kind of like lego blocks. You mix and match and install only the modules you need using pip.

Python code is easy to read and write

Due to the legibility of Python, Flask websites becomes much more easy to structure. You could start with a simple app and not have to worry about coming back to it months from now to extend it’s functionality. It’s amazing how easy it is to pick up where you left off in Python programming. Therefore, allowing websites written in Flask to achieve the same benefit.

Flask for Web Development and Web Apps

Flask utilizes simple routing, paired with a great templating engine and a built-in local server for rapid design and development.
App structure is as basic or complex as needed.

For example, a basic Flask web app or website is laid out as follows:

  • app
    • /static
    • /templates
    • __init__.py

Flask website folder structure

The Static folder is for images, stylesheets, sass/ stylus files, and other static media required for your site.

The Templates folder holds pieces of the website such as the header, sidebar, content, menu, forms and footer. Template files aren’t necessary, however they do provide greater organization and more of a manageable site structure.

init.py can be named other things such as app.py or name.py. This file contains the code necessary to launch the website or app. There is no mandatory naming convention for this file. This file is initialized with python typing python __init__.py in a terminal window. Depending on how you structured your app, it should start a local server with the following message returned:
* Running on

Recommended reading

Finally, here are a couple websites I recommend to get started with Flask web development:

  • flask.pocoo.org — Site created by Armin Ronacher (the creator of the Flask microframework). This site is a great resource to have when starting out when using Flask for web development. In other words, it will help teach you the foundations in flask web development, along with some more advanced features of the Flask web framework.
  • exploreflask.com — Founded from a Kickstarter campaign, this is an online guidebook for the Flask web framework. In addition, the Explore Flask website gives an introduction to common coding conventions, configuration, extensions, security, deployment and even some design tips. Most noteworthy, it’s a free online book and a great resource if you ever get stuck on something in your Flask development.

Furthermore, I will soon be publishing tutorials on the Flask microframework on this site.