Hello, I'm Director Oyabuchi.
When creating a website, the director is involved in every process from the start of the project to launch, but today I would like to talk about the process leading up to the creation of the design.
When we say creating a design, we don't mean that a designer starts production from a blank slate.
Before you begin creating your design, you need to take a few steps to prepare.
Preparation before design
The type of pages required and the content to be posted on those pages will vary depending on the website you are creating.
First, we grasp the overall picture of the website to be created, decide what should be prepared in advance, and then proceed with the upstream process.
1. Create a sitemap
Decide the number of pages on the site, page categories, and what the main sub-pages will be, and then put all the pages on the site into a site map.
If you find yourself missing pages midway through production, it will have a major impact not only on the design process but on all subsequent processes as well, so creating a site map is essential and must be done carefully.
You will decide on a site map that represents the hierarchy of your site, such as top pages, main pages, detail pages, and other pages.
2. Decide the outline of the page and the structure of the top page
Based on the site map, we will create and decide on the general outline of pages that will be common to all pages on the site and a wireframe that will determine the structure of the top page.
Page Frame
The main elements of the page are as follows:
- Header
- Footer
- Side menu
Links to major subpages should be placed as global navigation and stored in the header.
Consider what elements will go into the header, and then think about which pages and elements you want to include in the footer.
Recently, it has become common to not place side menus on the top page, but only on lower-level pages.
The side menu of lower-level pages will mainly contain local navigation that allows users to move between the same categories.
The above is just one example, but this is how we decide on the general framework.
An example of wireframe for the main part of the top page and sub-pages.
The top page will prioritize the content area, and lower-level pages will have local navigation to make it easy to move between categories, while the headers and footers will be common to the site, and the "big framework" of the top page and lower-level pages will be decided.
Top page structure
Decide on content that is suitable as an entrance to the site, such as links and elements that will lead to major sub-pages.
Especially on the home page, it is important to carefully consider the priority of the links and elements you place.
We will try to express as much as possible the order of placement, the appearance of each element, and their size using wireframes.
An example of a home page wireframe.
The layout of the content area on the top page will be determined with the main image and guidance to the major pages below as the top priority.
This step involves creating a wireframe, which acts as a blueprint for the page.
By deciding on a blueprint, clients and project members can share and align their understanding of what will be placed, where and how at the pre-design stage.
Material preparation
It is also necessary to prepare the materials before starting the design.
- logo
This is the name of the website and is often based on a fixed format such as the client's company name.
In that case, we ask the client to provide the images and original data.
If you haven't decided on a logo and need to design one, decide on the name, font, etc. in advance.
- Catchphrase
It is common to include a catchy slogan on a page, such as the top page.
The text may be prepared by the client, or it may be written by the production team in accordance with the client's requests, but the text is decided in advance.
Including a catchy slogan can significantly change the direction of the design, so it is necessary to check in advance whether a catchy slogan will be included and what kind of text will be included.
- photograph
Sometimes we ask clients to prepare photos in advance based on their requests, such as "I want to include this photo on the top page."
If a client has a specific request for a photo with a certain image in mind, the production team will prepare a temporary photo that is close to the desired image.
Whether or not a photo will be included and what kind of photo will be included are important pieces of information when designing, so be sure to check in advance.
Design Production
Now it's time to start creating the design, but from this point on the production process will be mainly led by the designer, so it will be necessary to "hand over production" by sharing information with the designer.
Although we already have a certain amount of information necessary for production, such as wireframes and materials, sharing information with the designer about the concept of the site to be produced and the process by which the wireframe was constructed will lead to improved quality in the design process.
Designers may directly consult with clients to decide on things at the early design stages, such as the color scheme (base, main, accent) that will follow the concept.
- Decide on tone and manner
We decide on the tone and manner that matches the concept of the site, such as color, basic font size and style, and shape of each element, the core aspects of the design.
- Brushing up
Elements that cannot be expressed in wireframes, such as photographs, icons, illustrations, page size, etc., will be fine-tuned at the design production stage to determine the final presentation, from the small details to the overall picture.
Subpage design
Unlike the top page, lower-level pages need to be designed while working out the details of the content. When creating lower-level pages, even if the outline of the page has been decided, the content of the page may not be created with only the information in the site map.
For example, clients often request the following for content on sub-pages:
- I want to renew the page so that people can learn more about my products and services.
-I'd like to create a page introducing our employees, but I'd like some suggestions on what kind of content it should include.
In some cases, we need to start from scratch and think about the content of the page, which means we need to spend a lot of time planning before creating the design.
Below is an example of the production process.
- Consult the client regarding information and elements of the page content.
- If the client needs to prepare manuscripts or images in line with the proposal, we will consider whether this is possible and decide the page content.
- Creating a wireframe
- Create a design that reflects the overall framework and tone.
For sub-pages, we may design according to the specific concept of that page.
It is necessary to carefully consider from the planning stage whether there is sufficient information about products, services, people, etc., and whether it is easy for users to understand.
Example wireframe of sub-page.
The details you include will vary greatly depending on what your page is about.
We will decide the layout according to the headings and text.
summary
The preparation that takes place before creating a design is like building the framework.
If some of the bones are missing or the structure is weak and flimsy, no matter how much effort you put into the design, you may need to make modifications later, and the design will not stand out.
In web production, I think that the start of design creation is the process of putting the final touches on the page.
In order to ensure that designers produce a good finish, I try to provide direction that does not neglect the pre-processing.
モノサスアーカイブ