')}.navbar-light .navbar-text{color:rgba(0,0,0,.5)}.navbar-light .navbar-text a,.navbar-light .navbar-text a:focus,.navbar-light .navbar-text a:hover{color:rgba(0,0,0,.9)}.navbar-dark .navbar-brand,.navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#fff}.navbar-dark .navbar-nav .nav-link{color:hsla(0,0%,100%,.5)}.navbar-dark .navbar-nav .nav-link:focus,.navbar-dark .navbar-nav .nav-link:hover{color:hsla(0,0%,100%,.75)}.navbar-dark .navbar-nav .nav-link.disabled{color:hsla(0,0%,100%,.25)}.navbar-dark .navbar-nav .active>.nav-link,.navbar-dark .navbar-nav .nav-link.active,.navbar-dark .navbar-nav .nav-link.show,.navbar-dark .navbar-nav .show>.nav-link{color:#fff}.navbar-dark .navbar-toggler{color:hsla(0,0%,100%,.5);border-color:hsla(0,0%,100%,.1)}.navbar-dark .navbar-toggler-icon{background-image:url('data:image/svg+xml;charset=utf-8, ')}.navbar-dark .navbar-text{color:hsla(0,0%,100%,.5)}.navbar-dark .navbar-text a,.navbar-dark .navbar-text a:focus,.navbar-dark .navbar-text a:hover{color:#fff}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card>hr{margin-right:0;margin-left:0}.card>.list-group{border-top:inherit;border-bottom:inherit}.card>.list-group:first-child{border-top-width:0;border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.card>.card-header+.list-group,.card>.list-group+.card-footer{border-top:0}.card-body{flex:1 1 auto;min-height:1px;padding:1.25rem}.card-title{margin-bottom:.75rem}.card-subtitle{margin-top:-.375rem}.card-subtitle,.card-text:last-child{margin-bottom:0}.card-link:hover{text-decoration:none}.card-link+.card-link{margin-left:1.25rem}.card-header{padding:.75rem 1.25rem;margin-bottom:0;background-color:rgba(0,0,0,.03);border-bottom:1px solid rgba(0,0,0,.125)}.card-header:first-child{border-radius:calc(.25rem - 1px) calc(.25rem - 1px) 0 0}.card-footer{padding:.75rem 1.25rem;background-color:rgba(0,0,0,.03);border-top:1px solid rgba(0,0,0,.125)}.card-footer:last-child{border-radius:0 0 calc(.25rem - 1px) calc(.25rem - 1px)}.card-header-tabs{margin-bottom:-.75rem;border-bottom:0}.card-header-pills,.card-header-tabs{margin-right:-.625rem;margin-left:-.625rem}.card-img-overlay{position:absolute;top:0;right:0;bottom:0;left:0;padding:1.25rem;border-radius:calc(.25rem - 1px)}.card-img,.card-img-bottom,.card-img-top{flex-shrink:0;width:100%}.card-img,.card-img-top{border-top-left-radius:calc(.25rem - 1px);border-top-right-radius:calc(.25rem - 1px)}.card-img,.card-img-bottom{border-bottom-right-radius:calc(.25rem - 1px);border-bottom-left-radius:calc(.25rem - 1px)}.card-deck .card{margin-bottom:15px}@media (min-width:576px){.card-deck{display:flex;flex-flow:row wrap;margin-right:-15px;margin-left:-15px}.card-deck .card{flex:1 0;margin-right:15px;margin-bottom:0;margin-left:15px}}.card-group>.card{margin-bottom:15px}@media (min-width:576px){.card-group{display:flex;flex-flow:row wrap}.card-group>.card{flex:1 0;margin-bottom:0}.card-group>.card+.card{margin-left:0;border-left:0}.card-group>.card:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.card-group>.card:not(:last-child) .card-header,.card-group>.card:not(:last-child) .card-img-top{border-top-right-radius:0}.card-group>.card:not(:last-child) .card-footer,.card-group>.card:not(:last-child) .card-img-bottom{border-bottom-right-radius:0}.card-group>.card:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.card-group>.card:not(:first-child) .card-header,.card-group>.card:not(:first-child) .card-img-top{border-top-left-radius:0}.card-group>.card:not(:first-child) .card-footer,.card-group>.card:not(:first-child) .card-img-bottom{border-bottom-left-radius:0}}.card-columns .card{margin-bottom:.75rem}@media (min-width:576px){.card-columns{-webkit-column-count:3;column-count:3;-webkit-column-gap:1.25rem;column-gap:1.25rem;orphans:1;widows:1}.card-columns .card{display:inline-block;width:100%}}.breadcrumb{display:flex;flex-wrap:wrap;padding:.75rem 1rem;margin-bottom:1rem;list-style:none;background-color:#e9ecef;border-radius:.25rem}.breadcrumb-item+.breadcrumb-item{padding-left:.5rem}.breadcrumb-item+.breadcrumb-item:before{float:left;padding-right:.5rem;color:#6c757d;content:"/"}.breadcrumb-item+.breadcrumb-item:hover:before{text-decoration:underline;text-decoration:none}.breadcrumb-item.active{color:#6c757d}.pagination{display:flex;padding-left:0;list-style:none;border-radius:.25rem}.page-link{position:relative;display:block;padding:.5rem .75rem;margin-left:-1px;line-height:1.25;color:#007bff;background-color:#fff;border:1px solid #dee2e6}.page-link:hover{z-index:2;color:#0056b3;text-decoration:none;background-color:#e9ecef;border-color:#dee2e6}.page-link:focus{z-index:3;outline:0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.page-item:first-child .page-link{margin-left:0;border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.page-item:last-child .page-link{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.page-item.active .page-link{z-index:3;color:#fff;background-color:#007bff;border-color:#007bff}.page-item.disabled .page-link{color:#6c757d;pointer-events:none;cursor:auto;background-color:#fff;border-color:#dee2e6}.pagination-lg .page-link{padding:.75rem 1.5rem;font-size:1.25rem;line-height:1.5}.pagination-lg .page-item:first-child .page-link{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.pagination-lg .page-item:last-child .page-link{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.pagination-sm .page-link{padding:.25rem .5rem;font-size:.875rem;line-height:1.5}.pagination-sm .page-item:first-child .page-link{border-top-left-radius:.2rem;border-bottom-left-radius:.2rem}.pagination-sm .page-item:last-child .page-link{border-top-right-radius:.2rem;border-bottom-right-radius:.2rem}.badge{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.badge{transition:none}}a.badge:focus,a.badge:hover{text-decoration:none}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.badge-pill{padding-right:.6em;padding-left:.6em;border-radius:10rem}.badge-secondary{color:#fff;background-color:#6c757d}a.badge-secondary:focus,a.badge-secondary:hover{color:#fff;background-color:#545b62}a.badge-secondary.focus,a.badge-secondary:focus{outline:0;box-shadow:0 0 0 .2rem rgba(108,117,125,.5)}.badge-danger{color:#fff;background-color:#dc3545}a.badge-danger:focus,a.badge-danger:hover{color:#fff;background-color:#bd2130}a.badge-danger.focus,a.badge-danger:focus{outline:0;box-shadow:0 0 0 .2rem rgba(220,53,69,.5)}.App{display:flex;flex-direction:column}.App>.pageContent{flex:1 1;overflow:auto;padding-top:10px}.navbar-nav{flex-direction:row}.navbar-nav>*{padding-left:10px}.container{width:100%;max-width:1170px;padding-left:15px;padding-right:15px}@media only screen and (min-width:768px){.container{display:flex;flex-wrap:wrap;padding-left:30px;padding-right:30px}.container.dir-column{flex-direction:column}}.eu-cookie-notification-dialog{position:fixed;left:20px;bottom:-300px;padding:15px;width:310px;z-index:10000;font-size:12px;border-radius:4px;box-sizing:border-box;color:#555;background-color:#f4f6f8}.eu-cookie-notification-dialog .notification-title{font-size:14px;font-weight:700}.eu-cookie-notification-dialog .notification-content{padding:12px 0;line-height:1.4;display:inline-block}.eu-cookie-notification-dialog .link-text{margin:0 5px;color:#555;text-decoration:underline}.eu-cookie-notification-dialog .link-text:hover{color:#555}.eu-cookie-notification-dialog .notification-footer{display:flex;align-items:center}.eu-cookie-notification-dialog .common-button{cursor:pointer;color:#fff;font-size:12px;font-weight:700;padding:6px 10px;margin-right:10px;border-radius:4px;text-align:center;letter-spacing:normal;background-color:#4b5056}.eu-cookie-notification-dialog .setting-btn{color:#4b5056;background-color:#fff;border:1px solid #4b5056}.eu-cookie-notification-dialog .cancel-link{cursor:pointer}.eu-cookie-setting-dialog{width:100%;position:fixed;top:50%;left:50%;display:none;padding:20px;z-index:10000;max-width:500px;border-radius:5px;box-sizing:border-box;color:#555;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#f4f6f8;-webkit-animation:slide_in_animation .3s ease-in-out;animation:slide_in_animation .3s ease-in-out}.eu-cookie-setting-dialog .setting-title{font-size:14px;font-weight:700}.eu-cookie-setting-dialog .setting-item{display:flex;margin-top:20px;align-items:flex-start}.eu-cookie-setting-dialog .item-content{font-size:12px;margin:0 8px}.eu-cookie-setting-dialog .cookie-checkbox{cursor:pointer}.eu-cookie-setting-dialog .cookie-checkbox.necessary{cursor:not-allowed}.eu-cookie-setting-dialog .item-label{line-height:1;font-weight:700}.eu-cookie-setting-dialog .item-text{margin-top:5px;line-height:1.5}.eu-cookie-setting-dialog .setting-footer{margin-top:20px;text-align:right}.eu-cookie-setting-dialog .save-btn{cursor:pointer;color:#fff;font-size:12px;font-weight:700;padding:8px 10px;border-radius:4px;display:inline-block;letter-spacing:normal;background:#4b5056}.eu-cookie-setting-mask{position:fixed;display:none;top:0;left:0;width:100%;height:100%;z-index:10000;cursor:pointer;background:rgba(0,0,0,.4);-webkit-animation:slide_in_animation .2s ease-in-out;animation:slide_in_animation .2s ease-in-out}@-webkit-keyframes slide_in_animation{0%{opacity:0}to{opacity:1}}@keyframes slide_in_animation{0%{opacity:0}to{opacity:1}}.rtl-layout .eu-cookie-notification-dialog{right:20px;left:auto;text-align:right}.rtl-layout .eu-cookie-notification-dialog .common-button{margin-right:0;margin-left:10px}.rtl-layout .eu-cookie-setting-dialog-wrapper{text-align:right}.rtl-layout .eu-cookie-setting-dialog-wrapper .setting-footer{text-align:left}@media only screen and (max-width:520px){.eu-cookie-notification-dialog{width:100%;left:0}.rtl-layout .eu-cookie-notification-dialog{left:auto;right:0}}.ReactTable{position:relative;display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.1)}.ReactTable *{box-sizing:border-box}.ReactTable .rt-table{flex:auto 1;display:flex;flex-direction:column;align-items:stretch;width:100%;border-collapse:collapse;overflow:auto}.ReactTable .rt-thead{flex:1 0 auto;display:flex;flex-direction:column;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ReactTable .rt-thead.-headerGroups{background:rgba(0,0,0,.03)}.ReactTable .rt-thead.-filters,.ReactTable .rt-thead.-headerGroups{border-bottom:1px solid rgba(0,0,0,.05)}.ReactTable .rt-thead.-filters input,.ReactTable .rt-thead.-filters select{border:1px solid rgba(0,0,0,.1);background:#fff;padding:5px 7px;font-size:inherit;border-radius:3px;font-weight:400;outline-width:0}.ReactTable .rt-thead.-filters .rt-th{border-right:1px solid rgba(0,0,0,.02)}.ReactTable .rt-thead.-header{box-shadow:0 2px 15px 0 rgba(0,0,0,.15)}.ReactTable .rt-thead .rt-tr{text-align:center}.ReactTable .rt-thead .rt-td,.ReactTable .rt-thead .rt-th{padding:5px;line-height:normal;position:relative;border-right:1px solid rgba(0,0,0,.05);transition:box-shadow .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:inset 0 0 0 0 transparent}.ReactTable .rt-thead .rt-td.-sort-asc,.ReactTable .rt-thead .rt-th.-sort-asc{box-shadow:inset 0 3px 0 0 rgba(0,0,0,.6)}.ReactTable .rt-thead .rt-td.-sort-desc,.ReactTable .rt-thead .rt-th.-sort-desc{box-shadow:inset 0 -3px 0 0 rgba(0,0,0,.6)}.ReactTable .rt-thead .rt-td.-cursor-pointer,.ReactTable .rt-thead .rt-th.-cursor-pointer{cursor:pointer}.ReactTable .rt-thead .rt-td:last-child,.ReactTable .rt-thead .rt-th:last-child{border-right:0}.ReactTable .rt-thead .rt-th:focus{outline-width:0}.ReactTable .rt-thead .rt-resizable-header{overflow:visible}.ReactTable .rt-thead .rt-resizable-header:last-child{overflow:hidden}.ReactTable .rt-thead .rt-resizable-header-content{overflow:hidden;text-overflow:ellipsis}.ReactTable .rt-thead .rt-header-pivot{border-right-color:#f7f7f7}.ReactTable .rt-thead .rt-header-pivot:after,.ReactTable .rt-thead .rt-header-pivot:before{left:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none}.ReactTable .rt-thead .rt-header-pivot:after{border-color:hsla(0,0%,100%,0) hsla(0,0%,100%,0) hsla(0,0%,100%,0) #fff;border-width:8px;margin-top:-8px}.ReactTable .rt-thead .rt-header-pivot:before{border-color:hsla(0,0%,40%,0) hsla(0,0%,40%,0) hsla(0,0%,40%,0) #f7f7f7;border-width:10px;margin-top:-10px}.ReactTable .rt-tbody{flex:99999 1 auto;display:flex;flex-direction:column;overflow:auto}.ReactTable .rt-tbody .rt-tr-group{border-bottom:1px solid rgba(0,0,0,.05)}.ReactTable .rt-tbody .rt-tr-group:last-child{border-bottom:0}.ReactTable .rt-tbody .rt-td{border-right:1px solid rgba(0,0,0,.02)}.ReactTable .rt-tbody .rt-td:last-child{border-right:0}.ReactTable .rt-tbody .rt-expandable{cursor:pointer;text-overflow:clip}.ReactTable .rt-tr-group{flex:1 0 auto;display:flex;flex-direction:column;align-items:stretch}.ReactTable .rt-tr{flex:1 0 auto;display:inline-flex}.ReactTable .rt-td,.ReactTable .rt-th{flex:1 0;white-space:nowrap;text-overflow:ellipsis;padding:7px 5px;overflow:hidden;transition:.3s ease;transition-property:width,min-width,padding,opacity}.ReactTable .rt-td.-hidden,.ReactTable .rt-th.-hidden{width:0;min-width:0;padding:0;border:0;opacity:0}.ReactTable .rt-expander{display:inline-block;position:relative;color:transparent;margin:0 10px}.ReactTable .rt-expander:after{content:"";position:absolute;width:0;height:0;top:50%;left:50%;-webkit-transform:translate(-50%,-50%) rotate(-90deg);transform:translate(-50%,-50%) rotate(-90deg);border-left:5.04px solid transparent;border-right:5.04px solid transparent;border-top:7px solid rgba(0,0,0,.8);transition:all .3s cubic-bezier(.175,.885,.32,1.275);cursor:pointer}.ReactTable .rt-expander.-open:after{-webkit-transform:translate(-50%,-50%) rotate(0);transform:translate(-50%,-50%) rotate(0)}.ReactTable .rt-resizer{display:inline-block;position:absolute;width:36px;top:0;bottom:0;right:-18px;cursor:col-resize;z-index:10}.ReactTable .rt-tfoot{flex:1 0 auto;display:flex;flex-direction:column;box-shadow:0 0 15px 0 rgba(0,0,0,.15)}.ReactTable .rt-tfoot .rt-td{border-right:1px solid rgba(0,0,0,.05)}.ReactTable .rt-tfoot .rt-td:last-child{border-right:0}.ReactTable .-pagination{z-index:1;display:flex;justify-content:space-between;align-items:stretch;flex-wrap:wrap;padding:3px;box-shadow:0 0 15px 0 rgba(0,0,0,.1);border-top:2px solid rgba(0,0,0,.1)}.ReactTable .-pagination input,.ReactTable .-pagination select{border:1px solid rgba(0,0,0,.1);background:#fff;padding:5px 7px;font-size:inherit;border-radius:3px;font-weight:400;outline-width:0}.ReactTable .-pagination .-btn{-webkit-appearance:none;appearance:none;display:block;width:100%;height:100%;border:0;border-radius:3px;padding:6px;font-size:1em;color:rgba(0,0,0,.6);background:rgba(0,0,0,.1);transition:all .1s ease;cursor:pointer;outline-width:0}.ReactTable .-pagination .-btn[disabled]{opacity:.5;cursor:default}.ReactTable .-pagination .-btn:not([disabled]):hover{background:rgba(0,0,0,.3);color:#fff}.ReactTable .-pagination .-next,.ReactTable .-pagination .-previous{flex:1 1;text-align:center}.ReactTable .-pagination .-center{flex:1.5 1;text-align:center;margin-bottom:0;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-around}.ReactTable .-pagination .-pageInfo{display:inline-block;margin:3px 10px;white-space:nowrap}.ReactTable .-pagination .-pageJump{display:inline-block}.ReactTable .-pagination .-pageJump input{width:70px;text-align:center}.ReactTable .-pagination .-pageSizeOptions{margin:3px 10px}.ReactTable .rt-noData{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:1;padding:20px;color:rgba(0,0,0,.5)}.ReactTable .-loading,.ReactTable .rt-noData{display:block;position:absolute;background:hsla(0,0%,100%,.8);transition:all .3s ease;pointer-events:none}.ReactTable .-loading{left:0;right:0;top:0;bottom:0;z-index:-1;opacity:0}.ReactTable .-loading>div{position:absolute;display:block;text-align:center;width:100%;top:50%;left:0;font-size:15px;color:rgba(0,0,0,.6);-webkit-transform:translateY(-52%);transform:translateY(-52%);transition:all .3s cubic-bezier(.25,.46,.45,.94)}.ReactTable .-loading.-active{opacity:1;z-index:2;pointer-events:all}.ReactTable .-loading.-active>div{-webkit-transform:translateY(50%);transform:translateY(50%)}.ReactTable .rt-resizing .rt-td,.ReactTable .rt-resizing .rt-th{transition:none;cursor:col-resize;-webkit-user-select:none;-ms-user-select:none;user-select:none}
Guide to Designing Stunning Website Graphics - Building Your Website - Strikingly
You don’t have to be a professional to create stunning website graphics. Granted, Photoshop is arguably still the best application for advanced design projects, it is now possible to create a unique look and feel to your website through a variety of tools and online apps. In this guide, we’ll walk you through a few hacks on how to create web graphics that will make your site stand out.
1. Aim for simplicity When it comes to website graphic design, less is more. The look and feel of your website is important but visitors do not always zero in on how fancy your page looks like. People come to your site to complete an action - purchase an item, read your blog, get a quote - and not critique on your color scheme choices. Understand that website graphical design, more than anything, should be about the user experience. Flashy and colorful doesn’t always mean user friendly.
2. Don’t add graphics just because they look nice Web graphic design is there to serve a purpose. You don’t add graphics to your website just because they look good. They should be able to help a user complete a task. Your choice of typography should make it easy for the user to read your text content and the site’s color scheme should also tie in with your branding . Well thought-out websites take care to choose website graphic designs and elements that are meaningful.
3. Make graphic elements crisp and clear The smart choice of image backgrounds is an important component of webgraphic design. This is even more crucial when you’re adding text overlay and a call to action on the background. Increase the contrast and adjust the image brightness to make the text easier to read. Strikingly’s website editor has a built-in image editor that lets you make contrast adjustments to your image.
4. Add white space White space or negative space in web graphic designs has the power to emphasize the most important elements on your website. When used correctly, it can draw your user’s attention to your call to action, message or image and make it look more powerful. White space also adds a touch of elegance and simplicity to any website design.
5. Choose your typefaces wisely As earlier mentioned, it’s dangerous to choose a font just because it looks nice. It has to be legible as well. Your selected typeface should complement your content type. For instance, while script fonts look really fancy and pretty, they may look out of place on a training website. Sans serif typefaces are strong choices in website graphic design because they convey reliability while those with rounder edges are friendlier and may look good on text content that is more casual in tone. Meanwhile, serif fonts are more elegant and sophisticated, making them look better on finance and education websites.
6. Design with the user in mind A website graphics designer creates site designs that are intuitive. Think of the user coming into your site when you add visuals to your selected template. He or she shouldn’t have to think too much about what to click next when he or she lands on your site. With the use of proper website design graphics oving from one point to the next should be natural and logical. Make sure your navigation helps users find what they are looking for. Don’t offer too many menu items because this tends to confuse the user. One call to action per section or per page is good enough. Just frame your calls to action properly so they are prominent and engaging. When you include links in your website copy, those links should tell the user clearly where they point to.
Cookie Use
We use cookies to improve browsing experience, security, and data collection. By accepting, you agree to the use of cookies for advertising and analytics. You can change your cookie settings at any time. Learn More