If you are interested in photography and want to learn about it, you probably have been googling to find the best and easiest way to do that, but once you’ve done that, I bet you realized it is impossible to find everything you want in one site, what leads you to browse more websites and read more articles.
All that happened to me, I gave a little thought, I am a web developer and I love photography, so why don’t I make my own website that contains the most important things about photography that you might find in different websites, it should be fairly simple, easy to navigate and anti-boring.
So I came to orangeaperture.aminedries.com, it took me three days to finish it.
The first day was for graphic design using Adobe Photoshop, the second day was to search for courses and information, and the third day was to merge design and information.
Design:
I opened Adobe Photoshop CS6 and created a new blank page, so I thought … what could be more interactive user interface of an educational website, as you can see, almost all websites use CMS, so when you read, you have to scroll down several times and it’s annoying and keeps your mind out-of-focus, so I had the idea, “Why do not I make an anti-Scroll ” website which really helps to keep your focus on the content and not the mouse wheel , so I started by drawing the main circle that contains the main details, then I added the other circles.
Coding:
After getting everything ready, I wrote a simple HTML page based entirely on the CSS file, because it would be preferable when the page loads and keeps the code clear.
After completing everything, I felt so proud to perform such work, but after testing, I realized that it is “dead” somehow, that means there is no interaction, then I thought about adding some animations, and the best way to do this is using JavaScript.
Openly I thought it would be easy, but when I got to the middle of the road, I’ve faced some problems:
1 – JavaScript animations cause serious problems when changing CSS values and to solve this problem, I had to change most of my CSS code.
2 – Images do not load all at once, so I had to make my own JavaScript preloader.
The preloader simply loads JS files first, then CSS images and then displays the contents of the page.