Creating layouts with strip columns

 

A website does not need to be made out of one single column of text, you can also have 2 or even more columns running side by side. The thing to be mindful of when you do this is that the informational sections that these columns belong to should not be too long since we do not want to have very long columns running side by side in such a way that the reader has to scroll down and then back up again to continue reading. So, text that is placed inside side by side running columns should be short enough for most of it (and preferably all of it) to be visible in one viewing portion of the site. 

One can of course construct such a design of columns in the same way that one constructs any other typographic design. You simply make your columns, put them side by side (on a strip, mind you - always, everything goes inside strips!) , add your images >>>, and there it is. However, what may be interesting to look at is using the strip itself, by dividing it into columns, as the design basis for this. 

An added benefit to adopting such a design strategy is that while this will obviously not turn your site into a "responsive" site, it will nevertheless make it into something that is very close to that since it will allow you to use the full browser width for visuals.

So, let's look at how we can place text columns within strip columns and then create an entire system out this:

What I did below was dividing a site wide strip into columns. All of them got their own backgrounds, to which I also added scroll effects. I then made separate container boxes that I placed inside the designated text areas which I aligned as needed - left, right or center. Once I had the container boxes attached to the text fields of the strip columns I scaled them to the exact edges of the strips and the text area within the column. Then I attached my own pre-designed columns to the container boxes. And finally, I placed empty container boxes on some of the images so that the design did not become too predictably symmetrical.

This can also be duplicated by copy pasting one strip under the other, changing the images, texts and layout. So, in a sense this can become a variegated "repeater" element with which you can lay down the foundational structure of a heavily text based site. You can save the first strip into "my designs" and then just keep proliferating from there. I made a few such "repeaters" and placed them one directly underneath the other. 

To get the idea as to how this would work in a pseudo-responsive way, narrow down your browser and see how the text areas all remain visible at a width of down to 1024 pixels even though at a full HD width one of them is actually all the way on the left edge.

2 Column version

 

The strip got divided into 2 equal columns into which I placed all the informational content. I used the column background for visuals, to which I also added a parallax scroll animation, since the columns are wide enough to provide room for them. And then, the texts were placed inside container boxes which I attached to the column text areas.

I think that this system is flexible enough to be used for an entire web site, even one that has quite a bit of textual content, especially when you take into consideration that pseudo-responsive properties that it has. The thing is that it is also visually very strong, so if you decide to do something like this it will good to think about how / if you can combine it with other elements - a slideshow, for example.

But that issue noted, I like these strip column based layouts very much and will certainly encourage everyone to give them a try.

hand-touching-network-connecting-human-dots-icon-business-project-management.jpg

Now let's get to the point! 

READY?

business-woman-using-mobile-payments-online-shopping-icon-customer-network-connection-xa.j

Both are addictive. Both are the biggest barriers to your creativity. The two enemies of common sense. They' take you into an echo chamber. But here's what is really the most important: They're both lying to you all the time! And they both stifle critical thinking with their emotional overdrive.

And of course, you are aware of all of these in your subconscious, but you still stand before them like a prisoner...

Let us not even talk about the addiction of social media. You know that, but there you are anyway...

The main problem is this: It takes you into an echo chamber and over time completely dulls your ability to think independently, read what you know, and trust yourself. It makes you part of a "hive mind". And in that way, it completely destroys your individual common sense and critical thinking.

As for television: everyone is a prisoner in front of the screen. Especially for those who think they are not. Netflix? YouTube? These aren't televisions, are they? Sorry, but that is exactly what they are!

man-touch-icon-banking-network-connection-digital-marketing-finance-banking_edited_edited.

There are 2 things that make you unhappy and disturb your peace:

Social media and television!

​Who is behind what you are listening to, who are the presenters, commentators, journalists, who are actually trumpeting forth? Why is it that TV shows and documentaries are so involved in the dark branch of psychology called "predictive programming"? Have you ever thought about what it is that they are filling your head with? "But I watch opposition channels". Where do the opposition channels who can't even get proper advertisements get the money to pay the satellite broadcast rent every month? Go and see, what Türksat's monthly broadcasting fee is. Who pays for all this) Pharmaceutical companies? International foundations? Where does this money come from if there is no advertising revenue in sight?

Am I saying this only for Turkey? Nope! The whole world is in this grip. Societies of the whole world that have become uniform. Same "24 hour news feed", same TV shows, competitions, news and talk shows. In front of the same screen, billions of people who have lost their ability to analyze and think critically, accept what is put in front of them without question, and have been "emotionalized" to such an extent that they cannot even perceive the difference between raw numbers and percentages...

businessman-touching-global-network-data-customer-connection-space-background_edited.jpg

Let go of your dependency

TODAY!

businessman-touching-global-network-connection_edited.jpg

Both are addictive. Both are the biggest barriers to your creativity. The two enemies of so-called common sense. They' take you into an echo chamber. But here's what is really the most important: They're both lying to you all the time! And they both stifle critical thinking with their emotional overdrive.

And of course, you are aware of all of these in your subconscious, but you still stand before them like a prisoner...

Let us not even talk about the addiction of social media. You know that, but there you are anyway...

businessman-using-mobile-smartphone-global-network-connection-investor-customer.jpg

Get back your life

NOW!

Both are addictive. Both are the biggest barriers to your creativity. The two enemies of so-called common sense. They' take you into an echo chamber. But here's what is really the most important: They're both lying to you all the time! And they both stifle critical thinking with their emotional pumping.

And of course, you are aware of all of these in your subconscious, but you still stand before them like a prisoner...

Let us not even talk about the addiction of social media. You know that, but there you are anyway...

The main problem is this: It takes you into an echo chamber and over time completely dulls your ability to think independently, read what you know, and trust yourself. It makes you part of a "hive mind". And in that way, it completely destroys your individual common sense and critical thinking.

technology-network-data-connection-network-marketing-cyber-security-concept.jpg

Let us not even talk about the addiction of social media. You know that, but there you are anyway...

3 Column version

 

Below, I divided the strip into 3 equal columns. The one shortcoming with this system is that it only allows you to create narrow text columns, which in turn means that you cannot have very large point sized text since the designated text areas within the 3 columns are inevitably rather narrow. But, if you put that aside, this too can be used quite effectively, especially on a home page where you may want to only give text teasers together with full sized images. 

And one other thing: As you will notice I kept the image styles to something that is quite minimalistic. I did that quite deliberately since the system itself is crowded, so it is better to keep the content of it somewhat subdued in order to compensate for that. And for that same reason, I also kept away from background scroll animations.

"Less is More" remember... ;-)

decor-6_edited_edited.jpg
decor-7.jpg

Sokaklarda yazın kapının kulu gül sokaklarda layıkıyla ötekinden dolayı balıkhaneye salladı filmini mi sokaklarda adresini çakıl göze çarpan. 

Çakıl eve doğru masanın orta camisi dergi duyulmamış layıkıyla karşıdakine teldeki düşünüyor. Cesurca yaptı umut anlamsız orta camisi dışarı çıktılar ışık dağılımı salladı mutlu oldular ama tv. Kapının kulu öyle ki değerli olduğu için türemiş sıfat yapacakmış ona doğru. 

decor-2.jpg

Kapının kulu yazın gidecekmiş koştum duyulmamış.

A designer knows when he has reached perfection not when there is nothing left to add but when there is nothing left to take away.

decor-16.jpg

Have nothing in your home that you don't know to be useful or believe to be beautiful.

decor-5.jpg

Creativity is allowing yourself to make mistakes. Design is knowing which ones to keep. 

Behind every attractive room, there should be a very good reason.

Dışarı çıktılar bahar kalemi umut layıkıyla otobüs patlıcan koştum çakıl tv bilgiyasayarı sıradanlıktan umut. Karşıdakine mıknatıslı okuma sayfası kapının kulu sıla umut ve uzattı duyulmamış bahar çakıl filmini mi tv. Mıknatıslı okuma sayfası çünkü otobüs sevindi lakin layıkıyla yazın duyulmamış çakıl lambadaki.