My Site/Blog
Untitled Document

Website Redesign V2

In this post I’m going to cover the redesign process moving from v1 to v2. I’ll probably put up a link to the v2 website if people want to check it out. I created the second website from scratch in five days at my old internship. The folder says it was created on Friday July 13th, 2012. I did not spend any time learning html/css after the completion of the first site, and prior to the start of the second. So again, if you have any hesitations about creating your own I encourage you to give it a try.

I started by watching a series on YouTube called Introduction to Dreamweaver CS5 by createthenet. The series are basically videos narrated by createthenet as he walks through the creation of a website. One of the things I really liked about his tutorials is that he starts with blank html page and explains everything from the ground up. If you want to make a webpage tailored to your needs it’s really not worth it to skip steps in learning html and css. Understanding the basics is essential to creating more complex websites and having them look exactly how you want them to. So I buckled in and consistently watched videos up until about the 24th one. Those provided me with enough of a background to create the basic layout of v2 and fill in the content with the exception of the image sliders on the home, photography, and projects pages, and the contact form on the contact page.

I’ll start by dissecting the elements of the index page, which is really the template for the rest of the website.

v2 homepage

As you’ll probably notice, I decided to keep some design aspects from v2 in the current website. Most notably the logo and social media icons in the header and also the image slider. The page can be broken down into several elements which are quite standard for most webpages.

The Header

The Header

The header consists of three elements: the Connor Yamada logo, the social link icons, and the navigation bar for the website. Both the social link icons and the nav bar are covered in detail in the Dreamweaver tutorial series, which I then adapted slightly and styled. The logo was just something I whipped up quickly in Photoshop and haven’t really bothered to change. Together these elements form the header div on v2 and is present on each page.

The Content

The Content

The content is the meat of your website. Content for content. Above you can see that I have three different elements on the homepage. The first is a jQuery slider called eislideshow. This was not covered directly in the Dreamweaver tutorial, instead I spent some time on google looking for a slideshow plugin I liked and ended up with this one. Integrated jQuery, or any other sort of plugin is generally quite simple. Usually the creator of the plugin will provide some sort of tutorial or sample code for you to copy (just to get it working), which you can then tweak to suit your needs. Google is your friend. I find it easiest to look at a bunch of different examples to figure out how to make something work the way I want it to. I really like this slider as it’s fast, easy to use, and I think it looks really clean. There are option to have it display text over your images, show thumbnails on the grey bar below, and change the delay and autoplay features. You can find it here.

The next element is just a header and some text. Learning how to use the header tags and style text is also something I would recommend doing early on. Getting the right font, font size, font color, and line height were all important design features for me.

The last part is a great example of a “plugin” type element in the form of a donate button from paypal. Many websites offer easy ways to integrate their features or services to web developers in the form of html samples or automatically generated code. This makes it easy to embed videos, media players, or in this case, donate buttons.

The Footer

The Footer

Not really much to see here, but this is the last main element of the site. It’s present on every page and is really only there so I could say my website has a footer. The footer in the current site actually has links to social media sites and is basically taken from the header in v2.

 

Using the header, footer, and content area I was able to create all of the pages of my second site. Each page was basically the header and footer code copied from the homepage with only the content being changed. I didn’t know this at the time but it would have been much easier to create separate php files called header and footer, which can be easily included using the <?php include(‘header or footer here.php’) ?> That way, instead of having to individually edit the header in each file, you can just update the header.php file which is loaded into whichever pages have the include. This makes content management and debugging much much easier and saved me a lot of time in building the current site.

I’ll further cover the image sliders and contact page in the next post however, this is how the majority of the site was created. Once you understand basic page layout and html, it becomes quite easy to create your own content.

Website Redesign V1

I thought I’d take a quick break from working on this website to explain the redesign process for anyone who might be interested. The new layout and the addition of this blog mark the third version of my personal webpage. Having no formal education in web design (I’m actually taking a summer intro class to html/css), webpages were always somewhat of a mystery to me however I’m hoping people can find some inspiration or guidance in the path I followed.

I’m going to start with the first site, v1, and work up to the current site, v3. I’ll cover the timeline, design process, and key features and include as many pictures and examples of code as I can, as that is how I learned. If you have any specific questions or requests as I’m going through, please do not hesitate to send me a message or ask in the comments.

V1

My computer tells me I first created the folder for the website on January 5th, 2012 at 3:22 am, which makes sense knowing my coding habits. So I don’t remember the exact timeline of this “website” but I think it took about four days. Four days meaning that on the first day I knew nothing more than what was on my previous site, which did not exist, meaning I knew nothing. I started with google and probably did some searches on “how to build your own website” or something along those lines. Somehow I stumbled across a video on youtube that showed you how to turn a Photoshop template into an html page (not that I knew how to use Photoshop), and for some reason decided to start there. Now, looking back was this the easiest/most efficient/most practical way to create a website? No. It was probably one of the worst, but it basically worked for what I had in mind.

All of the webpages I’ve created are not just about function, they’re about form. Instead of firing up Photoshop I could have just as easily started with some pre-built template, or WordPress, or some other web design platform, but I wanted my site to reflect me. I wanted my page to not only be a platform for me to share my work, but to be part of the work itself. Thus I stuck with Photoshop and an image for my homepage.

v1 homepage

The story behind the image is quite interesting in and of itself. It was taken on the corner of 42nd and Broadway at around 4 in the morning, when Times Square tends to be a little more empty than usual. I used it because I thought it looked nice, and would be something I wouldn’t mind seeing as a background. From there I diced it up and exported it as an html to Dreamweaver.

all diced up

all diced up

The picture above isn’t the exact file from the layout in the first picture but hopefully you get the idea. Once it was in Dreamweaver I used the GUI to add links to each of pages which were all created in the same fashion. They would just be images with the text embedded that were exported as html files. I think the cinematography page had an embedded video from vimeo (just copy/pasted code you get by clicking share vide0) and the photography page had a link to flickr. After each page was created and linked correctly I uploaded to my GoDaddy host and my first site was born (there are many sites explaining how to buy/setup hosting and connect via Dreamweaver so I won’t go into detail). It certainly wasn’t the best looking, or the most efficient but each page looked exactly how I wanted it to. And that’s what mattered to me at the time. I had created my own site, from scratch, without any real knowledge of html or css (I’m pretty sure the first site didn’t have any css, I’m not even sure if I knew what it was). Also I should point out that I use Adobe Dreamweaver for all my html/css editing. It’s a great program and all three sites were built using it.

So that’s one way to go about building a site. I would not recommend it for many obvious reasons, including the general lack of ability to edit any feature. If you’re interested in building a site that looks nice and you don’t need to update the content that often I would just recommend learning html/css. However, if you know you’re going to want to create lots of new content i.e. blog posts, I would recommend WordPress and you’ll see why when I start explaining the second site.

Untitled Document