Wednesday, March 19, 2014

A Step In The Right Direction

Here's a rough draft of what I'm thinking the new layout will look like.  This is just a representation of one featured article on the site.  What I'm excited about is that I can write a script that does this all automatically.  So, if I had uploaded the screenshot shown in the image below, my server would have taken that screenshot and created this entire text article preview from it.

A preview of what the new article preview layout will look like


This is probably a little ways off from what the final design will be, but it's definitely a move in the right direction.


Starting Over

I'm starting over, but not from scratch.  I like the look of the website, but at the same time I don't.  It looks like every other gaming site out there, and I'm not making every other gaming site.  I'm not targeting gamers, I'm targeting gamers who have taken the ambition to start creating games, for whatever reason.

So, the website design, in-so-far as graphics, is getting scrapped.  Granted, it catches my eye and makes me start looking around the content, but that's where it loses me.  The graphics are so busy that it's hard to pull any content out of the page.  Time to start from scratch.

The good news is that after a 30+ hour programming tear with no sleep, the registration and login system are just about complete.  It took so long because I was adamant to adhere to a few rules:


  1. No pre-written code.  I have several login systems that I've built over the years, any of which I could have grabbed quickly and thrown into the site.  But I'm a better programmer than I was 2 years ago, and I wanted to start from the ground up with brand new code.
  2. Security.  I've encrypted, hashed and salted the shit out of everything.  Right now the only thing stored on the database in plain text is your username.  It may seem extreme, but I wouldn't want my e-mail address sitting in plain text on someone else's DB (although I'm 100% sure that in a lot of cases, it is), so I'm not going to do that to my members.  Same goes for my birthday, my phone number, my zip code (none of these are even included in the registration form on my site, but if they ever are, they will be handled the same way). 
  3. I tried to break it.  Over and over again.  And was successful repeatedly.  It sucked, and it's still not quite done, but every way that I've managed to break it, I've fixed.  So now I know that other people won't break it doing the same thing.  That brings peace of mind.
  4. The majority of things I told myself I could finish later, I've already finished.  This is not the first time I've launched a website before, and I know from experience that there's a good chance that the chance for "later" may never come.  Best to get it done now.  Which means relentlessly testing forgotten password links, confirming email address, breaking forms with ignorant mistakes, encrypting or hashing anything stored in the database concerning users, building an easy to use UI, etc. etc.  It's all done.

So, I'll be deploying the new registration and login system within the next week or so.  I've still got a few monotonous things to fix with the forgotten-password and confirmation-email systems.  For now it's back to the drawing board in-so-far as graphics.  

Tuesday, March 18, 2014

Adding Some Interaction to the Layout

I had intended to start working on my registration and login systems, but I got a bit sidetracked.  I ended up spending this morning making the elements on the screen more interactive.  Everything below is data driven, and any repeats you see are the result of not having enough games listed in the database.

You can now scroll through the featured games (upper left) of the screen using the orange dot buttons

I also added a second collection of games below the "Latest Screenshots" section, which will eventually hold the latest videos for games.  Both the upper featured and the lower (video) featured boxes operate independently, and eventually the site will remember their position even after leaving the page.

Now that the data on the page is being updated correctly, and is also being populated by a nice setup of handy functions, I can move on to the registration system...

...after a much needed break.

Rating System Started & Layout Updates

I just got done adding columns to my database for a rating system, and now my code is running like a dream.  At least for the time being, games are rated on a 5 star system, which is actually a 1 to 10 system that uses half stars every other value.

I also played around with Google's Font API and got a nice shadow effect added for the content headers.

New featured section complete with rating system


I think it's time to grab another cup of coffee and get my login/registration system in place.

Social Networking and Refilling Content

I want to leverage any bit of traffic that the website pulls as a result of this blog, so adding social networking links was pretty high on the priority list.  I went with the standard three, Facebook, Twitter and Google+.  They are now all available via buttons on the website.

I've also started getting my data back into the updated layout.  I'm basically working my way down the page, but so far I am incredibly happy with the results.  This is definitely coming together faster than I had thought it would when I started this project yesterday.  I'm psyched to see where it will be a month from now.

The latest version of the site.

Up-to-date website is available at:
http://www.foreachgamer.com/

Monday, March 17, 2014

More Progress On The Graphics

The new logo inspired me to keep working on web graphics to get a better feel for the overall look of the site.  Since the logo, things have really begun to fall in place visually.

The website currently has a simple background color, but I intend to create a dark hex pattern for the pages background.  I want gaps between the hexagons that can light up, which will be a merger between the images below.

If these two images had a ByteArray baby, then my background design would be done.

The upper 2/3 of the layout above is actually a transparent div layer that is hiding in front of the background but behind everything else.  My plan is to create a hex grid like the one above, and then create the lit pathways as a second image that would lay on top of the hex grid, giving the illusion of them being the same image.  The purpose of this being the end-user could then create custom layouts using various colored versions of the overlay and the background.  You could change your layout from a light grey grid pattern with teal lighting to a black grid pattern with orange lighting.  I am building this site with the intention of using it on a daily basis to follow games that interest me.  I want it to be easy to use, and I may want to easily swap to layout with a light background and black text for easier reading.  It allows me to use a color scheme that is eye-catching and display it to new visitors, while providing a solution to existing members that is easier on the eyes, especially for reading purposes.

I have just a little time left before I need to start work for tonight, so it's time to fill that layout with the data that I had added last night.



Updated Logo

So far, I've updated the logo for the website.  I have always been a fan of the dark grey & bright orange combination, so I am leaning that way for my main design.  I have an idea that may work which would allow anyone to change the color scheme of the entire site with one click, but the list of things that have priority over that feature is pretty extensive at this point.  Next time I need something more creative and less results, I'll play around with that idea.

Anyway, back to the point for this post, the new logo:



Nothing special, but I really just needed something with the color and glow effect that I want for the final version.  Tied into a website with a dark grey as it's main color is really going to make this website pop.

At least that's the plan.