Start of a new online presence

It's time for more web design work and since I don't have a paying client right now I'm going to reinvent my own website. I've been studying reponsive (fluid) design and after spending hours looking at really cool websites I've set my mind on a new direction.

As I'm a visual person I'm still going to make graphic mock ups in Photoshop. Three in total; Each mock up will be set to a predetermined (pixel) width; 960, 768, and 480. These widths will be a milestones, breaking points of sorts. Using CSS media queries I will be able to check for viewport dimensions and display the appropriate layout.

This is a screenshot of a Google Chrome extension called "Window Resizer" it allows me to view any website at predetermined widths. It's a great tool for getting an idea of what a website might look like in different viewports. As it would be extremely tedious to create a layout for each one. I will only be focusing on three, the true responsive work will come later. Time for the mock ups.

The Web Design Process

It all begins with a needs assessment. Through this discussion, the obstacles and challenges of any design can be understood and systematically addressed. What does the client wish to show the visitor? How is the visitor guided through the information in a logical manner?

I will use my own website, www.psypher101, as the example. And it, like many other web sites, started with the 960 Grid.

The 960 Grid (available at http://960.gs/) is an open source grid system that has effectively streamlined development based on commonly used dimensions. It has been used the world over by many a web designer. It essentially divides the "real estate" of a browser window into 12 or 16 columns or even 24 thinner columns, based on a width of 960 pixels.

When creating a layout I always start from the top down. I create a header that will contain my logo and navigation, a shape to work as a placeholder for what will eventually be the graphic slider, and finally a stylized box for the main content, and an empty footer section that will have a secondary (redundant) navigation and links to social media.

After that I create all of the elements that will fill the containers for the desired layout within Photoshop. I start with the Homepage, keeping all of the elements for the Homepage in a Photoshop group. At this point everything is still only in the design stage, this is not an actual functioning website although it appears to be. I decide to create a small contact form that will persist on the footer of every page, making the footer more functional.

Next is the main content for the About Me page, like the Homepage I keep all the contents in a Photoshop group. And the contents of each column are in aptly named sub-groups for better organization.

The following screenshot shows the Layers Pane in Photoshop, with the about group expanded. Each page is structured in a similar manner within Photoshop.

I then create the layout for the My Skills and Portfolio pages.

After the layout work is finished in Photoshop I start the task of "slicing" all the graphical elements. This process allows me to quickly export the logo, buttons, and any other graphics.

After the slices are created for the Homepage I hide the background layers to allow me to export clean transparent PNG files which I deploy and position correctly using CSS.

Now that all JPEG and PNG files are ready, I begin the process of creating the HTML for the website using the newly created assets. Like any website this starts with simply getting the copy together, not worrying about the layout just yet.

The process of applying the 960 Grid CSS to the completed HTML is simple. Most of the pages I designed use 3 columns for the copy, using the 12 col variant of the 960 Grid, I simply divide 12 by 3 to get 4. Now I know that I need to wrap the content for the 3 columns in the grid_4 div class. I do so and everything fits together perfectly. If something needs to be nudged left or right I either add the push or pull class to the div tag, or I write a unique line in the Grid CSS for more specific manipulation.

The animated elements of the site were implemented using JQuery. I used the Superfish plugin for the navbar; the Fancybox plugin for the portfolio viewere, and a combination of plugins for the Graphic slider at the top of the Homepage.

Finally, cleaning up the URL and separating the Header, Main Content, and Footer sections is handled through PHP. This is done so updates to the Header or Footer will be applied site wide and not require hard-coding of individual pages. This will save time in the long run.

Mobile App Development

I have been a "designer" for many years. I have designed logos, business cards, posters, brochures, websites, interactive flash movies, characters, creatures, environments. I even "designed" an entire world, when I decided to become an author and write a 120,000 word manuscript.

Now I embark on a new journey where a lot of the landmarks are strangely familiar. I am going to begin to learn to design Mobile Apps. This is something that has always tickled the back of my mind. I know I can do it, because although I am no expert, I do have some experience with programming languages and when you've stared at code long enough it's really just a matter of syntax. Logic is logic, no matter what syntax is painted over the top of it. And logic is really just math and conditional statements.

I will begin by creating a very basic Android App, nothing that I intend to make money with, but as I get further along I will definitely be uploading some of my projects to the Google Play store. The goal here is to have working samples of UI/UX experience.

Arcanium Technology

My original vision for Arcanium technology was one that hinged on magic. Arcanium itself was to be a mysterious mineral that was mined from the earth, albeit carefully. Arcanium is extremely volatile in it's naturally recurring form. One misplaced strike from a pick ax you'd be liable to lose an arm, if you're lucky. Before the "Golden Age," the people of Giaos didn't think much of Arcanium, to most it was just some dangerous material that was better left alone. If an average person found an Arcanium vein, they were required to report it to the authorities for quarantine and extraction.

Scholars studied Arcanium and theorized upon it's potential properties. These theories allowed inventors to attempt it's use in their devices, but they were always limited by their initial understanding that it was volatile. Arcanium became a form of coal/oil; something that released energy, but never efficiently and only because that's the best people could come up with.

Then came the first discovery of what would later be regarded as Technomancy. Over two hundred years ago Archaeologists discovered a ruin unlike anything anyone had ever seen. It was ancient by all accounts, but technologically far more advanced than anything modern society could have achieved.
This archaeological site will have to be named for it's significance. Scientists, engineers, inventors and just about anyone with anything to gain from it's study would travel from all over Giaos for a chance to learn it's secrets. In the decades following this monumental discovery Technomancy was born.

The city of Ontierre was built around this ancient ruin and the Ontierre Academy was erected directly above it. For the longest time the Academy was one of the most advanced buildings in all of Giaos, benefiting directly from the study of the site and sharing this knowledge with the world through the tutelage of it's students.

Questions:
Is Technomancy Magic or Science? If it's magic, can anyone wield it's power? If it's science than technically anyone could, right? But can't the same level of "access" be argued across both magic and science? Not everyone in the real world can explain the theories surrounding the bozon particle or string theory; it can be regarded as magic to the uninitiated. For the sake of the fantasy genre, lets assume Technomancy is science so advanced that it may as well be regarded as magic to the masses. And that only a rare few of elite individuals can understand and "wield" it. These people would be feared and respected and the most powerful of them would be in a position of great power.

So the true question is what exactly is the nature of this advanced ancient technology. How does it exist? Where did it come from? And most importantly, what are the limitations? Is it everywhere? If it is then what does that mean for the society of Giaos? Does it have an environmental cost? Pollution? Does it cause damage to the user? Radiation poisoning?

Then there's the cube... It needs to be defined within the context and rules of Arcanium. All of these questions will lead to answers that will only beg more questions and so on and so forth but eventually the questions will become mere exercises in Symantec and at that point we will be prepared to invite our readers to the world we have crafted.

New PSYPHER101 Business Card

There has been a specific plan laid out since I decided to renew my personal brand, PSYPHER101. The entirety of which revolves around marketing myself to new local clients. I knew it all started with the web site. I did not, however, know what my new site would look like. Not until recently, that is.

So the site is done. You're actually looking at it now. No... Not blogger or blogspot. But scroll up and you'll see the navigation. Go ahead, click something. I've integrated the navigation to my blog and as such have effectively added a dynamic blog management system, if not the most dynamic blog system, to my site.

Now comes the printed collateral. The brochure will obviously reflect the site in terms of content, but I digress. The name of this post is "Business Card." So let us talk business card.

The business card concept began with the front, or is it the back? I'm not sure. Anyway. It started with this side. A simple texture with a lighting effect applied. The same grey texture from the main background of the website. I then added the PSY101 logo and applied a mask in which I stamped a moon texture. This in turn inspired a myriad of filters to further communicate the idea that the logo itself was illuminating the card. The drop shadow contradicts any suggestion that the logo emits light, but helps pop it out for the initial read. There was no set goal. I simply wanted this side of the card to look cool. Originally I had my web address underneath the logo, but I felt it detracted from the simple clean look that you now see here.

Upon completion of the front, or back, or whatever, I moved onto the business end of the card. I looked at a few references and found a layout that I really liked. In keeping with the theme of the PSYPHER101 "blue site" I applied a light blue overlay to the noisy background and then changed the color of the overlay on the logo to match the blue from the header on the website. Overall the two sides complement each other while featuring reversed contrast.

GiGi's Bridal 2013 Website Case Study

The Overview

GiGi’s Bridal is a small boutique style shop located in downtown Fairfield, CA. The business specializes in wedding apparel including; Bridal Gowns, Brides Maids Dresses, Mother of The Bride Dresses, Flower Girl and Special Guest Dresses. GiGi’s Bridal also sells various Accessories including; Veils and Jewelry.

Other types of events that GiGi’s provides apparel for include Quinceañera and Sweet Sixteen celebrations.

GiGi’s Bridal has been open for over a decade and has a steady stream of customers. It does not, however, compete with larger chain stores.

The Challenge

I was brought on to remedy a poorly executed website. Nothing about the existing site met web design standards. There was no clear artistic direction, content was dated, and current web design trends were not employed. There were even some vendors and dresses featured on the site; that GiGi’s Bridal no longer dealt with or offered.

Furthermore Guadalupe Ochoa, owner and Operator of GiGi’s Bridal, had no access to her own web server. The domain was registered and owned by the previous web designer. Guadalupe had no contact information with which to reach the previous web designer. This presented a significant logistical problem I had to resolve.

The Solution

The website needed updating. Simply changing content and updating lists would not be enough as the site failed to engage an audience. I needed to start completely from scratch and deliver an aesthetic that could accomplish this.

The Process

Below is the plan for the site development:

§ Conduct a preliminary interview of the client’s goals and establish an accurate needs assessment.
o  The needs assessment informed me of the look and functionality that Guadalupe wanted. She showed me some examples of competitors and what she would like to see reflected on her own website.
(Approx development time: 1-2hrs.)

  
§ Purchase a non-exclusive licensed website template that met most, if not all, of the desired visual and interactive elements for the client.
o  Non-exclusive template licenses usually cost less than $100, exclusive template licenses range from $1,000-$3,000. Based on the needs assessment I was able to offer the client a choice from 3 different templates.
(Approx development time: 4hrs.)

§ Customize template to fit the desired color scheme and content layout, using the 960 grid.
o  During this phase I manipulated the CSS style sheet, which affects the entire website; setting font type, header style and many other visual elements. 
(Approx development time: 15-20hrs., 30hrs including proofs and revisions)

§ Establish a standard page layout and add content.
o  The page layout was handled through applying the 960 grid. I requested content from the client. In most projects it is the responsibility of the client to provide that content, but Guadalupe had a difficult time. She supplied a handful of books that contained images. I scanned and downloaded, from the internet and vendor websites, over 100 images. I resized the images and created thumbnails for them to deploy in a JQuery powered FancyBox gallery viewer.
(Approx development time: 80-90hours)

§ Design a functioning contact form that allows clients to select the date of their event.
o  Using JQuery and a calendar Plugin from the JQuery website, I was able to develop and deploy a working contact form that would allow GiGi’s Bridal to gather and organize website generated leads more effectively.(Approx development time: 6-7hours)

The Result

This project was finished with great success. The client was extremely pleased and now, proudly shares her website with customers.

Syria

I'm curious... A lot of people have been arguing that we shouldn't attack Syria. I saw the video of who we would be allying ourselves with out there and I agree those guys look crazy. Some have claimed we would be helping Al Qaeda and if that's true then I agree we shouldn't be involved in any conflict where we would give aid to the organization that murdered 3000 innocent people almost 12 years ago... But is that the only argument?

Allow me to play Devil's Advocate for a moment. How can we, the United States, be OK, as one of the most enlightened nations in the world, with allowing thousands more innocents to be murdered. Granted they are not Americans citizens, they are humans. And then there's the potential threat of allowing the use of chemical weapons to go unchecked. Is there not a "lesser of two evils" here?

I guess at this point we will see how things play out. Congress knows where it's constituents stand and President Obama has a clear goal; time for some politics.