How to design the internal pages after the layout is approved?
In a previous lesson we looked at how to create a great layout of a website for a client. Once the draft is approved, you will need to work on the other internal pages. And once the home page is created, the other pages will follow with less effort since they share the same structure with slight variation in the graphics and the order of the the content.
Let’s see how we can develop and graphically create the internal pages of a nursery website for one of our clients.
The first thing to do is to save the file home.psd, as asilo.psd. This way we will be able to keep the same graphic layout without changing the file used as our main page.
Some elements will be left untouched. In our current graphic layout, things such as logos, links and background images will stay the same even in the internal pages. Keep in mind that making too many changes can be spotted when one is moving from one page to another. This can be confusing for the viewer and it can be detrimental to the overall look of these webpages.
This notion can be summarized with one word: coherency.
Let’s start by editing the photo in the heading: it’s advisable to choose for the internal header certain images that can convey the message of the entire website, thereby visually representing the website’s textual content. For example, it is preferable to use a series of photographs of the nursery, the playrooms, and of the outside of the school since we will be working on the page that includes a description of the nursery.
Once you have chosen an image, you can transform it into a pattern in the same way that was described in the previous lesson. You can click on the style levels in the square containing the picture, and choose the pattern you want to apply to the image.
Before working on the graphic layout of the page, it is important to have an idea of the type of contents that will be inserted. Is there going to be a lot of text present in the website? Are there going to be images as well? Will the page include many other subpages? These are some of the various factors that need to be considered before working on the graphic layout.
The “nursery” page contains a brief introduction as well as two links to the “structure” and “personnel” pages, that we looked at before in a structure that has been defined. Let’s start by changing the title and inserting the textual content: this will allow us to see the website and the unoccupied spaces within its pages through a wider lens.
As you can see, there is not that much text, giving the page a look of emptiness that is quite unattractive to look at. We should come up with something to add, which we will cover at a later stage.
Now we must decide on how to insert the links to the internal pages. It is best to insert the navigation menu before the textual content, so let’s move the text to the bottom of the page and create a space in-between the title and the text.
At this point, you can unleash your creativity. It’s clear that links included as text will not be pleasing to look at as well as not being very effective so much so that viewers might miss these links entirely.
With a bit of imagination we can change all this. Le’ts draw an orange cloud to evoke the already-used cloud theme. We can then add an image of a smiling child and a couple of doodles so that our menu acquires a totally different look.
Now we can remove all of the other graphic elements found in the file home.psd that we have no intention of using in this page, like the image of a child with the right-hand banner and photo gallery. This is what it will look like:
The top part is ok, but it is clear that we will need to add some elements at the end of our page, which now appears too simplistic.
It’s up to you to experiment: images, colors, drawings, brush strokes. It’s important to try out various things until you find a creative way to fill the void still there on the page..
Looking for a good idea that is simple and quick? Let’s choose an image, in this case the following:
Let’s put it in the background, lowering the opacity to 60%.
Looks nice, don’t you think? Now let’s choose our ‘spokeschild’ for this website. Remember what the main objective is: reflect the business or organization involved in each and every graphic element present in the site.
Let’s place the child in the background, with a “darken” fusion setting that is enabled so that the background image peeps in from the pad he is carrying. This is the end result:
On the pad we could have added a slogan, a brief text description or a comment from a satisfied parent, just as we have done before with the banner and child in the homepage. These are choices that you will have to make, specifically on how to manage and combine concepts with design.
In ten minutes we were able to create a great looking internal page, using images and colors while also integrating all the graphic elements with one another. What’s next?
Our next task will be to codify our graphic draft. Next Monday we will cover xhtml and css.
The other articles in this guide:
- How to understand the client’s needs on the first encounter?
- How to calculate costs and delivery time of a web project?
- How to develop and organize the structure of a website?
- How to find inspiration and design the layout of a website?
- How to present the graphic draft to the client?
- How to make the internal pages after the draft’s approval?
- How to export a psd into xhtml and css without losing your soul? (part1) (part 2)
- How to index a website without being SEO experts? (part 1) (part 2)
- How to make sure of not having committed errors before launching the website online?
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »