September 1st Update

Adding pictures so people have s'more incentive to read this. SEE WHAT I DID THERE

So, I've been putting in a lot of work into this project, as well as another one. Thus far, I have a working prototype online at the moment that is currently just CSS. I'm trying to get a standard for how everything will look before I go start coding all of the back end features. Let me know what you think: http://svkei.net/convergence/

It's gone through a lot of different revisions, changed fonts like 5 times, and it always has a "Ohh, I should change this to ____" aspect to it. That's the fun of web design and development: it's never over!

The green squares at the top are going to be used for additional information. As I see it now, the side bar will only be for band pages and returning to the home page. I think the top sections will be an about me, a contact me, and an affiliate page for linking to other cool sites, references I've used, where to purchase music, etc. Only reason I'm pointing this out is because I showed the site to a friend and she asked why I had those there. Actually, most people ask me what they are going to be used for. Maybe I just like green squares?????


So about the other project I'm working on: my friend has been developing an MMO since before he started going to RIT with me. He's spent a ridiculous amount of time planning out a lot of things like battle mechanics, character designs, skills, lore, weapons, numbers--essentially, he has about 50+ pages worth of ideas and documentation alone, not including actual coding examples.

This has nothing to do with my article.

And where do I come in? Well, he's about ready to start alpha testing character creation. He spent most of his summer planning out and finalizing the "schools" for his game (like job classes in other games, but his is much more broad) and is ready to unleash his concoction loose in the real world. In order to accomplish this, he has asked me to develop a simple site that collects user feedback and walks them through the character creation process.

At this very moment, it has a lot of the functionality he is looking for, save the saving the information put in and emailing it to him. This is not going to be an easy task, however. As I alluded to before, he has a lot of information to plug in and organize. Like, a lot. Thank goodness for planning on doing everything dynamically!!!! !!! 1 ! Other than the actual putting together all of the information, I also have to style it. He takes pride in making things look nice too, so that will probably take just as long, if not longer.

I don't mind all the work though, in case I sounded negative. I really like doing this, I really like working with him, and I am actually humbled that he has asked me to help him with this project. One of the things that I find to be an exceedingly strong quality about this friend is how passionate he gets about things he puts his mind too. To risk sounding sappy, I find it inspirational to help someone that I respect this much out. Let's just hope he likes drop shadows and the color yellow for everything.

This game site will not really include a lot of features that Convergence will have. For example, his is pretty much one huge form of text areas and check boxes. It will also have a feature that displays information about spells when hovering over one. Convergence will mostly be static text that draws its information from a database, a gallery for images, a presentation of organized discography information, and, if I am ambitions enough, a commenting system. So, both of these will be testing me to hone my skills in different areas that I've learned in school.

I know that feel.

I will be posting some updates about his site here as well in case someone is interested (I think only inartistic reads this?). I don't think he'll want people testing it for him, however, but I'll have to ask. I'm sure I'll be begging for testers soon enough, too!

Second Prototype and the Right Type of Type

I've decided to make another prototype of what I would like my site to look like. This inspiration came to me while looking at a magazine called Launch A Website: A practicle guide for non-techies. This magazine is essentially an in-depth textbook that covers everything, and more, covered in my Design of Graphical User Interface class. It goes over everything from how to pick good fonts, the meanings behind color, how to do proper testing, what do to for wireframes, and how to sit down with people and figure out what needs to be made in order to meet their goals while still being practice and usable. Here is a link to their webiste if you would like to take a further look. Be warned though, this magazine is about $25 since it's British (I've read a number of Photoshop magazines that were also British, and the all tend to have a higher price tag than their American counterparts) and it's actually quite large. Really nice graphics and layout though!

Anyway, I was inspired by one of the pages. It was a simple layout with lime, grey, black, and white. I know I really wanted my site to be based on the color purple, but I kind of like this color too. It also matched really well with the default colors of the menu tutorial I found. I was also told that my last mock up was lame |D . Hopefully this one is better? The music note is where the logo / site name will go. The green squares at the top are different parts of the navigation too that I'm not 100% sure about yet.

Click to View Fullsize

Naturally, the menu would be a lot longer than this, but I didn't want to make it be too long. I'm not sure if this is too simple or not yet, but we'll have to see once  I start to actually make a real prototype. What do you think?


Additional, I have been doing some font hunting. I found some nice fonts on Google Web Fonts and Dafont that I've downloaded and hope to include. They are: Champagne and Limousines, and Averia Serif. Picking fonts is hard! It's not like picking out what to eat for dinner: a good typeface can set you apart and a lot of people judge the design of a site based on the font they use. In fact, there are a lot of people who do nothing but judge type all day. These are sad sad people, but then again, I blog about cross-dressing Asian men who sing out of tune. It's all a matter of perspective, I guess. The biggest problem, though: buying fonts is expensive. Don't believe me? Look at a type foundry. For example, this font is new and to buy the entire set of it costs $250. I've found other absolutely gorgeous fonts while taking a typography class that cost nearly twice that. Sometimes bundles of 40 or so font faces can cost $3000+, and that's just for licensing on one computer. I would find other really pretty fonts to share, but then I'm going to feel bad for not being able to use them...

Home Page and Gallery Prototypes

I have an update, yay! So far, I've been working on prototypes for my site. These aren't really necessary because I am not doing this for a professional job, but as I think I said in my introduction, I want to treat this as if it were a professional job.

I have a whole bunch of hand drawn wireframes and layout designs. I even made one of those stupid word lists , but I don't feel like scanning them just yet. What I have for you today are my two Photoshop prototypes ( made using Photoshop from Designer Suite 5.5) .The first is of the home page, the second is how I envision the gallery page to look. These are crude in comparison to the CSS I've been playing around with, so don't expect to look EXACTLY like this (click to see full version).

So here's what I learned: I learned that everything should not have a drop shadow, nor a gradient (not from this project, but from an earlier one). Sometimes colors I thought of don't look that great together, but need some tweaking here and there. Visual balance is nice, and I don't really like lop-sided layouts unless it does on purpose. I kind of like solid backgrounds less than patterns, so I looked up the pattern used here and just tiled it.

Before finishing the gallery page, I needed to actually find the plug in I wanted to be using for my project. I decided up this one after consulting two people. I  think a CD scans gallery really needs thumbnails of all of the pages available, as well as a big version of each picture since Visual-kei is like 95.67% about what the band looks like. Let me know what you think!

Initiation

Hi everyone. As I said on my main blog, I am starting to formulate S_VKei into a site completely made by me. I am using this blog here, connected to the same blogger account, as a dev blog to track my progress and be a bit more professional. If web development isn't really your thing, then you are really going to find this pretty boring. That's okay though: I'm sure some people would like to know the active train of thought that goes on while developing a website. Hopefully this will give me a professional edge for jobs in the future.


So, as you may have noticed, I am going to called the site "Seraphim ―Convergence ―." "Seraphim" is the blogger name I chose a while ago because I have a fascination with angelology, humanoid beings with wings, and, most importantly, MagnaAngemon. The "Convergence" part stems from how I feel this project represents myself: it is the vantage point where all of my skills and passions unite--music, web development, web design, graphic design, and verbal communication. I have high hopes for this project, although the amount of work is a little daunting. Please be sure to check back here every so often. I do not plan to have a writing schedule in place just yet, but I think it would be wise to have something like "write a post every Thursday," even if it is just to say "lolno."


So where am I now?

I have a few wire frames done, a site map, some tests for navigation, some tutorials for cool css3 done, and I have a color scheme in mind. I still need to finalize the layout, think of a logo, learn how to do SQL stuff on the domain name I have, and then plan out all of the coding. Essentially, this is a really big project and I am happy to go through different parts of it with you.


-Seraphim