Web Design

STAR WARS WEB MOCKUP

For one of my design classes I had to choose a website and redesign it. Being a huge Star Wars fan, I chose to mockup their website.

star wars

Here is what the website looks like now. I think it looks pretty good but I feel that the imagery isn’t balanced/aligned very well so I decided to try my hand at it.

layout

First I used rulers to make layout. We made a web mockup in class so I used the template from that. I didn’t want it to look too similar though so instead of having four columns I stuck with 3. I decided to use Episode 7 at the top of my page because 1.) I’m excited and 2.) I feel that it’s the biggest Star Wars project in the works right now (other than Rebels) even though we don’t know too much about it I feel like its the image that fits best at the top.

Untitled

Curse Star Wars and their mass of content

Curse Star Wars and their mass of content

Next I started to create a template, I made a few measurements on how I would lay out my content. After doing some research and studying their site I realized that I needed to put a lot of content onto my mockup. However, I didn’t want rows of boxes all the way down so I tried to mix it up a bit. In addition I went looking for fonts on the internet and found this really cool Star Wars font. I found several versions of it and used the one that I felt fit best.

placing pictures

After I finished building my template I spent a few hours looking for pictures to use as my content I measured out how big they needed to be and then re sized them on a new canvas. At first I had some difficulty getting them to size properly but I got the hang of it after practicing and going back through my notes. Then I just started placing them down.

more content

This is just a screenshot of more of the content being placed. It wasn’t too difficult once I got the hang of it but now I appreciate websites more, they take a long time to make.

Thanks Riot

Thanks Riot

Personally, I'm with Cad Bane

Personally, I’m with Cad Bane

The cool thing with just making a mockup is that you get to have some fun with the content. I’ve seen a couple of other websites do this, where they place two of their characters against each other and the fans get to choose who’s better. Stars Wars does this on their Facebook page actually but I haven’t really seen them do it anywhere else. I didn’t want to copy what they did so I went to the a website I had an account on to make a poll. After I just took a screen shot and bulled off the option buttons and “View Poll Results”. I just thought it would be something cool to have on a site. On other sites I’ve seen fun polls on websites create some pretty big discussions and debates with that fans on the forums.

Thank you Lorem Ipsum

Thank you Lorem Ipsum

After placing all of my content I started to get to work on the copy. I had ideas of what I wanted each content box to say but I was short on time. Thankfully we were allowed to use lipsum.com. Which was VERY helpful. I decided to use a different font for the copy for a number of reasons. I used the Star Wars font with the titles because I felt they went well with the theme I was going for; but when your trying to read something it can be a little distracting. Also, with the font size that small it’s hard to tell what anything is.

well, it is called "Star Wars"

well, it is called “Star Wars”

Next I started to do some work on my navigation. I made a black rectangle going right across the top. If your wondering about the two rectangles on the sides are for I just wanted to make something that looked special. My original plan was to have menus that dropped out when rolled over, but that didn’t workout. I also wanted to play with the social media locations. It’s also worth noting that the black rectangles on the side and the content within are the only things that people with average () monitors can see. All the extra stuff you see later I included for people with bigger monitors. Anyways, I wanted the top to look a bit special, so I gave them a star effect. To do this I rasterized the rectangles so I could apply filters on them. Then I added noise, 10% Guassian and monochromatic. Then I placed with the levels (65, #, 120) in order to make there be less dots, but the ones that remained were brighter.

slowly getting there

Next I started finding images for the mass amount of white space I had left. I kept imperials/sith on the right and the rebels/jedi on the right. Think of it as a balance between the light and dark side of the force. I dimmed everything I found down to around 50% I wanted them to be there as a subtle detail. I felt that If they were fully opaque they would distract users from the content we want them to look at. I tried to keep them aligned with my content though, so I gave them each of them a 20px padding. While I was trying some things out I experimented using wallpapers as a background but they didn’t really work out. However, I felt that it looked pretty cool in the bottom right corner.

same as the top

same as the top

Next a made a section at the bottom for my “quick links” I pretty much did the same effect that I did with the top, I rasterized the shape, added noise, and played with the levels.

back in black

At first I was happy with what I had but I felt that there was too much white space, I tried playing around with a gradient but it didn’t look right. Instead, I filled it with a solid black background then give it the star effect that I did before. With that done I made the background characters more opaque so they would be a little more noticeable. I liked the black background better + I felt that it helped make the content boxes stand out a bit more.

Classic Yellow

At first I had trouble with the quick links because I didn’t really know what to put. It didn’t help that the original Star Wars website had no quick links at all. I finished it though after seeing what a few other websites had in theirs. The text was originally white but I felt that it looked boring. I changed it to yellow for two reasons. The first being that I think it’s easier to read over top of the black background. The second reason is that I felt it was really reminiscent to the opening crawl that’s in all of the movies.

Navigation

At first I felt like I didn’t need the navigation at the top. I thought that if users wanted to see a specific page they would click the titles in one of the content boxes below. Then I thought that if I was a visitor to that site and I was looking for something that It would be annoying to scroll down and look for it. After I added it in it looked pretty good, so I kept it.

mini lightsaber didnt work

Looking at a lot of other websites their quick links sections had little symbols before each link (arrows, bullets e.t.c) I thought it would be cool if there were mini lightsabers before each link. But it didn’t work out. When I got them that small you could barely tell what they were, not even barely, they just looked like lines. So sadly I scrapped the idea.

Star Wars: The Website

Here is my finished product. It may look a little weird because in order to see everything I had to zoom out to around 33%. In order to fit all of the content I had to keep increasing my canvas size, right now its about 2250 pixels in height (last time I checked anyways). A problem that I had was that everything looked a little small even when zoomed in. However, it might just be because my screen in really big and in order to see what an average monitor would show I would need to zoom in around 200%. All in all I felt I did a pretty good job for my first design. I learned a few things and had a bit of fun. If you have any questions feel free to leave a comment!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s