Current Site Development (07/04/2011)

I have recently used Ajax to save reloading my header, side bar and footer so it has saved a lot of space and data that the website uses. This has made the website a lot more efficient which now allows me to spend more of the data on a nicer appearance.

As the original design and creation did look clean and tidy I had to make the site look more attractive and to look like it actually has a purpose. So I have gotten a couple of images that show the page and its current development and also showing how the appearance has changed but it’s still very effective.

I am looking to add a new feature as previously shown in some of the older designs such as the colour theme changer. I am going to create an image and some text that resembles ‘Theme’ so the user can click on it and have a drop down menu for all of the available themes. Below is an image of where the theme change button might be and how it may look. Obviously it will not look exactly like this.



When the user clicks the button it will be able to give a noticeable drop that lets the user change the colour of the theme. Below I have presented an image that shows what it should look like.

Current Site Development (17/03/2011)

I have been working on the site to get some JavaScript at the minute I have JavaScript that is loaded from a different file and shows the date that the site was last updated; this shows the user what it is exactly when the site would have had something changed on the site, maybe a new tutorial. Below is an image of how it is shown.

I am thinking of making all of the tutorial types e.g. Photoshop, Web Development, etc. All variables within a JavaScript file for future purpose, e.g. so that if in future I wanted to remove 3DS Max tutorials and replace them with Unreal Script or Maya tutorials then all I would have to do is change the JavaScript file variable values.

Recent exercises in lesson have helped me want to use a different method, I am thinking that i will use Ajax to store the page layout such as the Header, Sidebar and footer all in an Ajax file and the page content can be loaded as separate files this would also save many resources.

Additional Features:

I am thinking of adding a mega menu to the site, most site use sub menus but a mega menu will allow me to create an organised list of tutorials under a certain category. Below are a couple of images of what i am trying to achieve.

I have got the information to do this from a magazine I bought not that long ago, I have already wrote about. Below is an image of the magazine that provides information on the mega menu feature using CSS.

New Ideas and Advanced functions

I have been working on the website a lot and it has come a long way, but i feel i need more functions and something to make used of some JavaScript. I have designed some new features i am thinking of adding to the website.

Colour theme changing:

I am going to create a script that will change the theme for the whole site, the theme will only change in one way, which is by colour but that isn’t a problem. I see it as a benefit for users as some users do not see certain colours well as others. So giving the user an option of 4 colours to work with seems like an idea.

Below is an image that shows the normal theme and on the image at the top right there is a change colour theme function at the top right.

Lets say a user wanted to use an orange colour theme they will just be able to click a colour and the website will change to that colour theme. Below is an image of what the site will transform too for the user.

Tutorial logo (image) function:

As you may have noticed on the images before there was also another function added which showed the types of tutorials logos or images if you will, under the website name on the left. This can be used to switch users to those kinds of tutorials using the images. I also plan to make it as a method of helping the user know what kind of tutorial it is they are looking at e.g. the current tutorial page open will change the icon to a big size.

Below is an image that shows this.

And if the user was to navigate to another type of tutorial the logo or symbol for that type will enlarge and the others will be small. Below is an image of the next icon enlarged.

Site Development (06/02/2011)

I have created the basic page layout to that of my designs, and below is an image of what I have made. I have tried to stick as close to my design as possible, but also using some more advanced CSS features such as ‘text shadow’ to make it look like the titles are glowing. Below is an image of the website current development.

I have realised it’s not much difference from my designs but the banner is the most noticeable part of the site. So I have a few ideas, I could create a new image for the header so it looks just like the designs. Below is an image of the new header image I could use to make it a lot like my designs.

I have also thought of making the header work in a different way by using two different images, one of the images will be for the header and one will be for the navigation bar. Below is an example of the two images I would have used to give it the same appearance to that of my designs.

+

Through this idea I figured I will be able to make the site have more functionality and give it more of an advanced appearance that will be functional across all web browsers. This would be to use sprite images. This is also a feature of CSS and it helps a lot making an (Image/button) change appearance when hovered over or clicked where all of the data is stored in one image. The site will be created to look for a certain range of pixels within the image. Below is an example image of the sprite I might use in the development of the site

I got this information and the example from a magazine I bought not so long ago, that shows some good techniques when developing websites. Below I have provided an image for the front of the magazine.

Or there is another method I have considered using which would be to use CSS to colour the background of the navigation bar links to the same colour of the images that are used for the site because this method will be saving on resources as I have a limited amount of data to cover.

I can use CSS to also change the colour of the background when the link is hovered over as well so it can be just as good whilst saving resources and data can make it seem a better option.

Initial Design

After being asked to crete designs, I created some basic designs for what I am attemptin to create. I am hoping to create the website as close to the designs I have created as possible. It makes the site easy to navigate and comfortable, the website looks clean and tidy and the colour combination doesn't cause any problems.

The first image shows the simple design I am going for using a banner, sidebar, page content and footer. Below is an image off the basic design for how the website will be laid out and how I aim to make it look.

The next image shows how the sidebar works when a link will be clicked. My plan is to make it similar to that of a drop down menu, I will aim to do this using JavaScript, this will also be helpful because I can use JavaScript to prevent repeating the text and having it changable in one place without having to change several pages of the site. Below is an example of the sites sidebar.

As you can now see there are more options availible under the Unreal Engine option. My plan is to make it so when a user clicks any of the availible links it will take them straight to that tutorial page. Below is an image of the link being activated.

If a user clicks any of the options at the top of the page where the banner is it will take them to a seperate page where all the tutorial lists are that are also shown in the sidebar when the type is clicked. For example if a user was to click the Unreal Engine banner link it will provide a view like the image below but show the options that were shown on the image above. Below is the image of banner link access to the root of the tutorial types.

Website idea

I have been asked to create a website for a module within my degree. The limitations that have been set are to have a minimum of 15 pages and the site must be under 3MB. Since then I have been asked to present my idea and I have decided to go with a tutorial website.

The website will have pages of tutorials that will be accessible to all users, there will be a range of tutorials from Photoshop, 3DS Max and even Audio Development. The tutorials with teach the users step-by-step basic instructions on how to develop using the specified software.

I will have to create and provide some designs for how I am going to base the structure of the website.