Redesign Your Website, Day 24: Progress Continues … Slowly

2012.01.24 21:21

Right, so, wow, ten days since I last posted! Eek, bad form. Let me get straight to the point. I’ve been working on the site but very slowly. It’s very likely I won’t get to finish by the end of January, but that’s ok, it’s not a race.

In the last video, I talked about a testing site, and I’m gonna let you guys in on it so you can see the site evolve live. Check out stolendatatapes.com to see the new site in progress.

I spent most of my efforts thus far decomposing the theme and figuring out how to adjust it. That in itself is quite an effort, but now that I’ve got the workflow sorted I should be able to make some good sweeping adjustments in short order (after all, I’ve done this before.)

The site layout is pretty much sorted. The header and footers are mostly the way I want ‘em, but the main content is very much in progress. And of course the typography will change a great deal. Having the entire thing in Helvetica makes it look tragically like a template.

What do you think? Colours, layout, use of whitespace? Let me know your thoughts in the comments.

Redesign Your Website, Day 14: Create a Live-Test Website

2012.01.14 17:17

download .mp4 / watch on YouTube

I took a big step in my redesign process — I installed a new WordPress installation with new theme on one of my dormant URLs which I haven’t previously used for anything. This URL, which I will reveal soon, is one of a number of .com domain names which I own, simply because it’s a clever name, or maybe because I concocted some cool future plan which has yet to come to fruition.

The reason for this is mainly to create ease in testing. Allowing me to live-test the new theme will give me the closest simulation of how the new theme will react when I port it over to this site. It will allow me to use the same FTP authoring tools (Coda, Transmit, etc.), and troubleshoot any database and WordPress issues.

So far, I have done some basic work on the template, exploring how the authors built it, and figuring out how I can bend it to my will. This actually takes a bit of care, because there’s logic involved in deciphering how someone else built the theme. I have yet to get deep into the CSS styling, and so I will withhold showing it off for a few more days.

There is an adage that “web design is 90% typography”, so I want to make sure the type looks purposeful, in typeface selection, scale, and colour usage. That’s gonna take a while.

So how’s your site coming? Tweet using hashtag #redesign or interact by leaving a comment.

Redesign Your Website, Day 10: Get Feedback

2012.01.10 13:13

Several of my design pals have sent me their own site redesigns-in-progress for a quite critique. This is an extremely important practice, because getting an extra set of eyes on your design will reveal interesting things. You, as the designer, are very close to your layout, and it is very easy to overlook something that may put off or confuse a regular user.

download .mp4 / watch on YouTube

If you have a site redesign that you’d like feedback on, leave a link in the comments. If you don’t want public commentary, write me a quick email using the form at the bottom of this page, or tweet me @scottperezfox.

How’s your redesign going? Mine, I admit, is a bit behind schedule. I’m going to take the plunge soon and jump right into the new theme. In lieu of installing a testing server and working with an installation on my own hard drive, I’m just going to do a live-install and you’ll be able to watch the site take shape before your eyes. Get ready for trouble.

Redesign Your Website, Day 6: The Modern Leaders in UI Design

2012.01.06 15:15

This weekend, I’m planning to buckle down and do some serious sketching and planning, but before you join me in that endeavor, you should check out some of the leaders in innovative user interface design these days.

Say what you will about Facebook, but their Timeline is fairly innovative, if not generally pretty. Facebook has been acquiring design talent for some time now, so go see what these guys have been in up to, especially how the eye is directed and how they determine what’s important.

Google+ may not be as popular as Facebook, but I, for one, think the design is pretty sharp. I especially think the buttons and input fields are very sharp. It’s a good use of rounded corners with a very small radius. Also, take a moment to think about their main column and sidebars, and how they display images within a photo album.

No matter your view on [American] politics, we must all admit that the Obama administration has created the best-looking website of any President to date. If you haven’t seen Whitehouse.gov, go take a good hard look. While you’re at it, check out the Obama campaign website, which does a good job of organising lots of content. (menus, sub-menus, callouts, forms, etc.) so it’s worth an examination.

On the subject of Politics, check out OpenCongress.org, which details everything going on in Congress, including full text of all Bills under consideration. They do a good job with their buttons and other graphical chrome.

How’s your redesign coming along? Don’t forget to tweet using the hashtag #redesign if you’re playing along at home.

Redesign Your Website in January, Day 3: Research

2012.01.03 13:13

We press on with the redesign effort. Today, do some research.

What do I mean by research? See what other people are doing, both rightly and wrongly. Investigate below the surface of your industry by examining the long-overlooked personal sites of your followers on Twitter, your forum mates, and folks in the industry. Check out some blogs you like and follow the links they list. Let it be organic.

download .mp4 / watch on YouTube

As a user of the web, you’ll be struck by trends almost subconsciously. See what catches your eye, and make a note of it. Print out the sites you fancy and tack ‘em up. Take screenshots. Start a little scrapbook.

Share you links in the comments below. Let’s take a look at what we find. And remember to use the hashtag #redesign if your tweeting about it.

Steve Jobs Action Figure

2012.01.02 19:19

Steve Jobs Action Figure

This is creepy as hell — a Steve Jobs action figure created in the remarkable likeness of the late Apple founder. Unfortunately, I don’t have many more details.

I suppose if I were still in grad school this would lead to a thesis about false idols and biblical references in modern Capitalism in the post-industrial information age yadda yadda yadda. But instead, here’s a photo of a Barack Obama action figure, holding two katanas. Who would win in a fight, d’ya think?

Obama action figure

More photos of the Jobs doll here »

via The Artist and His Model »

Redesign Your Website in January, Day 2: The Hourglass Chart

2012.01.02 15:15

It’s day 2, and before we dive into coding or editing images, let’s plan out what the hell we hope to get out of this website we’re redesigning! Take ten minutes to plan the site’s objectives.

download .mp4 / watch on YouTube

(Pardon the shakiness of this video, I’m still learning not to bump into my desk as I flail about recording videos.)

A little tool I like to use is The Hourglass Chart. It helps narrow down the attributes/features of the your site, the immediate results of those features, and what your goals are given that new result. Here’s a quick mockup I did in Photoshop:

The Hourglass Chart

The key here is to limit what goes into the site. Don’t cram in every widget you can think of. You don’t need a forum, and a Flickr widget, and a photo of your dog. Keep the attributes to 2-4 items, such as a blog, a portfolio, a list of resources, interviews, press/media links, or an in-depth bio/about page. Not all of those!

Those will lead to a result. Maybe your work will get spread around the web, maybe you’ll become an authority on a subject, maybe you’ll solidify your dedication to a certain craft. Those are all great, but again, you have to limit yourself.

Finally, write down the goals you want to achieve with this website and your newfound results. These are what you have to keep in mind even after the re-design is complete.

Write your comments and tell us what you’re including in your site. Broad strokes. What are your goals? Let’s make this thing a community. And if you’re tweeting, make sure to use the hashtag #redesign to bring others into the effort.

Oh, and pardon that gratuitous shot of my ass in that video. I have revealed my dirty secret: Yes, I work in sweat pants. But only because my yoga pants are in the laundry.

Redesign Your Website in January, Day 1: Backup

2012.01.01 19:19

I mentioned this the other day on Twitter, but I’m planning to redesign this website during the month of January. You should too!

Inspired by NaNoWriMo, I’m redesigning my site this month, and I’ll be recording videos and writing blog posts as I progress. If you needed an excuse to redesign your site, here it is. Let’s start a trend.

download .mp4 / watch on YouTube

Day 1 should be your backup day. Download all the existing files associated with your website. The images, HTML files, CSS styles, PHP databased, etc. etc. etc. This will help you get organised for your redesign, and also will serve as a last resort in case something goes horribly wrong along the way.

I’ll record more videos from tomorrow, and we’ll plan our redesigns. The whole thing is very informal, but I want to hear your progress! Comment and record videos of your own.

Plans for 2012? Backup.

2011.12.29 14:14

I’ve been very busy lately so pardon the lack of posts. Unlike many of the other blogs out there, I’m not a big fan of end-of-year lists. They take a lot of work, and unfortunately, I don’t have monitoring system for my blog which produces any great measure of interesting content.

But as the year end approaches, I think it is a double-plus good idea to do a comprehensive backup and archive of all your important files. Hopefully, you’re continually backing up your photos, videos, documents, and other important content, but there are some things you may overlook. Here’s my big ole list of things to backup this weekend!

  • Photos
  • Videos
  • Music
  • Projects (active and completed)
  • Artwork
  • Documents
  • Financial Documents
  • Bookmarks
  • Address Book
  • Calendar Settings
  • Application Installers
  • Software Serial Numbers
  • Adobe Settings and App Preferences
  • System Preferences
  • Icons
  • Email and Email settings
  • Databases of stored passwords, etc.

And just for fun, here’s a video to get you in the mood of the New Year.

download .mp4 / watch on YouTube

So when someone asks you “what are you doing New Year’s Eve?”, the answer should be “backing up my computer.”

#foreveralone

Come See Me at Creative Mornings This Friday

2011.12.13 17:17

Creative Mornings

Pardon the late notice, but I’m going to presenting at this month’s Creative Mornings in Brooklyn. The topic will be business cards, and my life-long obsession with them. Specifically, how apparently my love of b.cards is genetic, because my grandfather is also a life-long collector of cards.

Tickets for the event are sold out, but you can put yourself on the waitlist. Or just show up, chances are there will not be someone one the door. You can say you’re with me. I’ll get you in.

See you there?

« Older Entries  |  

Search


Tip Jar

I will never feature advertising on this site. If you appreciate this blog and what I do, please consider a donation.

Donations handled securely via PayPal, no signup required.