• Weblog :
• Development
• More from Development

Making a Website for the First Time

I've received quite a few emails over the years TJN has been up and running (and while it was known as Dragonrain before that), asking good questions about how to get a start on graphic or webdesign, what books to buy, what classes to take...etc. This post is here to address that without having to repeat myself overmuch x). I hope this will prove useful to any would-be designers out there.

• I. Make a Plan
• II. The Learning Material
• III. The Tools: 3 Big Myths
• IV. The Tools: The Bare Minimum

I. Make a Plan

You just knew this was coming didn't you? As with most successful undertakings in our lifetime, the greatest achievements are almost always the result of a good, solid plan. Even if you don't have everything figured out yet, starting one is a good start (no pun intended).

• Purpose: the goal of your website. Is it to sell yourself? To sell a product? To act as an outlet for a bunch of similar interests? Are you an expert at something, and you want to share your know-how experience with the community?
• The 5 W's: Who will be visiting this website? What will you be presenting, and what will they be looking for? How will you organize the info so it's easy to find, and sticks to your original purpose? When are you thinking to launch the site? Why will visitors choose your anime site over someone else's anime site?
• Time & Budget: Hosting costs money. So does the domain name. And then there's the time required to actually plan, create, and maintain the website. Are you prepared for all that? Where will those resources come from?
• Make a site map. Remember those outlines you had to write in grade school before working on written essays? Or those Table of Contents pages at the beginning of every schoolroom textbook? Same concept. Here's an example:
  • Purpose (we went over that)
  • Main Page: updates, thumbnails of newest stuff
  • Graphics: avatars, wallpapers, signatures
  • Layouts: Tables, Dividers, Wordpress Themes, Drupal Themes
  • Reviews: Anime, Manga, Anime/Manga News
  • Info: General "about" page, contact, TOS (Terms of Service), outbound links
  I'll leave the rest to your imagination.

This should get you started quite nicely. Next is to think about the materials and tools you'll need.

II. The Learning Material:

Think Internet + Online Tutorials (which is free), Not Books (which are not).

If you're starting where I started, which would be about 99% of you, you're probably on a budget and would prefer the free route to success (we all love FREE right?). Well I've got good news for you: the internet provides a wealth of information free of charge, so why not take advantage of this resource over those $20-$80 How-To books, or business-minded college crash courses falling in the even pricier $100+ range?

Best places to go? Here are just some of my favorites:
www.w3schools.org
www.tizag.com

All free, all with fantastic tutorials from basic to lukewarm to advanced. And if all else fails, Google has made itself a big name in the market for finding the answers to most logical search queries ;).

Inspiration for Webdesign: The Sky's The Limit

Truly. Whereas before I mentioned bookstores as pricey, there's no law saying you can't go in and take a look! Check out the magazine section, especially the design and photography books for inspiration; check out different mediums like architecture, engineering...even cookbooks from Barnes & Noble or the local library. Almost everything had to be designed in some way, and it's those ideas that you can put in your pocket for future references.

• Magazines at your local bookstore (I especially dig the photography, webdesign, and fashion publications)
• Music (hey, whatever floats your boat!)
• Movies, TV, Advertisements
• www.deviantart.com
• Googling for "top ___ designs" (tip: adding a "+ 2011/current year" might get you some more up-to-date lists or blog posts)

II. The Tools : 3 Big Myths

Next up would be all those technical questions about webhosting, software, and any other go-go gadgets of the digital age. I'll start with the myths:

• Myth #1: "I need to get a really expensive web-editing program like Adobe Dreamweaver."

  No, you don't. This is a very common misconception. Building a website is just like writing an essay: you can type the thing in Word, or you can write the thing on good old-fashioned pencil and paper. The tools don't determine the quality of your writing.
  You could build an entire website from scratch in Notepad if you wanted to.

  However, most people don't use Notepad for a few reasons: it's harder to read, and harder to organize your files (going back to my analogy, I'd rather type my essay in Word and save a few trees and Pink Curl Erasers). Programs like Dreamweaver, Frontpage, Espresso, and the other millions of software packages out there that cost a good amount of money are not required, but they are definitely luxury goods.

  Myself? I use Dreamweaver which does cost some $$, but only because I work and have the cash to spend on it.
  However, I could get a very similar level of satisfaction with my next (and free) favorite: Notepad++.

  Some fantastic free webdesign software alternatives:

  • Notepad++
  • Bluefish Editor
  • Kompozer
  • Amaya (by W3)
  • Screem
  • ...and you can Google for more.

• Myth #2: "I need to learn Dreamweaver/Espresso/(Insert Name of Expensive Editing Software Here)"

  This one really just ties in with Myth #1, but I had to add it since it's another popular question for first-time web designers. You're not learning the editing software (if there's anything to learn at all, it's really just figuring out how to use the interface) - you're really learning the coding language. For instance: HTML, CSS, PHP, MySQL, Javascript....

• Myth #3: "I need to spend $X on HTML/CSS/PHP/MySQL/etcetc books"

  I glanced briefly on this in my intro, but just to elaborate: You don't need to buy them. We're in the age of the internet - which is free.

  Using the right key terms, you can simply google for the tutorial you need. Even if you don't know the exact name of the function or tag, you can usually get a good lead by searching for the resulting effect or output you're looking for. For instance, if I didn't know any CSS terms, but wanted to find out how to make a non-repeating background in CSS, I might type in:

  "no repeating background css" in google.

• Pay for the software if you want the extra $100+ worth of luxury. Otherwise, just download freeware, like Notepad++.
• Learning to design a good website = learning how to code in HTML, CSS, PHP, MySQL, Javascript...or any mix of those and more. You're learning the code, not the software.
• Use free, online tutorials and save the extra cash (and trees).

IV. The Tools: The Bare Minimum

• Code Editing Software

  Read the previous section for my recommendations.

• Photo Editing Software

  I'm a die-hard Photoshop fan. But it's also an expensive choice. There are free options out there:

  • GIMP
  • Krita
  • Paint.NET
  • ChocoFlop
  • ...the list goes on. I've heard great reviews about GIMP, but haven't actually tried any of these myself (yet).
  
  
• FTP (File Transfer Protocol) Software

  This allows you to actually save those files online (official term is "upload"). Again, like the editing software, there are pricey options and there are free options. My recommendations are all free:

  • CoreFTP LE (Windows)
  • Cyberduck (Mac)
  • FileZilla (Windows/Mac)
  • FireFTP (Works with Firefox, Windows/Mac)
  
  
• File Host

  This is where you "upload" your web files. Think of it as an external hard drive placed in a far away land, connected to you via the internet. More on this later.

• Domain Registrar

  This is where you register (and pay for, usually yearly) your domain name. More on this later.

The total cost of all these tools? Could be $0 or $100+. It's up to you - and you can achieve almost the same results on any of those budgets.

The Rest Is Up To You

Once you've got that Plan set up, a clear idea of what your site will be about and how you'll go about doing it, the tools, and the time and the will to go over all those coding tutorials, you're on your way to making a nice, decent website. I hope this has been helpful, and good luck :).

• Tammy
• GoldenApe
• Gideon
• 3 Commented

• More Weblog Entries

  Version 4.0 TJN's got a new facelift! We're now upgraded AWAY from the stone ages - faster code, dividers, organized styling...I'... Read more?
  
  Tips To Save On Gas If you remember gas prices shooting up in 2007, well, there were a bunch of emails like this floating around. Instead... Read more?
  
  Making a Website for the First Time I've received quite a few emails over the years TJN has been up and running (and while it was known as Dragonrain before... Read more?
  
  New Server 2011 If you're seeing this post, that means that TJN has successfully been relocated to the new server. Thanks to ... Read more?
  
  Every Conscious Hour of February 1st 2011 When I first heard about Hourly Comics from Gid, I was like "oh, that's a cool idea" and figured I'd join in for shits ... Read more?
  
  Little Tweaks All Over The Place Hello hello, I'm back with some site maintenance news and updates! A lot of small changes that filled up quite a few ... Read more?
  
  SFX Translations 102 YAY FOR SFXs!!!Quite a few tweaks made in our SFX Translations section:A Stronger Search Engine - Fully-Compatible with ... Read more?
  
  The Mask Well I was gonna dress up as Waldo originally - went to Costume Castle and everything to look for the Harry Potter style... Read more?
  
  Tree at the Top of the Mountain I've been having quite a few problems at home (which I commented on AP Clash 2010 during the final round post)...SOOO I ... Read more?
  
  Mini Crab Chips So I finally got around to hunting down the local Japanese market, Mitsuwa, and had Ramen there for the first time last ... Read more?
  

• Highlighted Posts

  • 

  Current Projects

  • 

  Completed Projects

  • 
  • 
  • 

  WB Galleries

  • 
  • 
  • 

  Who is behind TJN?

  My name is Jay Lee, and I have traveled to the East Coast of the United States, studied in Kyoto, Japan for a time, and currently live in Southern California.
  My preferred art mediums include: digital on adobe products, corel, web; fine on oil-on-canvas or charcoal; photography in black and white, with a focus on portraiture and music; and classical music on piano.
  
  I work as a graphic designer and web developer with a primary interest in marketing, advertising, and business.
  
  
  Read more about Jay