Author(s): Daniel Mosiane
Mentor(s): Paul Zdepski, College of Visual and Performing Arts
AbstractI wanted to create a project that merges conventional web design with the kind of engaging look and appeal of video game design and video game UI design and in this example, a video game title screen design. So I had used a program called Drive. This was to explore the possibility of doing this without having to know a lot of hard coding.
00:00:23:41 – 00:00:41:04
You need to know a little bit. But most of this was just done within the program itself that can embed itself onto a website. But for example, we have these graphics here and they react to the movement of your mouse. And I have this thing that I drew up on the side here to go in the to the composition with this area here.
00:00:41:16 – 00:00:58:37
And I feel like even with such a simple setup, it creates an engaging experience. And look at the buttons, right? The buttons are also reactive to clicking, and there are even more interesting graphics. Let me put this to full screen so you get a better experience. It has a very, very nice appeal to it and this is all running on HTML.
00:00:58:51 – 00:01:28:13
Unknown
So if I go here, you can see a lot more of the work that I have created and I feel like it’s a very engaging experience and a more memorable experience than you would see in a typical kind of scrolling website design. I can talk to you a little bit more about the composition. Actually to better explain some of the compositional ideas I had when I was composing this experience.
00:01:28:13 – 00:01:51:52
I can give you a visual example here. If you take a point on the screen in the middle and extend it into a line, the line, of course, become a cross. This cross forms the basis for how space is divided in a game menu. You, for example, you’ll have the title screen coming on one side and the other buttons that support that title screen on one quadrant and a graphic element on the other half.
00:01:51:57 – 00:02:16:07
You’ll see this in many different game menus that you’ll play. And throughout the process of making my website, I had that in mind by having a character on one part of the screen and a title on one quadrant of the screen and the information on the other quadrant of the screen. This is a really good way to divide things, to communicate the information that you’re trying to give to the audience.
00:02:16:11 – 00:02:41:25
So in summary, the purpose was to see if I could create a very unique and engaging experience by combining these two principles of both website design and conventional game design with some, you know, compositional notes. The result was something very appealing that I can take and further expand on the functioning of. And this is just a prototype that can serve as a good basis for what can come with this kind of implementation of design.
5 replies on “Revolutionizing Web Design: A Game-Menu Inspired Interface”
Hi Daniel,
I think you have a very promising idea that can be implemented in the field of Web Design. I wonder if you will expand this concept to develop your Capstone project.
Cool idea. Ultimately what do you see as the most important or common implementation of this kind of design?
The engagement aspect of your design definitely stands out compared to typical websites, but do you think you could include a scrolling experience while implementing game UI elements, or would that take away from the effect?
Great Job! You’re on the path of creating better experiences for both the audience of these websites and for the creators to add more personality and flair to their websites. Would you consider delving into mobile web page design to complement the desktop version? If so, would this be a problem or cause more
To add onto my comment as it was cut, I was going to ask would this be a problem or cause more difficulty in the transition of the graphics and animations from a desktop version onto a mobile version?