'n Omvattende gids vir die ontwerp van agtergronde in 2024

As jy inteken op 'n diens vanaf 'n skakel op hierdie bladsy, kan Reeves and Sons Beperk 'n kommissie verdien. Sien ons etiese verklaring.

Die agtergrond van 'n webwerf, wat een keer die belangrikste deel van 'n webwerf-ontwerp is, kan op baie maniere gebruik word om 'n beter gebruikerservaring te skep.

Vandag is dit moeiliker om agtergronde behoorlik te skep as wat dit eens was, en dit bied 'n paar nuwe uitdagings, terwyl dit sommige van die potensiaal beperk wat ander agtergronde het.wise sou hê.

For example, the background in previous times could actually be used as a practical part of the design. You could put arrows on it, for example, to direct the viewer’s attention to something important.

Hoekom dinge verander het, is as gevolg van die behoefte aan responsive ontwerp, en die diversiteit van verskillende skermgroottes en skermtipes wat mense dalk gebruik.

As gevolg hiervan het die agtergrond vandag 'n minder belangrike element in webwerfontwerp geword, en baie webwerwe het glad nie 'n amptelike agtergrond nie.

Is agtergronde regtig belangrik? Om dit uit te vind, het ons die top 30 webwerwe wat geklassifiseer is (nie herhalings ingesluit nie) ondersoek en die resultate is baie interessant.

As you can see from the image above, the top ranked websites don’t bother with backgrounds at all, and it doesn’t seem to have done them the slightest bit of harm with regard to user acceptance.

This flies in the face of conventional thought concerning website design, but it’s hard to argue with cold hard facts. Amazingly enough, the first website on the list with a background doesn’t kick in until you reach number 10, which is Twitter, and that background is only visible if you’re not logged in.

In die top 30 webwerwe vir 2017 was die enigste webwerwe met behoorlike agtergronde:

  • Twitter, met 'n fotografiese agtergrond (10de)
  • Live (Outlook), met 'n soliede kleuragtergrond (12de)
  • NetFlix, met 'n collage-agtergrond (21ste)
  • WordPress, met 'n soliede kleuragtergrond (26 in rangorde)th)
  • Bing, met 'n fotografiese agtergrond (posisie 29)th)
  • Tumblr, met 'n fotografiese agtergrond (ingedeel 30)th)

Slegs 20 persent van die top-30 webwerwe het agtergronde, en diegene wat dit gedoen het, was goed op die lys.

The sole advantage of a site background is that it helps maintain a sense of site identity across multiple pages, but since there are other elements that can achieve this aim just as well and maybe better, that isn’t really a big advantage.

Nadele is talle. Agtergronde stel ekstra uitdagings in wanneer dit by die terrein kom responsiveheid, en kan gereelde opdatering vereis om te verhoed dat dit verouderd word.

'N Ander uitdaging vir die moderne ontwerper is dat dit nou benewens statiese agtergronde ook video-agtergronde kan skep. As u laasgenoemde kies, is dit uiters belangrik om te weet wat u doen, want baie gebruikers vind dat die video-agtergrond wat swak uitgedink is irriterend is.

With so many reasons not to use backgrounds, you might decide to follow in the footsteps of those top-ranked websites and ditch the whole background idea once and for all. But if the brief insists that the site needs to have a background, what can you do? That’s what we’ll try to solve in the rest of this article.

Daar moet agtergronde bestaan

Content must always be on a layer above the page background. If you don’t separate your page elements into different layers, it can create problems for you when something needs to be changed.

Dit is die beste praktyk om hierdie laagskeiding soveel as moontlik aan te wend. Moet die logo van die webwerf byvoorbeeld regtig direk op die agtergrond opgeneem word? Dikwels is dit sinvoller om die logo in 'n aparte laag te hê. As die logo dus opgedateer moet word, kan dit onafhanklik van die hele agtergrond opgedateer word.

As u lae op hierdie manier gebruik, beteken u meer werk aan die skeppingskant van dinge, maar minder werk aan die onderhoudskant. Dit gee jou ook die beste beheer, want jy kan te eniger tyd dinge verberg, beweeg of dit anders laat optree volgens jou behoeftes.

Hierdie prent wys die ideale struktuur vir 'n agtergrondontwerpsjabloon:

Binne elke laag (behalwe die basislaag) is daar ruimte om ekstra lae te skep vir nog groter grade van skeiding as u dit nodig het.

The more degrees of separation you create, the more control you can gain. You may feel like that’s not important to your right now, but it often happens that it becomes a factor later.

Die belangrikste ding om te verstaan ​​is dat die "agtergrond" enigiets is wat nie inhoudelik is nie. Dus teks of beelde wat bedoel is om op die bladsy te wees, maar nie as inhoud nie, tel as deel van die agtergrond, maar nie almal sal dit so klassifiseer nie.

Framing

In die vroeë dae van webontwerp was raamwerk net 'n eenvoudige kwessie om uit te vind waar jou inhoud in verhouding tot die agtergrond moet wees. In hierdie dag van responsive ontwerp, maar dit is tipies meer ingewikkeld as dit.

Met responsive ontwerp, het jy net twee keuses om die raamkwessie te hanteer. Die eerste opsie is om die inhoud en agtergrondprent relatief tot die beskikbare skermgrootte te skaal. Dit is optimaal wanneer die ontwerpintegriteit die belangrikste faktor is, hoewel dit nogal 'n seldsame situasie sal wees.

Die tweede opsie is om gedeeltes van die agtergrond, of selfs die hele agtergrond, uit te faseer in die meer algemene situasie waar leesbaarheid van inhoud belangriker is as ontwerpintegriteit.

Hierdie kwessie van 'ontwerpintegriteit' beteken, terloops, dat die ontwerp altyd dieselfde lyk, ongeag op watter skerm dit gekyk word. Die teenoorgestelde is waar die inhoud altyd (min of meer) dieselfde lyk, ongeag op watter skerm dit gekyk word.

Gebruik skaal vir responsiveheid

When you use scaling to keep uniform framing across different device types and orientation, it maintains the integrity of your design, but the result may still not always be what you’d expect or even desire, especially if you use a photographic background.

Let’s check out an example of this technique in action. Starting with the Samsung Galaxy S5 in portrait mode (note that these images are scaled to fit in the article, so the text you can see there is actually legible on the device itself).

This is what it looks like in landscape mode (it’s nearly always better to hold a phone in landscape orientation for everything except making phone calls, yet people still insist on holding their phones in portrait orientation.

Soos u kan sien, is die uitleg uitstekend as dit geskaal word, selfs as u slegs 640 x 360 pixels het om mee te werk. Volgende ons het die iPad in portretgerigtheid.

En landskap.

The thing you will notice when scaling is used is that there’s little variation between different devices and resolutions, except that there can be a lot of wasted vertical space on the portrait view.

Dit sou eintlik beter wees om verskillende metodes op die agtergrond- en inhoudsgedeeltes te gebruik, sodat die menu-items in 'n 2 × 2-rooster toegedraai word in plaas daarvan om altyd in 1 × 4-uitleg te bly, maar die rede waarom dit nie so gedoen word nie, is omdat dit is onmoontlik om te voorspel hoeveel vertikale ruimte beskikbaar sal wees.

Die voordeel van die afskaling is dus wanneer u wil verseker dat een of ander komponent altyd sigbaar is, ongeag die omstandighede.

Gebruik gefaseerde versteek en onthul responsiveheid

A more practical scenario, and the one most designers will want to use most of the time, is a design where the background (or portions of it) can simply be phased out if there’s not enough room to show it, so the site content always gets maximum attention.

Here is an example of the difference when using this method. We’ll use the same devices and orientations to illustrate. First is Samsung Galaxy S5 portrait.

Samsung Galaxy S5 landskap.

iPad-portret.

iPad-landskap.

Here you can see a considerable difference between devices. The small screen of the Samsung Galaxy S5 doesn’t allow the background to be displayed, regardless of whether the device is held in portrait or landscape orientation, and what is shown is adjusted to fit the available space.

As dieselfde webwerf op die iPad gesien word, word die agtergrond altyd gewys, ongeag die oriëntasie, maar daar is 'n verskil in wat gesien word.

Beste konsepte vir agtergrondontwerp (in volgorde)

1. Soliede kleur (of geen kleur)

2. Fotografies (uitgestrek)

3. Klein teël (perfek naatloos)

4. Groot teël (perfek naatloos)

What you should avoid is tiling of photographic backgrounds unless that can be done in such a way that it’s not noticeable. Stretching is normally best for photographic backgrounds, or to confine them within a predefined space.

Die era van die groot spetterige agtergrond is amper dood, behalwe vir spesialiswebwerwe wat slegs bedoel is om op 'n desktop. Die meeste agtergronde ontwerp vir desktops sal nie goed lyk as dit op fone gekyk word nie.

'N Oplossing wat u kan doen, is om 'n groot aantal breekpunte in u CSS-lêer op te stel en in te ontwerpdividubbele agtergronde vir elke breekpunt, maar soos gewoonlik het u die uitdaging dat die vertikale spasie beskikbaar nooit bereken kan word nie, selfs nie as die toesteltipe bekend is nie.

opskrif van hoofde met vergunning van

Bogdan Rancea

Bogdan is 'n stigterslid van Inspired Mag, en het bykans 6 jaar ervaring in hierdie periode opgedoen. In sy vrye tyd studeer hy graag klassieke musiek en verken visuele kuns. Hy is ook behep met fixies. Hy besit al 5.

Kommentaar Kommentaar

Lewer Kommentaar

Jou e-posadres sal nie gepubliseer word nie. Verpligte velde gemerk *

Gradering *

Hierdie webwerf gebruik Akismet om spam te verminder. Leer hoe jou opmerking verwerk is.