Gaming Websites

image: pexels.com

I talked about children’s websites, tourist sites, political campaign sites, and even websites for vegans. Now I decided to look at gaming websites, and what makes their design so perfect for their audience – gamers.

I took a look at Hawken, which is said to be the best game website out there in terms of design, and it brings a somewhat different approach to video game websites because it blurs a video game site with a community website. This site features an great looking slider, a blog, video portal and community driven pages. Hawken’s website truly brings a unique experience.

Dead Island: Riptide is the next on the list, which is a pretty impressively designed site because it has great “flowing” animation to it, with a few unique features that can be played around with using your cursor. As you navigate through the website you will find that the animation and graphics are really tailored to the user’s viewing experience.

A popular gaming site, Halo: WayPoint is the third best designed.  Waypoint brings the creativity and the style of the Halo games right into the website with its design, menu and beautiful fonts. It features a slider with a fresh Halo look and Halo styled video players, which allows for easy and simplified user engagement. This site brings the Halo experience online with leaderboards, game stats, forums and blogs.

One I am familiar with, Animal Crossings: New Leaf, is the fifth on the list. This magical life simulation children’s game has a colorful and artistic design with music, animation, guided tours and even has a built-in community website. As you navigate through this website you may just get inspired to create a unique colorful, animated website design of your own.

And finally, one I know most people have played, Plants vs. Zombies, is also on the list. This website really brings all the information and content you really need on one page; no need to navigate through unnecessary pages. The website also has integrated the actual game on the homepage with links and images linking to full versions to the game.

Inspiration Web

image: pexels.com

There is a website that I found that’s purpose is to inspire web designers and entrepreneurs  with web designs and templates all over the internet (webdesign-inspiration.com) It includes fonts, templates, mockups, icons, vectors, textures, graphics, and more. Siteinspire.com serves the same purpose, except they showcase more interactive design and have a directory to find agencies. Thebestdesigns.com is another place to mark as a place to stop and look for people who may experience a creative block. Believe it or not, admiretheweb.com is yet another destination for inspirations on web design and trends that a designer might want to visit for an extra push on a project. And, of course, there is pinterest, filled with pinned templates and website designs that someone could come across to help them make that first step in creating a website. Of these websites, I enjoy the siteinspire.com the most because it has a random generator of websites that anyone can look at. I also keeps the sites organized on variety and not just one specific style that stands out online today. These are all important places to bookmark in case I am in need of inspirational creative design when I become a freelance web designer.

The Pro’s Guide to UI Design

image: pexels.com

Creativebloq is a great place to find articles and advice on the world of web design. An experienced UI designer gives readers the low-down on what it’s like to be a user interface designer. He breaks down the work into four categories: you communicate with the client, you research, you design and prototype, and you communicate with the developers. Client communication is about understanding the client’s problem, the goal is to have an idea about what the client’s business is. This is a time where we as the designers ask a lot of questions to become an expert on their industry. “A tip for your own happiness here: choose the industries you work for wisely, so you don’t end up being an expert in something you don’t care about or have an interest in.”

The next phase is research, where I will have to do a lot of field studies, workshops with the client as well as analyze the competition. This step is necessary because it informs me on my design choices and can help me in the future when I need to explain why I made certain design choices.

Design and prototyping is when I sketch it out or start to code. This is where he talks about the editing tools he prefers to use, and mentions that everyone has a different place they like to go to for this step. “Being able to use the Adobe Creative Suite and apps like Sketch competently is the equivalent of being able to use a pencil to draw or a brush to paint.”

The final step is developer communication, which is a process of detailed specifications, provided assets, as well as reviewing the design with the client. “The best designers know the challenge isn’t in creating the design, but in communicating it – not only to the stakeholders who have to give their approval, but also to the developers who have to implement it.”

Parallax Design

image: pexels.com

I wanted to find websites that use parallax as an element. On Creativebloq.com, there are 18 examples of the technique. However, it starts out by saying that designers should be aware of using too much parallax because it could end up looking messy and confusing to users. The definition of parallax is when the background moves at a slower rate than the foreground, creating a 3D effect as you scroll down the page. The idea is to create depth on the pages. A-Dam is a website that sells pairs of pants, and they use parallax to showcase their boxer briefs and shorts for men. They have a white foreground layer and then scattered images of their products that scroll over top of the page. Myriad sells office furniture, and uses parallax by arranging different photos of furniture over top a white foreground. Parallax can get crazy creative with sites like Firewatch, who uses six different layers to show a three-dimensional experience (firewatchgame.com). This Firewatch site showcases how unbelievable and innovative web design has become. Of course, however, the designers understand that the only part of their site that should be parallax is the top fold of the front page to get the user’s attention, and then the rest of the page is easy to read and doesn’t leave me seasick.

A site that CreativeBloq refers to for understanding how to do such a six layer parallax provides the coding that I can copy and paste onto my site (Codepen). I plan to bookmark this page and try it out myself!

Tips for freelance web designers

image: pexels.com

According to an article on creativebloq.com, it’s important to “be amazing at something.” I guess that’s an interesting way to put it, but she’s right. She explains that “You need to be a specialist…Don’t just settle for being one of several thousand fair-to-middling freelancers who never get picked to do great work and will just only be recommended by a smaller group of connections.” Clearly, it’s a good idea to know what your strengths and weaknesses are as a freelance web designer. The next tip is also self-explanatory, “Take some risks.” We’ve pretty much been taking risks as a class together, trying out each framework on Dreamweaver. Basically, if you’re on the way to being a freelancer, do something that scares you, because it could end up paying off. “If you don’t think you’re experienced enough to win a job, try anyway. Putting yourself out there can be difficult, but if you don’t ask, you don’t get! Stop being afraid and just do it.” Something that I’m not surprised to see on this list is to “have your own website.” This is what I plan to have at the end of the semester. My own website that is also a portfolio of my projects. The author states that it’s necessary to build a web presence, one that stands out. “Your work [is] being hosted among competitors…a unique personal URL that showcases your talent, skill, personality and creative vision. It’s your ‘business card’ for prospective clients.”

An article on shopify was written by freelance web designers for freelance web designers. It features advice that they would have given themselves if they were beginners like me. “I wish I knew more about how the industry worked. Too many freelancers start out with insufficient industry experience. As much as you may hate it, go and do some time in an agency or a development house so you know what to expect with clients. That way, clients can rely on your knowledge of the ins and outs of client work.” – This is a huge source of information that I didn’t consider. Maybe I’ll look for internships where I can pick up this knowledge. Another post explains that we should go where customers are looking, “In the beginning, I was cold calling websites that I knew didn’t have a great experience. As you might guess, the results weren’t great — it was too much work for them and they didn’t know or entirely trust me yet. Eventually, I started promoting myself where potential customers already were, and that’s when things really started to take off. Websites like eLance, oDesk, and eventually the Shopify Experts Portal proved to be extremely useful at the start of my career. Customers on these sites have money to spend and are already looking to hire a developer.” Finally, a post I really appreciate is to stick to your gut and focus on your strength as a freelancer or web designer. “Identify what you do really well and focus on it. You may not have that luxury if you are just trying to keep food on the table initially. It may take a few months of trial and error to figure out what really works and where your sweet spot is. Trying to be all things to all people means you are nothing to anybody.”

Think about what kinds of products you want to own:

image: pexels.com.

Thinking about the products I would want to own as a freelance web designer I would probably want to purchase the creative cloud for InDesign, Photoshop, Dreamweaver and Illustrator. Out of school, this costs $49.99 a month, or $69.99 a month depending on the services I want.

According to http://www.creativebloq.com/illustrator/alternative-to-illustrator-1131664, there are several different programs that are similar to Adobe illustrator that I can consider. Sketch is an editor that has a large set of web options such as the ability to copy CSS styles directly to the the clipboard. Like photoshop, there are multiple artboards, with tools such as drop shadows, fills, gradients. Affinity Designer is also an option, and can be tried out for free.

For alternatives to InDesign, Scribus uses grids, frames, and layers for PDFs. Personally, I use InDesign as an editor for the school newspaper, so having this would help me gain skills to format a page for print if need be.

A Photoshop alternative is GIMP, a free open source photo editor that is said to be easy to use. With drawing tools, layers, and other editing options, GIMP is a gift for freelance web designers.

Considering photography equipment, I already own a white sheet and black sheet that is meant for photographs. I also have the right lighting equipment for photos. I got this for Christmas, along with a Nikon 5000 camera. I’ve also recently gotten different lenses for depth and perception photos. In the future, I want to invest in a tripod to make my images steady.