Project Outline
- Initial Ideas
- Process
- Reflection
- Designs and Screenshots
1. Initial Ideas
From the start of this project I knew I wanted to make a website. I wanted to take advantage of the javascript that I had been learning recently so I started out with a couple of ideas to implement this into. The focus of the site was the biggest hurdle as I was learning at the same time as creating so I had some ideas which I couldn't follow through with because of the complexity of them. These were things such as creating a community system, creating a blogging system, a content management system, and a lot of php intensive sites. I decided to go with a very javascript intensive site instead as I had not been learning it for too long and I felt it was a challenge which I could meet.
I came up with the idea of having all the pages load through javascript rather than html documents because of the speed, and now days people don't have a very long attention span when it comes to viewing websites. I figured that this along with a decent design would create a feeling of a very fast and functional site which users would come back to.
2. Process
There were a lot of variations of the design of the site. I spent a lot of time doing the first ones, although there isn't much likeness to them now, it still has the same css and html skeleton as the original. I wanted a very tight and tidy interface which would reflect the speed of the javascript navigation so I decided to go with very few colors and using some fairly minimalistic icons.
I started developing some content for the site and quickly found that it was taking a lot of time to do this. I made some JQuery lists which are free to use by anyone and will be inserting installation guides for those who are less experienced with html and css. The biggest project was the gallery plugin which was created using a lightbox which I modified to create a full-screen gallery. I plan on doing some future work on this plugin but with the time that I had already put into it I figured I should spend the rest on making the site more functional, user friendly, and pleasant for the user.
With the current design it is very easy for me to add more projects and with the current navigation it is not hard to organize them either. This navigation will also be beneficial incase I add archives at a later stage as it will be easy to sort out the dates within the collapsable lists.
3. Reflection
I am extremely satisfied with how the look and feel of the site turned out. However, if I was to start again I would like to have created a lot more projects to add onto it. I will also at a future point make the installations of the projects a lot easier and cleaner.
Even though the focus of the project may have shifted away from making a lot of side projects, I am still happy with the focus being shifted to instead be creating a platform for me to develop upon, and an interface of which I am happy to work with. I may not have exactly achieved what I set off to do, but I also learnt a lot of new techniques and creating a good product.
4. Designs and Screenshots
1. Original. I started out trying to create something very minimalistic. The only elements I was using was rectangles and the only color was one shade of gray.
2. Adaptation. I made a couple of adaptations before I started coding and this was probably the only one which could have been made. I didn't want to create it because it's something that I've done before. I also didn't want the navigation and logo to take up a lot of space so I decided to scrap this version.
3. Trials. After deciding to work on the original design there were a lot of trials before I coded it. I tried out some footers, sidebars, headers, different positions on the content and menu.
4. Positioning. This was the final version before I went into the coding. I decided to move the navigation over to the left so it doesn't take away from the content. I ultimately decided not to go with the images tab that I had in my photoshop documents.
5. Rethought. I had been working with a lot of jQuery and I had some ideas about how I could improve my site. I also figured that a lot of people has already seen the old design so I figure I might as well do something brand new for the surprise factor. I went into photoshop and changed the logo to just some simple text and also simplified all the type work on the site.
6. Restyled. I then went into the code and started to redesign the whole thing. I decided to go with a small amount of color to separate headers and links. I also decided to use a very light gradient to make the page a lot easier on the eyes.
7. Detailed. I decided to use some small icons here and there as it is a fairly simplistic design so I feel that using icons adds a lot to the design.
