Although as a web designer you will usually be regarded as the “look and feel” person for a web site, you are also a key partner in determining the site architecture. As you design, you often define how the site will be navigated. Is this web site one page or will an end-user “click around” the site to other areas or sub-pages and explore? Where will each page inter-link or link out to other websites? What is the main navigational element: a navigation bar? Where will it reside on all the pages? Is this site content or search driven? All these questions (and many more) require the entire team’s involvement (and a client’s opinion) to make the appropriate decisions. As the web designer, it is your job to work with all of these elements at a visual level—navigation bars, search fields, buttons, title bars, footers, and more—and fit them into the overall web site design.
Designing for the web and for print are similar in that they have the same principles and goals for an end-viewer: appealing content that works together in the space. Although the principles are basic, they represent guidelines that improve any web page design. Here are the techniques:
Proximity
Before designing the layout in Inkscape, it can help to plan the placement of the main areas of a web page—in essence to help with the design’s overall alignment of items and proximity of similar items. For our purposes, we’ll create a simple main web page for a small business. This main page will have these areas:
Each web page project is different and you may have to add more page elements to this list or delete some so that the final list of elements fits the needs of the overall design. For the purposes of getting agreement from a team working on this project, a good practice is to create a basic layout showing where each of the areas will be placed on the screen—and is often referred to as the web page wireframe. Typically, wireframes are completed before any graphics are created. The following screenshot illustrates a basic layout or wireframe:
This high-level approach is a great start to actually building the page design. It gives us general placements of each area of the design and then we can set up grids and guidelines.
When you open Inkscape, it opens to a new document. However, we want to ensure that we have a page size that is the right size for our web page, so we create a new document based on predefined desktop sizes, which are common web page sizes, as follows:
Choose a template size based on the browser standards or specifications.
Most of the templates in this menu are based on web designs. If you want to view the print media template sizes, go to the main menu and select File and Document Properties and view the Format section.
Let’s set a few more preferences and then save the file with your project name before we start designing.
When designing any space on the web keep the page clean and—as stated in the design principles and techniques—aligned. So let’s make the canvas grid viewable on the screen and set up some guidelines based on our wireframes.
With your new document still open on your computer, on the Inkscape main menu select View and then Grid.
You’ll see that a blue grid will appear across the entire canvas area. We’ll use these grids to create basic areas of our layout and then create guides to begin creating our actual layout elements.
Guides are lines on the screen that you will use for aligning i.e. guiding objects. These lines are only seen while you are working in Inkscape and we can set objects to “snap to” them when we are designing. Both of these simple tools (guides and the Snap to feature) will give you automatic alignment for the basic areas of your web page layout—which in turn will help your web page have the best design.
To create a guide in any open document, make sure the Select tool is selected and drag from the left side or top of the screen towards your page as shown in the following screenshot. A red line represents the guide until you ‘let go’ of the guide and place it on the page. Then the line turns blue.
You can move the guides after placing them on the page, by using the select tool and clicking and dragging the circle node on the guide.
Now let’s discuss how to use wireframes and create guides based on those web page layout elements.
When you create documents within Inskcape, you can have layers of objects. This gives great flexibility when creating web layouts. You can move groups of objects on a layer, separate objects by layer, and ‘stack’, re-ordered, or hide layers. Settings can be set by layer, so you can save drafts or different versions of mockups and keep all of this in one file.
The layer you are currently using is called the drawing layer. It is selected in the Layer Dialog and is shown in a darker color. In your open document with viewable grids let’s make the layers viewable and create a layer called Basic Layout.
You can also press Shift + Ctrl + L on your keyboard to display the Layers Dialogue.
Here’s where we begin to transfer our wireframes into Inkscape so we can start the design process. To start:
Here’s roughly what your canvas should look like:
Once all of your areas are blocked out on the canvas, we’ll need to convert the current rectangles into guides so we can use the guides when creating our web page layout graphics.
Project file management
To keep all files for this project in an easy-to-find location, it might make sense to create a project folder on your computer and save this design file within that folder. As you export designs for use within web pages and HTML, you will need a number of files. Using a directory or folder to house all project files makes them easier to find.
In this article we took a look at architecting a web site. We discussed design techniques that can make web pages move from good to great.
In the next article, Creating Layout Example in Inkscape, we will see an example to create a web page layout.
Further resources on this subject:
I remember deciding to pursue my first IT certification, the CompTIA A+. I had signed…
Key takeaways The transformer architecture has proved to be revolutionary in outperforming the classical RNN…
Once we learn how to deploy an Ubuntu server, how to manage users, and how…
Key-takeaways: Clean code isn’t just a nice thing to have or a luxury in software projects; it's a necessity. If we…
While developing a web application, or setting dynamic pages and meta tags we need to deal with…
Software architecture is one of the most discussed topics in the software industry today, and…