luisgarciajr.com | Blog

The previous articles were about the process I take to work on creating web sites (or almost any creative endeavor, I think). It’s important to have a process while always keeping in mind that it should not be a rigid structure. For clarity, I named the five steps to explain the flow of my work. However, I find myself floating in and out of each of the five steps. It is an intertwined cycle that keeps turning to help fine tune your work.

The 5D Methodology Cycle

In fact, I discovered that I have actually re-created those five steps from a methodology I learned while working as a business analyst. The process or the idea of it clicked so well with me that I hadn’t realized how much I incorporated into my own work. From academic research to corporate presentations, I started adapting that corporate methodology into my own steps.

These are the tenets of the 5D Methodology (paired with my own “label” for the process):

1. Define = gather information: learn as much as you can about the project and deliverables
2. Discover = get inspired: look to other sites, books, images, or listen to music, or draw!
3. Design = begin designing: sketch as much as you can then mock up as much as you can
4. Develop = code the monster: lots o’ coffee and typing away at the laptop “ivories”
5. Deploy = upload to the server: work the magic!

Now software development, I understand, has several methodologies that fit a general pattern. Some are FOUR Ds, some are FIVE Ds, some are agile, some are not… but they all are a basic structure to create a work. Each person adapts a plan of action for his or her work; thus, each working environment employs an action plan that works for the team.

For me, this method works well whether I’m doing a web site, creating a dance choreography, or working on an art project.

The final step I take after working on a design is the deployment of the site itself. So in this short article, I will review the steps I take to upload the files to the server. In my opinion, this is the easiest step in the chain. Although it is very meticulous—you have to make sure EVERY source code and image file is uploaded so that your page isn’t broken once it’s completely online.

• Make a list of items you need to upload.
• Log in to the FTP service
• Upload all files
• Test the live site

Make a list of items you need to upload.

I make a list of all the files I need to upload, and this is the general order I plan to upload so that I have all the supporting files first before the HTML that displays the page.

1. All media files (images, video, flash, etc.)
2. All design and interaction files (i.e., .css and .js files)
3. Content for secondary and tertiary or lower pages (HTML file for linked pages)
4. Content for primary page (HTML file for the home page)

I usually leave open in my editor every source file I create or edit for the project. Within each of the tabs, I can see which images I’m referring to so I can see which images need updating.

Tabs in Notepad++ (1 CSS file and 3 html files) show which files I worked on that need uploading.

Log in to the FTP service

Normally, I use either of two services to upload files via FTP. The FireFTP plugin for Firefox is one of the primary ways I upload my files.

FireFTP plugin tool for Firefox

The other is an Internet portal from my host DreamHost, WebFTP.

WebFTP service from DreamHost

Upload all files

So now you can start uploading all your files in the order stated above: (1) media files, (2) design and interaction files, (3) content for secondary pages, and finally (4) content for home page. The home page is the users first view of your work: their first impression, their gateway into more information, the first interaction. Why upload that first if you wouldn’t have the rest to support it. That’s why you should upload all your supporting files first then the home page should always be last.

Test the live site

Once the uploads are complete, grab the checklist you made while coding and make sure they those things also work on the live site.

So these are the five steps I took when working on my portfolio site (if a bit simplified). These are the steps I normally take on a project. In putting these articles together, though, I’ve come to the realization that I’m mimicking a methodology I learned from my work as an ecommerce business analyst. More on that later.

So this is the actual “nitty gritty” part! On this step, I bring together all the previous steps and work to make the site look right. Here again, the first thing I do is take out my notebook. Looking at the design, I break down all the possible sections that could be DIVs, name them, and then start to write out some preliminary HTML to determine how it can work.

(more…)

Now to sit down to the nitty! (The next step is “the nitty gritty,” where one actually gets dirty in code up to your elbows!) At the design step, I sit down and look at all the work that I did in the first two steps (Information and Inspiration). I don’t know what it is about drawing boxes, but I like to do it a lot. It helps my process. So, I sit and draw boxes of the general layout I wanted on my site.

(more…)

Once I had an idea of the information structure I wanted for my site, I needed to consider the look and feel for the experience. So I turned to inspiration. Where do you find the inspiration for your designs?

Now I’m not the greatest when it comes to graphic design. I love sites that look graphically intense, but for my site, I seemed to be leaning toward a more simple structure and design.

(more…)

So what was the process to create my portfolio? Which steps did I take to put it online? It was not as easy as I thought it would be, but I want to share a sampling of those steps that I took.

(more…)