top of page

The Home Page

When structuring a website it is a good idea to have a relatively narrow header and then to place all the attractive entry stuff just on the homepage. 

Below you will see some examples which show a simulated header as well as the actual site entry page that use things like videos, slideshows, animations and combinations thereof, in order to give you ideas as to how you can construct a splash page that gives a good introduction to your site by using "cover" elements in combination with the narrow header that repeats itself on every page, while the fancy stuff is only present at the start of the site.

Single photo home page with animated text

It does not have to be anything overly ambitious  - just a single, well chosen, good looking photograph that is representative of your site's content which you can supplement with a few slogans (that are aligned to the header elements, of course) will work just fine. In the example below I have also added small animations to these pieces of text. And remember that you can find out more on how to create animated text by going to this page >>>.

PHOTO
home-page-header-2.png

Ne söyliyceksen söyle!

Seni yok sayıyorum!

Kafamı  bozma 

şimdi! 

Placing a video inside a strip and adding an animated text overlay.

Instead of a single picture you can also use a video that you simply add to a strip. Watch the tutorial on how to go about doing this here>>. An excellent site to find videos is pexels, but there are many others also, of course. You can find links for some of the major ones on the Resources page on this site. Just make sure that it is long enough so that it doesn't repeat itself with an abrupt break while visitors are still viewing it, but if it is short you can loop it. And how do you that? This page here will show you how >>>. I added some animated text here as well, and again you should pay attention to the criteria for using animated text that are gone into on this page here >>>

VIDEO
home-page-header-1.png

Placing a video inside a strip and adding an animated text overlay.

Asabiyim

Sinirliyim

O yüzden hababam tıkınıyorum. Beni yatıştıran yemek tariflerini görmek istiyorsanız tıklayın lütfen!

Çareyi bol bol gerinmekte buldum. Egzersizleri görmek için buradan devam edebilirsiniz >>>

Mazeretim var!

Sizi delirten başlıca şeyler nedir - öğrenmek istersiniz elbet! Buyrun...

Inserting vertical videos into strip columns

Multiple videos that are related to one another visually (similar color schemes, speeds, etc) are a really good way of enhancing a home page. When bringing together multiple videos in such a way, using vertical formats rather than horizontals appears to work better, I find. Again, a very good portal to find vertical format videos is pexels, where you can also search for them by format. I have made a special video just on vertical homepage videos that you can access from the video gallery at the top of this page here, or view directly here>>>

Design Tip: In the example below I separated the strip into 5 columns and then floated the logotype above them. This will slip to the left or right depending on screen width, I optimized it for 1920 pixels wide, where it sits directly in the middle of the 2nd and 3rd column. However, I have also tested it with different screen widths and the result is acceptable. So, you should definitely make these checks and tests on your work before you decide to go with a design element that floats, instead of being embedded.

VERT. VIDEOS
logo-stroke-inv.png
home-page-header-3.png

Vectors and animations for home pages

As I have already talked about on the page on headers and footers >>> when you have a big circular logo it will be difficult to place this on a narrow header since it will end up becoming very small. What is a good strategy in this situation is to take just the icon of the logo and put that on the header as a visual marker, but then display the full logo only on the home page.

There are obviously many different ways of doing this as this video here will show you >>>  but a fun way of doing it can be splitting the logo into its components and creating an animation out of it that spreads itself across multiple slides. Read more on animations here >>> and watch this video on wix animations here >>>.

ANIMATED VECTORS
333 tutorial_edited_edited.png

ANA SAYFA                    SİNİRLİYİM                    ASABİYİM                    MAZERETİM VAR

Abstract-background-green-nice.jpg
333 tutorial (1).png
333 tutorial_edited.png

STRIP COLUMNS for home pages

Instead of a single picture you can also use a video that you simply add to a strip. Watch the tutorial on how to go about doing this here>>. An excellent site to find videos is pexels, but there are many others also, of course. You can find links for some of the major ones on the Resources page on this site. Just make sure that it is long enough so that it doesn't repeat itself with an abrupt break while visitors are still viewing it, but if it is short you can loop it. And how do you that? This page here will show you how >>>. I added some animated text here as well, and again you should pay attention to the criteria for using animated text that are gone into on this page here >>>

COLUMNS
wix-trix-covers-10A.png

SOFTWARE CAN 

INSPIRE 

US

TO MAKE NICE

THINGS

wix-trix-covers-1E.png

SO MANY COOL TOYS TO PLAY WITH

wix-trix-covers-12.png

TO GET THE CREATIVE JUICES FLOWING

wix-trix-covers-14.png

AND TO HAVE A GREAT TIME INTO THE BARGAIN...

wix-trix-covers-15A.png
wix-trix-covers-5AAB.png

SO MUCH TO EXPLORE

SO, LET'S GO!

bottom of page