When i was developing my ideas with the layout and design for my website, I had a slight idea of how my content pages could look, and because i was figuring out the navigation structure i was still unsure of how it could look, but because i've decided to combine most of my sections together (i.e. 2 sections= page Meaning 3 pages in total per chapter so there will most likely only be 12 pages on my website.) I have decided to cut some sections out that aren't worth that much attention, in order to make it easier for me to build this website within the time limit.
I decided to make some illustrator layouts for the desktop for the introductory page of the chapter and also what a section page could look like as well. I will be using illustrator to make some mobile and tablet versions and i will keep the blog updated when i decide the layout for the content for the other platforms. Below is an example of the introductory page and how it will most likely look like for each chapter, with a few content changes obviously.
With this layout, it allows me to add an introduction before the user jumps right into each of the sections so they get an idea of what this chapter is all about and the whole site as well. I wanted to add more of a skyline design into my website but didn't know how to do it, and i wanted to portray this because i wanted it to relate to my overall design of my iBook.
I decided to create content boxes that separate the content so the user doesn't get lost or the content doesn't look messy. The way i decided to portray this skyline theme is by having the 1st content box with it shaped with the top of a skyline. I really like this idea and with the other boxes underneath it gives a sense of travelling underground and the tectonic plates laying underneath the city which is what i wanted to achieve with my layout and design of the site but originally didn't know how to present it.
For the first content box it will have the title of the chapter to the left, and have some text intro ducting the page with potentially a video at the side for the user to watch which is to do with an overview of earthquakes. Originally in my iBook i added a gallery, so want the second content box to be an image gallery where the users can click on the images and get a lightbox image pop up. Underneath that I want to display the section button rollover images, and that will take the user to the individual page of a section.
Below is an example of how a section or section combine will look like on a page and there will be a little banner indicating what section the user is on shown in the example below with 'tectonic plates'.
Above is what most sections will look like, but it will vary depending on the content of the sections within the chapters. At the top i will most likely have text content and a video, and underneath that i might have text with images or just an image depending on the sections, but i will figure out exactly what will go on what page at some point soon. Underneath all the content i am thinking of adding some rollover image links to the other pages, either to go to the main content page within the chapter or the other section within the chapter or even the following chapter after the current one its on. However i'm still figuring out if i will add this or not and might save this til the end of the project if i run out of time, i won't use it.
At the moment I've gotta figure out how the mobile and tablet versions will look like on the content pages and also what will be hidden content and what won't be, depending on the platform. Overall i've got a pretty good idea of how my overall site will look like, and i will continue to develop my ideas further, in order to have a full understanding of what will be on what platform and how it will be displayed for every page.
No comments:
Post a Comment