In direct continuation of conveying the branding message and the connection to the potential customer through the text and content on the website,
In this chapter we will talk about the main element that makes a website excellent or... less - the design.
In the digital world, visual language is of great importance. Conveying messages through the sense of sight is an art and a Torah in itself, in this chapter we will try to touch on the highlights that are important to pay attention to when it comes to building a successful website with a strong visual language.
How to begin?
Graphic design for a website is different from a simple design for publication or print, since it contains many elements.
The role of the design and graphics is combined - on the one hand, to facilitate the user's experience and create a pleasant and easy-to-use site where the drive to action is highlighted in an accurate visual way. On the other hand, the design and graphics are responsible for conveying the hidden and most important messages - reliability, creativity, hedonism, luxury and more.
In this chapter we will detail all the significant elements that will help us create a strong visual language for your website:
Let's get started?
Building a visual language
Similar to the previous chapter where we dealt with the question - who is my business and how does it speak?
Here we ask ourselves - who is my business and what does it look like?
To adapt ourselves to the target audience in an optimal way, and to create a website that speaks the main message we want to convey to our potential customers - we need a strong visual language.
The visual language on the website is made up of several elements that are very important to support each other -
צבעוניות, פונטים, תנועה וכו'.
If we try to explain ourselves through the negation, when you come across a site that is not good in terms of design, probably something in the combination of the message, the colors, the caption, the movement on the site and the combination of the images - do not correspond with each other in a good way.
Even before the work of the professional, it is very important that you understand the direction you want to aim for in terms of visual language.
It's time to ask yourself again, and this time with a design focus:
- Who are my customers and how would I define them?
- What is the thing that my customers value/need the most?
- If my business were a person, how would they dress for a talk in front of this target audience?
After we understand a little more deeply the nature of the design and the best visual language for our website,
We will try to look at the references of other sites in the field and analyze what we see:
- Are the lines round or sharp?
- Is there traffic on the site and what is its nature (bouncing, soft, static)
- How do they emphasize their message? In a pushy way or between the lines?
- How did you choose to use colors on the site? (quiet or noisy coloring, soft or strong colors)
Write your own conclusions and try to think from a bird's eye view - what will the visual language look like on your website?
After understanding the basics, we are ready to move on to the practical design.
Designing banners or sliders
After we have built the visual language, we can design the visual tools on the site accordingly.
There are many options for displaying images, graphics and visual content on the website, and this is exactly the time when we will choose the most appropriate options for our website by considering the two previous chapters and the current chapter: We will refer to the structure of the website which we prepared in the first chapter, in combination with the texts and content which we prepared in the second chapter andaccording to the visual language that we built right now-
We will be able to choose in the most precise way the visual tools that we will present on the site.
Icon design
The use of icons can facilitate the user experience and basically works on the visual instinct that exists in each of us.
Both in choosing the design from which the icons are composed and also in choosing the location and frequency of their use, we will take into account the first step in this chapter and in fact we will try each time skip between the micro (the icons and the specific message they are supposed to convey) to the macro (The visual language on the website and the overall message it is supposed to convey).
Color settings
Choosing the colors for the website is a particularly important step that critically affects the overall visibility of the website and the visual message we convey.
We recommend choosing a palette of 3 colors, when we will associate each color with titles, highlights and running design.
At this stage we will choose the dominance of each color in the website design, taking into account the visual language we built at the beginning of this chapter.
ניתן להעזר גם כאן ברפרנסים מאתרים שאהבתם (או לא אהבתם), וכדאי לנסות 'לשחק' עם שילוב הצבעים כדי להבין איזה שילוב הוא הנכון ביותר ובאיזו רמת דומיננטיות נרצה שכל צבע יופיע.
Fonts and titles
This step is the necessary continuation of the previous step, and it is also important and vital to the visual flow on the site and the visual message we wish to convey.
We recommend choosing 2 main fonts, where one font refers to titles and buttons and one font refers to secondary titles and running text. Another recommendation that can change the visibility of the text from end to end is the spacing (or alignment) of the letters/lines, and the use of highlighting or text effects when necessary.
Atmosphere and product images
At this stage, of course, it is important to bring the photos relevant to the service or product/s...
If there are your photos of the specific products and/or services, it is of course better because it will convey the authenticity - and the uniqueness of your specific service/product.
Also - if you don't have relevant photos - you can find a very large variety of photos, whether atmospheric photos - or photos of a specific service, in the many image databases that exist on the net for this particular topic.
We recommend checking the links in this article – which gives links to the existing common repositories.
Separation bars and spacing
אלו אלמנטים שנוטים להישכח, בדרך כלל נזכרים בהם כשמסתכלים על האתר ואומרים 'חסר לי כאן משהו…'
Many times when the designer is not experienced in website design, the content on the website is not properly spaced. It is important to remember that the site needs spaces, in order not to look like a certain amount of blocks stuck together. At this point, we will find the ideal balance between content and pause.
effects and backgrounds
הטאצ'ים הסופיים שנבצע בעיצוב האתר חשובים במיוחד ומשפיעים באופן סמוי על האופן בו נתפוס את האתר ועל המסר שהאתר מעביר.
According to the visual language we designed, we will adjust the effects on the site and decide whether the site will be static or will it have movement? Will the movement be soft and gentle or frantic and jumping?
We will also decide on the use of textures or images in certain places on the site as a background. Here too it is important to have a perfect match between the visual language and the message we want to convey and the actual design and what it transmits.
Reference to screen and mobile sizes
It's important to remember that people are going to view your website in different sizes - from large conference room screens to small cell phone screens.
התחום הזה בגדול נקרא "רספונסיביות" והוא מתייחס למתודיקה שאליה מתיחסים בהתאמת האתר לגדלי המסכים השונים – וכמובן בימינו יש המון משמעות במיוחד לנראות האתר במסכים סלולריים.
אחד ההבדלים המשמעותיים ביותר בהתאמת האתר למסכים סלולריים – הוא ההבדל הפיזי שאת מסך הסלולר אנחנו בדר"כ מחזיקים לגובה במצב פורטרייט – ולעומת זאת – מסך המחשב כמעט תמיכה מונח אופקי/לרוחב – ולכן אלמנטים רבים שנראים יפה שהם מתוחים לרוחב המסך במחשב – לא יקבלו את אותו אפקט כשיופיעו במסכים סלולריים – כי למרות שיופיעו לכל הרוחב – לא יהיה להם הגובה המתאים/הרלוונטי – ולכן יהיה צורך או לחתוך חלק מהתמונה – כדי שיהיה במימדים פורטרטיים – או לבצע התאמה אחרת – כדי שמה שהתאים לתצוגה פנורמית יראה יפה במצב פורטרייט – ולהפך.
In conclusion
Designing a website is a journey in itself, and it is important to invest resources and thought into it as much as possible.
We have put together a number of tips that will help you prepare for the website design process:
- creativity - Try to think of colors, shapes or anything else that reminds you of your business or service.
- consistency -Try to think of connecting elements between the designs of your pages or posts.
- involvement - Try to be involved in the process of designing your website or logo.
- suggestions - Listen to several suggestions, and try to take the best from each one.
- don't get carried away - Do not exaggerate the amount of colors describing your business. We have already said that a uniform visual language is important.
- openness - Listen to the advice of the experts, don't get stuck on one and only one idea.
- tenure - Be sure that you are satisfied with the design you receive, it may stay with you for a long time.
EN 
HE