After the good reception of yesterday’s post, in which I talked about before submitting a project proposal, today we will go into more detail on another of the points that I mentioned in my article on . Design.
Obviously questions about design focus on the look & feel of the web. It is completely separate from the discussion about the content and structure of the web. Design is usually (always) a subjective matter, so it is very important to establish a clear pattern.
Outline and wireframes
Starting at this point is key. We cannot start designing like crazy. First of all we must establish the “skeleton” of the web. This consists of the modular structure of the web, and the different sections of it. Obviously, this will be according to the content that we have (or that we want it to have).
web outline
This point consists of making a kind of conceptual map of the different web pages, and where each one of them leads. It is usually a hierarchical structure in which everything starts from the home page, and is divided into categories, sections, subpages and so on.
An image is worth a thousand words, so I better give a simple example to understand it better:
As I already said, this example is very simplified, but it helps to give us an idea. Each website is a world apart, with which the extension of this map can be modified to infinity and beyond. But it already serves us to see the main characteristics of the design. In this case we can see that surely in the home we will need a menu with four main sections (services, products, blog and contact).
wireframe
Despite having such a name fashion, it is still a normal “sketch”. Here we are not going to go into design issues yet, but only content structure. Where each content block should go.
We will have to make a wireframe for each “model” page. Some “templates” will be for a single page (home page, contact page) and some will work for many pages (category template page, post template page, generic template page, etc.)
This point is very important, as it will make the next step much easier. Otherwise we could be stuck for weeks with the design. The client tends to come to an agreement very quickly with the designer on this point, and that is positive because it gives the project a very good vibe, and there is a positive feeling of fast progress.
It is very important that in order to approve the wireframe the client signs it. I mean, physically. It is a kind of “taking responsibility” for the decision. Many times this mini procedure makes him come out of the coma in which he is immersed due to “guilt” of his day-to-day work. Psychologically if you make someone sign something, they will pay more attention. And he knows that later it can no longer be modified (at least within the agreed budget).
design approach
Very good, so we already have the theme of the web schema and the wireframe ready. So we’re going to chicha, we’re going to design, right?! Well no, not yet. First we have to agree on a few things.
Because? Well, because in the same way that any client of a bar carajillo is a “soccer coach”, every client is also a “design critic”. Everyone thinks they have a unique and correct opinion about what is beautiful and what is not. That is why it is best to make an approximation, asking for the following data:
Key points
There are three key points that we must be clear from the beginning of the principles, because they will mark the seed that will flourish on the web:
- The logo: Essential. The web has to be consistent with the logo, which must always be visible. In other words, it is better that they not be taken to kill.
- The color palette: Surely derived from the logo, they will indicate the base and complementary colors.
- The typography: It does not have to be the one with the logo, far from it. But if it should convey the same feeling as the rest of the web.
These three points are key to adjusting and building the rest of the web. A website for bachelor parties is not the same as a website for a law firm. Each one should transmit different feelings and sensations. Seriousness, fun, experience, youth, joy, modernity, etc.
Complementary material
If the client has more corporate material, we will also study it. Perhaps the business card, a catalogue, merchandising material, advertisements, campaigns and any other printed work may be of value to us to follow the same style. Obviously, if the client has a brandbook it would already be the host. But let’s not ask the elm for pears, nor for the figs to fall. Usually there’s just a lousy logo and an even worse business card.
Images
In the event that you want to incorporate images to brighten up the web a bit and not make it too dense, you must decide whether to opt for real images. (Not from the King, but from the company itself, workers, processes, etc.) or if the stock images option is chosen, which must be purchased from third parties, with the relevant rights.
In any case, the style of the photograph must be detailed, as well as the number of them. If, for example, there are 20 categories and each one has an illustrative image, there will be 20 different images to add. If there is a blog on the web and you want to illustrate each article with an image, you should look for a fairly large database of images, etc.
Inspiration
On some occasions, especially if the client has no corporate image (shit happens), you should choose to analyze and assess other projects to awaken inspiration to the client. Websites, magazines, sketches and any other element that may indicate what type of design is desired. It is very normal to show the client some websites to see what type of design may interest them the most. Many times a very good approximation is achieved by selecting a little here and a little there.
It also serves the opposite, that is, to discard. We can show the client a few examples from our portfolio or from other websites so that they can evaluate them either positively or negatively. Approaching what is desired is just as important as ruling out possible designs or elements. It is common to ask the client which are their favorite websites.
I particularly like to make this point with the competition. The client’s main competitors are chosen and they are asked to rate their websites, both positively and negatively. What do you like about each one? What do you dislike? The client feels very motivated to do this small spying job if it is his competitors, instead of websites that do not interest him.
personify the web
One last point to take into account is that of personifying the web. The design choice process is much smoother if you have first discussed the personality that the project should convey to users. Should it be a young and trendy website, or more conservative? vintage? If the company were famous, who would it be? How would I dress? What would it be called? Would you go out to clubs or rather gala dinners? These types of questions direct us to the type of design quickly.
PSD design
Once we are clear about all the previous points, now we do! Now we can dare to “fill in” the squares that we had marked in the wireframe. All those sketches that have been indicated in the first section can now be replaced by the corresponding elements, and put a candle to San Pancracio to hit the target the first time and that the client is happy.
For example, the design of my website (at the moment) would be this:
As we can see, what is delivered should already be what the web will be live and direct, that is, online. From here, we will have to work on all those modifications, changes, fixes and others. Once we have approved the design of the initial page, we move on to the next one. For example the contact page. We grab our square wireframe, the candle, and fill it in!
Once all the designs are approved, we can move on to the next one… the programming of all this design in HTML and CSS (Now you go and bark it). But that’s another post… 🙂
We read each other!
Facebook Comments
Disqus