Card-Design: Der aktuelle Webdesign-Trend

#mega-menu-wrap-secondary #mega-menu-secondary ul.mega-sub-menu ul.menu { pointer-events: auto; } #content { #main { h1, h2, h3, h4, h5, h6 { @media screen and (max-width: 989px) { line-height: 1.3 !important; } } p { @media screen and (max-width: 989px) { line-height: 1.5 !important; } } @media screen and (max-width: 989px) { h1 { font-size: 35px !important; } h2 { font-size: 28px !important; } h3 { font-size: 22px !important; } } } .gb-container { &:has(.button-primary + .button-secondary) { @media screen and (max-width: 767px) { flex-direction: column; gap: 10px; } .button-primary, .button-secondary { @media screen and (max-width: 767px) { width: fit-content; } } } } .button-primary, .button-secondary { @media screen and (max-width: 767px) { } & > * { white-space: unset; cursor: pointer; } } } .flexible-layout { &--style { &_3 { .flexible-layout__images { gap: 10px; display: grid; grid-template-columns: repeat(2, 1fr); @media screen and (min-width: 768px) { } .flexible-layout { &__image-container { width: auto; &.flexible-layout__image-container--secondary { line-height: 0; img.flexible-layout__image { @media screen and (max-width: 575px) { max-height: 160px; } } } } &__image-column { gap: 10px; width: auto; } } } } } } // body.job-template-default .reasons-wrapper { & > .gb-grid-wrapper { // gap: 20px; & > .gb-grid-column > .gb-container { background: var(--base-3); padding: 50px 35px; h3:last-child { margin: 0; } } } } .benefits { .gb-grid-column { h3:last-child { margin-bottom: 0; } } } .wpcf7-form { input.wpcf7-form-control.wpcf7-submit { width: 100%; padding: 8px 18px; } .drop_uploader.drop_zone { min-height: unset !important; padding: 15px; border: 2px dashed var(--contrast-3); transition: .3s ease all; &:has(a.file_browse:hover) { border: 2px dashed var(--salmon); } .text_wrapper { margin-block: 30px; .text { font-size: 1em; } i { font-size: 30px; } } ul.files { &.thumb { margin: 0 auto !important; width: 100%; li { font-size: 0.75em !important; .thumbnail { background-position: center; } } } } } } .list-element-custom { p.gb-headline { .gb-icon { // display: inline-flex; // margin-block: auto; svg { height: 1em; // width: 1em; top: 2px; position: relative; /* background: lightcoral; */ } } } } .pagination { margin-top: 30px; br { display: none; } .wp-pagenavi { padding-inline: 20px; @media screen and (min-width: 990px) { padding-inline: 50px; } & > * { font-size: 18px !important; } a { transition: .5s ease all; &:hover { color: var(--c-secondary); } } } } .gb-container.text-image-section > .gb-grid-wrapper > .gb-grid-column > .gb-container { // height: 100%; // display: flex; // flex-direction: column; // justify-content: center; } .job-filter-wrapper, .job-results-wrapper { p:empty { display: none; margin-bottom: 0 !important; } } .job-filter-wrapper { form.searchandfilter { & > ul { margin-bottom: 40px; row-gap: 5px !important; } li.sf-field-search { input { &::placeholder { font-size: 1em; } } } li[data-sf-field-input-type="select"] { & > label { border: 2px solid #999; padding-right: 20px; border-radius: 10px; & > select { background: transparent; border: unset; padding: 10px 0 10px 20px; option { // padding-block: 15px; &.sf-option-active { // background: var(--c-secondary); } } } } &.active { & > label { border-color: var(--c-secondary); color: var(--c-secondary); } } } } } .job-results-wrapper { .search-filter-results { br + .job-listing { margin-top: 25px; } } .job-listing { @media screen and (min-width: 990px) { padding-inline: 50px; } } } body .button-primary, body .button-secondary { font-weight: 500; } .carreer-intro { &:before { // max-width: calc(100% - 850px); // left: unset; // width: 100%; } p { font-size: 20px; margin-block: 30px; } }

Inhalte über visuelle „Karten“ (englisch „Card-Design“) schnell und einfach zugänglich zu machen – das ist schon seit einiger Zeit ein sehr beliebter Designansatz. Ob Google, Pinterest, Twitter, Tinder oder Spotify – Card-Design hat sich übergreifend etabliert und gehört zu den langfristigen Gestaltungstrends im Webdesign.

Was ist „Card-Design“?

Unter Card-Design versteht man die Unterteilung durch Kacheln (Karten) einer Webseite. Diese Einteilung des Contents ist mittlerweile nicht mehr wegzudenken. Der bekannteste Vorreiter mit diesem Format ist die Social-Media-Plattform Pinterest. Als Webdesign-Agentur setzen wir auf das Card-Design, wenn komplexe Inhalte in großer Menge aufbereitet werden müssen. Das Layout bietet sich bei Webseiten mit viel Content an: Die Inhalte werden beim Card-Design über rechteckige, visuelle Karten angeboten, die zumeist aus einem Bildteil und einer kurzen Beschreibung bestehen. Aufgrund der Einfachheit sind die Raster grenzenlos skalierbar und lassen sich auf kleineren Monitoren und mobile Geräten perfekt abbilden.

Warum „Karten“-Designs aktuell die Optik im Web dominieren

Seit ca. zwei Jahren greifen mehr Nutzer mobil auf Internetseiten zu als vom Desktop. Ein responsive Design ist 2016 Pflicht und die mobile Darstellung steht oftmals schon im Vordergrund („mobile first“-Ansatz). Im Zuge von Mobile-Friendly-Design wird deshalb gerne auf das Card-Design zurückgegriffen. Die Besucher können schnell und zielgerichtet auf die gewünschten Bereiche der Webseite gelotst werden und bekommen die Inhalte mundgerechte serviert.

Beispiele

[av_slideshow size=’no scaling‘ animation=’slide‘ autoplay=’false‘ interval=’5′ control_layout=’av-control-default‘ custom_class=“ av_uid=’av-7q2cbd‘]
[av_slide slide_type=’image‘ id=’6910′ video=’http://‘ mobile_image=“ video_ratio=’16:9′ title=’silktricky‘ link_apply=“ link=’lightbox‘ link_target=“ av_uid=’av-5wenq1′][/av_slide]
[av_slide slide_type=’image‘ id=’6911′ video=’http://‘ mobile_image=“ video_ratio=’16:9′ title=’namesforchange‘ link_apply=“ link=’lightbox‘ link_target=“ av_uid=’av-46gaih‘][/av_slide]
[av_slide slide_type=’image‘ id=’6912′ video=’http://‘ mobile_image=“ video_ratio=’16:9′ title=’dribble‘ link_apply=“ link=’lightbox‘ link_target=“ av_uid=’av-2ksoah‘][/av_slide]
[/av_slideshow]

Copyright Bilder