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

PHOTO

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 >>>.

home-page-header-2.png

Ne söyliyceksen söyle!

Seni yok sayıyorum!

Kafamı  bozma 

şimdi! 

HOMEPAGE WITH SLIDESHOW

SLIDESHOW

A slideshow needs content (both text and visual) that can be distributed over more than one slide. If you can put that together then using a slideshow is something that I will definitely advise. However, please bear in mind that we are not talking about a photo album, but about the entrance point to a graphic design work and as such it needs to hold information, the primary carrier of which is text. So, you do need text that distributes itself over at least two sheets.

braid-2.jpg

think of a site's identity__

home-page-header-2.png

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

VIDEO

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>>. Make sure that the clip 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 >>>

home-page-header-1.png

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

VERT. VIDEOS

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 will work better. 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.

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

Vectors and animations for home pages

VECTORS

With rounded logos a good strategy 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 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 >>>.

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

Dividing a strip into columns that are filled with texts and images that give an overview of your site is a good way of putting together a homepage, especially since such strip columns will also give you a (faux) responsive design. Find out more about strip columns, how to edit them and their usage on this page >>>.

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!

DESIGN TIPS
bottom of page