Part 1- The Arduino
In this task, we were told to create our own Arduino project. This is an electronic circuit board that can be used to create various devices. So first, I'll need to do a little research. I tried to find a few examples of projects people had created using an arduino:
Project 1: The Tweeting Plant
This circuit has been set up to measure exactly how much water a plant has, and when it needs water, it will send you a twitter message letting you know.This can be seen below.
Once you've given it water, it'll even tweet to you to say thanks. Finally plants have a voice! Through social media apparently.
My idea: A small room of motion sensing lights Exactly what it sounds like. my idea was a room of basic design with small furniture and lights/lamps. They're motion sensing so put your hand in and they'll all turn on, take it out, they'll switch off. The basic idea is to have a box, with two windows cut into opposite sides. I will hook up a couple of motion sensors to a wall placed down the middle, and attach LED lights to the corners. When you put your hand in the box, the lights will light up.
I plan to make the project look somewhat akin to a house, making the walls out of wood, the windows out of cling film or plastic, then adding small pieces of furniture, made of cardboard or wood. it won't be very large, 20CM high walls at most.
Environmental impact of this concept (what methods will you use to measure this?)
My product will be a way of raising awareness for turning off lights, and in turn other electrical appliances when not in use, to reduce your carbon footprint. The motion sensors mean your hand will need to be in the box for the light to be on, then out when they turn off, showing that you only need things on when you're actually there, and there's no point keeping them on after you leave.
Additionally, I will be using recyclable materials, wood, and card for example, making sure the product is environmentally friendly in itself. Legal issues you need to research for this concept
As far as I know, small wooden houses exist, but are not copyrighted, neither is anything else I plan to add to the project. The furniture and small model people may be small enough to swallow for young children, meaning I may need to put a health and safety warning on the bottom of the box Ethical issues associated with this concept
The product itself isn't a problem when it comes to ethical issues. It is only designed to light up, and turn off, with a simple hand movement. however, the materials used could be used in the wrong way. For example, if it were to be burned, there would be a forms of plastic for the side window, which is extremely damaging to the environment. Software skills/Electronic skills/manufacturing skills that you will need to learn to produce an interactive prototype of this concept
In order to produce this product, I will need to learn the basics of coding things like lights turning on and off, how to put together an Arduino circuit, using a breadboard.
This is the circuit board I've created with the Arduino to represent how I'd turn on an LED light with a button. That's it. I tried.
So I then tried making a cardboard prototype, here's how that went:
And that's how that went. The actual project hadn't been started yet, but I had a concept and a cardboard prototype. Now it was just a matter of collecting the parts needed. I could put together a box with wooden parts quite easily, the circuit itself wouldn't be so easy. I'd planned out how to make lights turn on and off using the virtual breadboard above, but I needed to put that into practice.
The idea, was that I'd hook up LEDs to the walls along with motion sensors, upon putting your hand in front of it, it'd turn on, conveying the message that when you leave a room (Or take your hands out) You need to switch off lights. The idea could also have been adapted into a toy for children, if I'd made some parts, like a few characters movable, I could have made it into a playhouse type project, with lights that turn on and off whenever the people inside move around.
This was a table created to compare various game releases, The structure was left blank due to lack of knowledge of what to write there.
So what if we were to compare two games from different times? Let's take System Shock and Bioshock for example. I never personally played system shock but I have played a fair bit of Bioshock and System shock was the predecessor of Bioshock, before it became a franchise. Bioshock is listed in the grid above, and as we know, is a first person shooter set in an underwater city known as Rapture. It focuses on two elements, combat, and story. System shock focuses on the same sorts of things, taking you through an interesting story while giving you fun gameplay and combat.
Bioshock in-game
So lets look at what Bioshock does differently to many other games of its genre. For one, it adds the use of a mechanic called plasmids. Plasmids are powers you can obtain by utilising a substance named Adam, which can rewrite your genetic code. Powers can include the ability to freeze your enemies, Fire flames at them, telekinesis, and even being able to fire bees from your hand. Combined with conventional weaponry, you are able to take down larger enemies along with numerous other smaller enemies. This combat mechanic means you need to simultaneously manage ammo and eve, combining the right weapon with the right plasmid to counter a particular scenario. If you're being chased by multiple enemies, you may want to freeze a few enemies and shotgun the few active ones to thin their numbers and temporarily disable each group so you can deal with them individually.
System shock in-game
In system shock, Most of the base elements are the same. You play in first person, you are given weapons, but no plasmids. The feel is very similar to bioshock, being enclosed in tight corridors and having no way of escaping. I cannot say as much about system shock due to not having played it before, however I can give basic similarities and differences.
Both system shock and Bioshock are set in inescapable areas. System shock is in space, and Bioshock is in an underwater city. Despite this radical difference in location, the enclosed, empty feel remains. Everything alive out there is trying to kill you, Bar big Daddies and little sisters in Bioshock. And even then, you have to kill big daddies. Both games include weaponry of their own sort. And overall, they're both very similar games, with only a few differences.
So how has time made these two games different? One of the most noticeable aspects is the graphics. Look at the two pictures above. The system shock screenshot is what the game looks like to play. Bioshock, as is quite clear, is the graphically superior game. But since when have graphics made a game? There are a few other things that time has used to differentiate the two. System shock has a very different control scheme to Bioshock. Whereas Bioshock had a basic control scheme of moving the mouse to look around and using WSAD to move, System Shock worked very differently. For one, instead of WSAD to move, it was SXZC. As far as I know, no other games have done this. Instead of just moving the mouse to move, it was R to look upwards, F to centre your view, and V to look down. A was to look left and D was to look right.
The control scheme for both games are very different, with Bioshock taking up the scheme more people nowadays are accustom to due to ease of use. System Shock using a control scheme of a very unusual nature, which isn't so easy to use.
The storytelling in both is intriguing. Bioshock taking an approach of having someone guide you over the radio, and a few audio logs you can listen to should you find them, giving you information about the plot and what's happened there in the past. System shock does something similar. Acquiring log disks and reading e-mails allows you to put the pieces together and work out what's going on. There are no other friendly NPCs to interact with, whereas in Bioshock, you will meet the occasional friendly person. Though one very noticeable theme, is I have yet to actually stand in the same room as someone friendly. You'll see them through glass, hear them on the radio, but never actually go up to them before they either turn against you or die. This creates a very distinctive feeling of isolation, there is hope out there communicating with you, but you only ever see what you're up against. System shock does this as well, making sure you never genuinely meet anyone friendly.
These two games are very similar in their execution, their environments, and their story-telling. So because of the more intuitive control scheme, and just improved game in general, Bioshock would have to be superior to me. I cannot say for sure due to only having played one, but from what I can see, system shock is still a very good game.
Research into Mechanics
The first thing we did was focus on looking at other games to take pointers. The game tried, was a simple flash game "Fireboy and Icegirl." A local multiplayer game focused on co-op. Or you could just
be weird and play it on your own controlling different characters. The video below shows me and Alex's experience with the game:
3D Game pitch and development (Everything I've done)
We'd had a look at how one game worked, now it was time to try our luck at actually designing a game and pitching it for kickstarter. Our task was to design a complete game and create almost a trailer for it, promoting it and making people want to donate to it. Concept art was drawn and 3D modelling was used to place various structures in the environment of the game we'd made.
The game my group decided to make, was one I'd partially designed last year. Now we were taking it further, still in unity. But this time with an actual story in mind and new design choices. We named the game "Archives" and our company; "Node Interactive" Then got to work thinking of ideas for the various mechanics of the game. The basic concept was essentially a maze puzzle game. You'd interact with devices in the maze to partially take control of the maze and move walls, open doors, replace traps etc. The story, was a little more complicated.
Essentially, two alien races had been feuding for centuries, and one day, a ship transporting intelligence crash lands on earth. A defence mechanism activates and the ship blends in with its surroundings, becoming a pyramid. The inside of the ship starts building the ultimate security system so one day its owners will come to collect it and it will remain safe in the meantime. The mechanism; a maze, built inside the ship, is where the entire game will take place.
The kick starter pitch below was put together by me with graphics and edits created specifically for the game and company. The title is correct, this was draft 4 of the pitch, the first wasn't created by me, the second wasn't used, the third was the original trailer we showed to the class, and the 4th, seen below was the final version.
This pitch was then sent off to an industrial panel, in which they would judge the game itself, along with the pitch. The following are the comments we received:
Other things in the group were designed by me, the logo for the game was created with various static effects and a font downloaded from Dafont. I added a pulse effect a slight 3D curve, and the effect was done! The Node Interactive logo itself was about the same sort of thing. Different colours, a different custom font, and a few small changes to the way the static worked, adding in a double behind to give the logo a kind of atmosphere. Things designed by me can in fact be seen in the video. For example, I designed the concept for the glove, sketching it out and going over it in pen. This was just a concept but the drawing itself can be seen below.
Overall in the group I helped a little with concept art, but mainly focused on designing the graphics for the logo and putting together the pitch, 3 times. I designed several things and even added two pages to a 10 page assessment of the game. I focused on explaining "Gameplay" and "Gameplay Mechanics." These can be seen below:
The above page, as you can see focuses on explaining the various gameplay mechanics for our game. The picture you see was taken directly from in-game footage, and depicts a Node found within the maze. I wrote this page explaining the way Nodes worked in our game, how they could be used to access the maze, and the glove that can be used to interact with various different elements of the map. This is just one of the two pages I worked on for the overall 10 page project.
The second page I worked on just focused on gameplay itself. I explain alot of the story here, touching on why certain things play as they do. For example, I mention the fact that this maze looks like an ancient temple, and that the reason for this is because the spaceship it's set inside has blended to its surroundings. This gives the whole game a particular feel as you walk through sandstone corridors and glimpse various paintings on the wall.
Advancing the Archives
The next stage of this project was to actually start creating this game, to make it a reality. Each group member was assigned a different task to make this game. I was assigned as sound designer. This meant I had to create all the music for our game, and add sound effects.
The first thing I did, was find a way to make music. I used a combination of Soundation (an online in-browser music creating tool) and Garage Band (A program exclusive to Mac). First of all, I made a list of the music I needed to make.
I needed:
- The Main Menu Theme - The Node Theme - Ambience - Death Music Main Menu
So I got to work. First thing I created was the main menu theme. I used Soundation entirely for this one. I needed something that sounded futuristic, yet mysterious. The thing is, the player wasn't supposed to know entirely what was going on so they needed to understand they were in an ancient stone-looking maze, but there were strange elements of technology, giving the feeling that everything wasn't quite as it seemed. So I wanted to give the same impression in this theme. I made sure it stayed mysterious, while retaining it's feeling of an alien, or futuristic setting. The finished piece can be heard below:
The Node
The next task was to make the theme for introducing the Nodes for the first time. This piece of music would be played for the first encounter with the Node as well as whenever you took control of the maze. I wanted to make this theme with a similar thought process to the main menu theme, keeping it futuristic and mysterious, yet this time I wanted to add a sense of action. There were gears turning, lights powering up, it was meant to be a big moment in the game, so I made sure it kept the puzzle feel about it, not turning it into too much action, but just giving it enough action to add excitement. The finished track can be heard below:
Ambience
One of the main soundtracks in our game had to be playing constantly in the background. The player had to feel immersed, and trapped somewhere far beyond their own understanding. The game had to be immersive, and the player was inside a spaceship. There's no such thing as complete silence when you can breathe, and the spaceship was no different. It was still active, it still had power flowing through it. I decided to place a few sounds throughout to give the impression that there were other things happening around the ship. The finished track can be heard below:
Death Music
This music was created for the sole purpose of having something play when you die. You fall into a trap, you get impaled etc, and this will play. Players probably won't hear the whole thing in-game, since you can respawn with a click, and skip the song, but some may stay longer than others, so best to have a relatively short song they can skip than just a sound. The finished track can be heard below:
2D Game Development
The next thing to do was design a 2D game, so I decided to design a level, based around the sort of RPG feel, like pokemon or other similar games. The program I decided to use for this was RPG maker XP. The program was easy to use, and allowed quite a bit of freedom to do what you wanted. Now all I needed was an idea of what I wanted to make. It couldn't be too complicated given the time restraints, but I still wanted it to be unique. Eventually I decided to make a game designed for two players, Either online, or at the same computer.
I came up with a basic concept of utilising a day-night cycle to have two players interact, who never actually saw each other. One player, would wake up in the day time and walk around a forest, interacting with various things they found around the map. Opening doors, placing down objects, and overall changing the world they were in. Then, at night time, the day time player would be sent back home, and the night time player would activate. They would do exactly as the day time player had done, but at night, and with different paths. There would be certain doors that were open to one player but closed to the other. Certain objects one player needed that only the other could access.
The players would be able to make choice. Work together, or against each other. After five days of this cycle, a disaster would strike, killing just one of them, both of them, or neither of them, depending on how the game had played out. The hardest option, obviously would be to have both of them survive. The easiest, to work against your other player. However this would depend on who you were up against. You may lay down a trap, then the other player finds it, and reworks it, so it only works on you, then when you go to check it, to see if it weakened the other player, you end up falling into it yourself.
The death system will work in such a way that it will usually not end a game early. The night time and day time player each have a set of abilities, with each death, The day/night ends for you, and one of these abilities are taken away, restricting you further, but making your remaining abilities stronger. Until you are left with just one ability, but one very powerful ability. If you are killed and you lose your last ability, the game ends, the winner, being the survivor. If you decide to work together however, you keep all your abilities (Unless you manage to get yourself killed) and you have a chance of both surviving the disaster.
My Idea
So, I wanted the game to be unique, and playable for two people. I wanted the game to be in-depth, but not overly complicated, it was 2D after all.
I started making the game with a simple room, adding a few basic objects and such to give it a "roomy" feel. This house will pose as the home for one of the players, and will be the area they respawn each day upon death or when night time begins. I wanted it to seem quite bright, so I made sure most of the objects were by the walls of the room, and added a window of course. This meant the room felt a little more spacious for the player.
This shows a few of the interactive elements I currently have in the game. You are able to look out the window, or look over the bookshelf, each with their own text prompts. A few of these give hints. And once complete, they will seem out of place to the player. The text prompt here is stressing about the fact that it's still light, and combined with the books they will be able to find, it starts making the player really think.
The next thing I worked on, and probably the most important thing, was the forest outside the house. I made sure to keep it basic, scattering trees and shrubs, and putting in a few easter eggs, such as an abandoned campfire, or a pond with an island in the middle. The campfire can even be seen in the top right of this picture. And the stump of a tree just at the bottom.
Of course, in order to leave the house, the player had to be able to go down a floor to get to the door. So I made the bottom floor of the house quite simply. Adding the basics, such as a small kitchen, a log fire, as if to show the player has been living here for at least some time. I made sure it felt quite cozy. Not too empty or creepy, just so the player would know this is the day, and this is safe.
The next thing I worked on, was the night time house. I wanted it to have a very different vibe to the day time house, almost opposites. So instead of giving it an upstairs, I made this house with a basement. The house needed to have an air of uneasiness about it, but at the same time, the player needed to feel like this was where they were safe, where they woke up every night, and that this was their own personal area.
Of course with a basement, it also needed a ground floor. Again, I felt like it needed to show the player that they'd been living in the house for a while. But at the same time I wanted the house to feel uneasy. So I made sure it was relatively empty. Empty baskets and pots. However, I needed to show that the player had indeed been living here, it couldn't just be empty. So I added a few books on the table and a potato sack.
Finally I created a video, explaining the concept of the game, and touring the map. The music is not in-game, and I only currently have one player as a placeholder.
Coding and web design: Starting off 3rd September 2014 Coding HTML This stands for "HyperText Markup Language" and is the basic language for coding a web page. It follows a set of rules, including a way to open the code and let the browser know what language you're using. You can do this with: "<!DOCTYPE html>" You'll notice this uses another rule in this code, which are parenthesis symbols "< >". There are quite a few other rules this code follows, such as using lines to activate certain triggers, which end with a "/>" symbol. Without these rules, the website will not function. CSS
This stands for "Cascading Style Sheets" and is combined with HTML to add aesthetic design. In a way, the HTML is the skeleton of the website, whereas the CSS is the code that makes it all pretty. Javascript
Javascript is another form of code used for web design. Think of it as a more advanced version of CSS, but with more capabilities. It can be used for other things, such as games design, meaning you can also add extra features to websites, using it as essentially HTML and CSS combined. The downside to this, is Javascript is quite a bit more complex than either CSS or HTML.
Code Academy
Today I've been taking a tutorial on coding on the Code Academy website. I started off by selecting the HTML language to try and get the basics of coding down. I was told to type a sentence between two pieces of text between "< >" these symbols. It looked something like this:
<strong> feel free to change this text </strong>
Very polite, giving me the option like that. So I typed this
<strong> This code is stupid! </strong>
and was then greeted with my first badge after clicking "save and submit code." It looked something like this:
Brilliant! My first badge! I was on a roll. My next screen was the same layout, just this time the coding area was blank, with just the number "1"
The text on the side started off with what seemed to be something important "HTML stands for HyperText Markup Language. Hypertext means "text with links in it."
Learning already! I was learning HTML, which according to the program was the bones of the code, while CSS was what made everything look nice, the skin if you will. The following points were mentioned:
a. Always put <!DOCTYPE html> on the first line. This tells the browser what language it's reading (in this case, HTML). b. Always put <html> on the next line. This starts the HTML document. c. Always put </html> on the last line. This ends the HTML document. I then proceeded to type out this piece of code: <!DOCTYPE html> <html> What pumpkin? </html> Congratulations for those of you who get the reference. All this code does, is display the text "What pumpkin?" on a webpage. Text 101, I saved and submitted code, then moved on to the next task. Page 3 explained how things between the < > symbols are called tags, and that almost all tags come in pairs, and opening, and closing tag, E.G: <html> Text goes in this bit, followed by a closing tag here </html> making up your code. Think of it like brackets (like this) but with more stuff. Apparently you can put tags within tags, meaning the most recently opened tag, must be the first to close E.G: <first tag><second tag>Stuff to do with things!</second tag></first tag> and so on if you decide to add more. I wrote out another code, the instructions telling me I could write whatever I like between the tags, just like before, so my code consisted of: <!DOCTYPE html> <html> Whatever you like </html> And on to the next: I was told now that I needed to add a title to my webpage, using the tag "head" in the appropriate way, as in header, followed by a "title" tag: <!DOCTYPE html> <html> <head> <title> Hey look now I'm coding </title> </head> </html> This is what I typed out, looks kind of long winded. Nothing appeared on the webpage but when clicked submit, it let me pass, so I can only assume I won. The following page looked like this, all the information can be seen on the side:
So I rewrote my code, followed the instructions about creating the body of the webpage, and this is the code I came up with:
So far so good, I was starting to make everything look just as overcomplicated as professionals do when they code things!
On second thoughts...
Luckily I earned my second badge at this stage, my first lesson badge! See below:
On to the next lesson, and I was greeted by a screen telling me about headings and paragraphs. This course seems to be teaching me more about the layout of an essay than the language of code so far, but baby steps. The code I could see pre-typed for me was this: <!DOCTYPE html> <html> <head> <title> Headings & Paragraphs </title> </head> <body> </body> </html> And presumably I was meant to fill in these giant blank bits with my new second-to-none coding skills consisting of tags and bracket styles. I was ready for anything this program could throw at me, as long as there were step by step instructions to the side telling me exactly how to progress.
It's everything I'd hoped it'd be! I was now starting to get tags and heads and bodies stuck in my head! Try looking at that out of context! The next set of points were brilliant:
I was now tasked with creating different heading sizes. I can't help but notice everything I've learned to do so far can be achieved quicker and easier in microsoft word. But this is teaching me coding, so lets not complain. <!DOCTYPE html> <html> <head> <title> Headings & Paragraphs </title> </head> <body> <h1> Content </h1> <p>Whatever content I like. Take a look at my amazing coding skills!</p> <h3>Heading number two has been formed, see?</h3> <p>Although apparently that's not quite enough and I need mutiple paragraphy bits.</p> <h5>Sorry how many headings do I need?!</h5> <p>I'm just forming nonsense! Coding really is just what I expected! Lots of nonsensical letters all over the place!</p> </body> </html> Coding at its finest! The next lesson was essentially getting me to add all the other sizes that weren't in the code before. My finished code wall can be seen below:
Here we can see my amazing coding and just how bored I got with typing headers. Then finally, adding the various paragraphs to the headers:
The tutorials were starting to get repetitive, but hey, at least I was retaining the information! The next piece of code looked like this:
<!DOCTYPE html>
<html>
<head>
<title>
Testing testing 1 2 3
</title>
</head>
<body>
<h3>Just let me learn something new!</h3>
<p>So I'm meant to put personal informationhere and I refuse so nyeh</p>
<p>Of course I'm meant to do three of these paragraphs</p>
<p>So I have to fill them with something</p>
<h1>
Content
</h1>
<p>Whatever content I like. Take a look at my amazing coding skills!</p>
<h2> Slightly bigger than the text below!</h2>
<p>This amount of text is stupid!</p>
<h3>Heading number two has been formed, see?</h3>
<p>Although apparently that's not quite enough and I need mutiple paragraphy bits.</p>
<h4>Slightly smaller than the header above</h4>
<p>I wanna be the very best, like no one ever was!</p>
<h5>Sorry how many headings do I need?!</h5>
<p>I'm just forming nonsense! Coding really is just what I expected! Lots of nonsensical letters all over the place!</p>
<h6>And this is apparently the size that serves the tea.</h6>
<p>look at this glorious paragraph</p>
</body>
</html>
I feel like a computer genius.
Now we all know those pieces of text that don't look like a web adress and have no right to be a hyperlink, yet the blue highlight and underline lets you know the truth! This piece of code shows me how to do just that! <!DOCTYPE html> <html> <head> <title></title> </head> <body> <a href="http://www.codecademy.com">Here click this because I said so.</a> </body> </html> Now the next page introduced me to something new, imagery! Apparently, in order to place an image on your webpage, you need to get the image URL with a right click, the type <img src="ImageURLhere" and put it somewhere in the body section. Here's what I did:
Yes I put another reference on my web page, and it's glorious. The next page started to tell me about putting links in images to have them lead you to other places. First you're meant to link the duck to the code academy website itself, so I did, then I linked the image I places with a certain website he's involved in.
The next page decided to test my new found skills and told me to code in two images, one with a link leading to a random page, the next without, then code in a sentence, also linking somewhere, I came out with this: <!DOCTYPE html> <html> <head> <title>The land of links</title> </head> <body> <a href="http://thebest404pageever.com/swf/cage.swf" <img src="http://img2.wikia.nocookie.net/__cb20121021201838/mspaintadventures/images/d/d1/Johnangryflash.png"/></a> <img src="http://cdn.thesurveycorps.com/wp-content/uploads/2014/01/AOTVG2014.jpg" <a href="http://www.mspaintadventures.com/?s=5" <p> This leads to something, probably...</p> </body> </html> I feel I've done a good job here, and for my efforts, I even earned a new badge!
The HTML course was complete! I was now offered the chance to build my own webpage in the "Build your won webpage" course. Figures.
These were all the badges I managed to collect during the tutorial:
The final page http://www.codecademy.com/courses/web-beginner-en-HZA3b/2/6?curriculum_id=50579fb998b470000202dc8b Task 2- Poetry Slam I was given a task, along with multiple others, to design a website for an event known as "The Poetry Slam." The previous website was to be replaced with my new and improved version, created with my newly acquired coding wizard skills. The client mentioned these features to be added: Target audience- Teachers, Young people, schools, and librarians. The client also requested the target audience to include language schools, community groups, prisons and businesses etc. Appearances- The current website is described as "Dry, plain" and old, they want the newer version to be exciting and visually appealing. Specifics- The client specified they wanted a slideshow banner on the main page including quotes, pictures, videos etc that rotate on a cycle to give an idea of what the poetry slam is like. Then another slideshow-like thing with pictures fading in and out and quotes, much like the above, but possibly not necessarily a banner, on the events page. He mentioned it would also be good if we could put in testimonials on the pages for school, arts festivals, and business training to show that previous participants enjoyed themselves. General Requests- The client asked that we change the events page to make it more "exciting and somehow list previous and upcoming events/workshops, but more importantly show photos and quotes from previous workshops, that either rotate or fade in and out along with testimonial quotes." He also asked we make it clear past workshops have been successful and received well. Issues in Web Design- Many websites have many flaws, I decided to do a little research into what sort of flaws can be found so I can avoid them for the poetry slam website task. Functionality: This is one of the most important aspects of web design. Functionality is how the website works, it's needed from basics, like going to another page, to having a music track play in the background on certain pages. If it's not functional, it's broken, and if it's broken, no one is going to use it. Responsive Web Design: This is how well the website responds to various interactions from the user. If the user clicks a link, how fast does the next page load up? Responsiveness can give your website a cleaner, smoother feel. And stops people getting bored. Usability: Usability is how easy the website is to access and navigate. How easy it is for a user, to use the website. This is another important aspect that many web designers can get wrong. They can put certain links in places that people wouldn't notice them, or make them so small it's difficult to click them without clicking something around it instead. On the other hand, boxes can be hidden behind other boxes, stopping you from clicking the link you want. Speed/Efficiency: This links in with responsive web design above. How fast your website runs doesn't seem initially important, it's seems like one of the final tasks, optimising your website to be a little smoother. The problem is, this is a very important feature. People browsing the internet generally have much less of an attention span than when away from the computer. So how fast your website responds, is essential to having people stick around instead of getting bored and leaving. Aesthetics/Colour/Fonts: The way your website looks, works just the same way as anything works. If your colours don't match or things seem to be all over the place, people will quickly lose interest. A website that looks good may keep your viewer around for a little while longer, even if it's not on a topic they would initially be interested in.
This has to be the most ironic thing I've ever seen. The image above is the website for the "Center for Advanced Visual Studies" and as you can see, they've advertised their skills incredibly well in their website alone. If you want to make work like this, then the "Center for Advanced Visual Studies" is for you! Lets be honest, how long would you want to stay on this website for education purposes? Content is key: Of course, one of the most overlooked, yet core aspects of a website is content. What does your website want to tell people, what does it include? Is it light hearted and created for pure comedy, or is it created for a serious issue going on in the world? This is purely up to the website creator as to how much information they include. Wikipedia, one of the most well known sites in the world. Yet it's so incredibly bland. This is one thing that's not so good about the site. Everyone uses it, but only for the content, and even then it's not entirely reliable. Not to say wikipedia is bad through and through. Quite often you'll find what you're looking for, but it may involve scrolling through blocks of text for a while. So websites can work with very little aesthetic design. The content of your website is everything. Memorable/Distinctive: This aspect utilises multiple other aspects previously touched on. The Aesthetics help your website to stand out, so it sticks in the users mind, the colours may have been particularly distinctive to your message. While content is what really makes it work. The whole purpose of your website existing may pull the user in, touching on a few topics that interest them, or keeping them entertained enough to make the want to return. Making your website have its own distinctive look and purpose is key to making it stand out against the billions of other websites out there. Brand: Your brand links with the above. It keeps your website memorable and distinctive. This can include a slogan, a logo, a particular colour scheme, even a particular layout. This gives your website an identity, a way to say that this website isn't just another wikipedia page, it's a unique website with a unique message, whether that message be humour, raising awareness, buying products, playing games, if it's yours, it needs to be branded by you as a web designer, to give it an identity. Accessibility: Web Standards/Coding Correctly/Guide Lines: Security: Compliance: Image Format: Fixed vs Fluid: Consistency/some font-imagery:
Paper Prototyping
Me and a small group were tasked with designing the layout of the website using a method known as paper prototyping. We started by designing the homepage and about us page, the demo can be seen below!
The higher picture being the homepage draft and the lower picture being the About us draft. We'd discussed the basic layout then split into two smaller groups to design a webpage each. We then started work on the gallery and the events and bookings page, which looked like this:
Finally, we got to work on the feedback page, there were more to do but these were the pages we were able to complete in the time. The feedback page can be seen below:
We then started work on actually sketching out website layout ideas, now that we had an idea of functionality, although this time, we went into the task alone. I proceeded to sketch up several web page ideas, 6 on one side, and started to go through them and decide which ones we particularly liked.
Website coding
I started off with a blank HTML template to work from, giving me the basics of coding the website.
The final design came out as this, not very good, I know, but at the time I didn't have that much knowledge on coding, and hopefully, I can improve it. All the links work, but only the home button takes you to an actual page.
Website Homepage Evaluation
The website you can see above was not that good, obviously, but it was still a pass with interactive elements. The navigation bar at the top of the page is already partially interactive. The home button will take you back to the homepage, essentially at the moment it's a refresh button.
The other links on the nav bar will just take you to a page that informs you the page does not exist. The latest news banner has a small problem of moving with the page as you scroll or as you resize the window.
I can probably solve this, but the issue is locating the problem in the sea of code. The social media symbols were taken from google images as public domain and linked them to their sites.
