Website

At the start of November 2011, I drew up initial designs for a one-page website on a subject of my choosing. As such, I also needed to design a logo for myself, and learn how to make the buttons work, and take the user to the place I intended it to.

My first designs for the website were drawn up on Photoshop, using the rectangle tools to lay it out in a grid, with each rectangle on its own layer (so that they could be moved independently) and labeled, so I knew what it represented.

 

After I’d laid out the initial foundations of my website, I started acquiring content for it. I sourced this from what I’d build on a game called Minecraft earlier in the year, and decided that this would be a way for me to share my designs with fellow Minecraft players who wished to add these models to their own worlds. I got most of this content from screenshots I took in game. They are my target audience for this project.

I had to design my own logo on Photoshop, at a size of 400x400, since it didn’t need to be much bigger than that. I decided that I’d like it to depict a bolt of lightning striking the ground, and used two colours (black and white) to keep it simple.

I also incorporated a brush of my own design to use as the flash effect for the lightning strike. This brush was drawn by hand on a 200x200 Photoshop canvas using the line tool and a circular brush.

I decided against downloading a new brush for Photoshop to draw the lightning bolt in the shape of an R (or, at least an R without the “spine”). To further emphasise the R shape, I changed the opacity of the brush tool, changed he size, then drew an R (minus spine) around the lightning bolt to match the other letters (G and C).

I added the final word “DESIGN” into the logo to add a feel of professionalism to the logo, and chose the CGF Locust Resistance font. The logo was then included on the left of the header banner.

I also made use of roll-over buttons to change the colour of the navigational bar buttons from the blueish-grey colour to an orange version, chosen as orange is opposite blue on the colour wheel, so the colours compliment each other when they are used together, and looks better with the rest of the page, whilst still standing out. I also used roll-over buttons for the links to my blueprints on my Blueprints page of my website.

I also included plenty of images collected from Minecraft screenshots I’d taken, some edited to enhance visibility (as with the image on the Home page of the movie version of Thunderbird 3 docking with Thunderbird 5, which was brightened a couple of times so that the image wasn’t too dark to see what was happening.

I also made 2 buttons to Facebook, and 2 buttons to Youtube on my homepage, so that the user can go to my Facebook page and Youtube channel, as they are both popular social networking sites that can be used to help broadcast to a great number of people at once. These links open the appropriate sites in a new window, so that the user can conveniently flick back to my homepage whenever they like in order to access the other features of my site.

I think my design was moderately successful. I think it was successful in the sense that it looks good, and provides all the necessary and relevant information, but what I don’t think worked was how I had to put all the text in as an image, because Dreamweaver doesn’t allow more than one font, colour or size in the same cell, and doesn’t allow backgrounds to be put in the table cells to help my text stand out from the background. Another problem I encountered was that when I copied my site over to the web host with Filezilla, the Home button on the Blueprints page didn’t link back to the home page, and an error occurred (which was a problem with the coding, where the file “index.html” that it was supposed to link to was spelt with a capital “I” rather than a lower case), and despite amending the problem several different times using different methods (including changing the code, the name of the index file in 2 different places, and removing and re-adding the link to the button, as well as taking the site down and reuploading it several times), the problem still occurred and kept replacing the lower case “i” with a capital in the source code every time it was uploaded.

The software I used to create my site was Photoshop, Dreamweaver, Safari (web browser) and Minecraft (the game from which the screenshots were taken). I used Photoshop to draw up the original concept for my website, drawing the banner at the top, my logo, the buttons, and editing the images supplied. Dreamweaver was used to construct the website itself, simple as that. Safari was used as the proving ground for my website (playing the website on Safari through Dreamweaver to test everything worked), as well as using it to access Youtube and Google to troubleshoot if anything went wrong.

Minecraft, like I say, is the game from which the screenshots were taken. This is a sandbox construction game, and allows players to build castles, towns, mansions, underground bunkers, ships and much more, limited only to their imagination.

The testing I did for my website before trying to put it online mainly involved making sure all of my links worked, and I was taken to the correct page, and if necessary a new window. To test them, all I’d do was open the Dreamweaver file in Safari and click the button, and if it took me to the right page, then it worked. If it didn’t, then it wasn’t working and it’d need fixing. I also did spelling checks, since if you use text speak on the internet, you don’t tend to get taken as seriously as those whose spelling and grammar are correct (4 xampl if u tlk like this u r not tkn srsly n ppl fink u r trollin [Translated: For example, if you talk like this, you are not taken seriously and people think you are trolling]).

To transfer my website from my Mac onto the webhost, I used a program called Filezilla, which was a simple log-in, drag-n-drop procedure, although some problems were encountered which I have been unable to fix (as mentioned in an above paragraph concerning the coding of the home button on the Blueprints page).