Design In Flux

Setting Up A Local Web Server

dinfluxEd — Mon, 30 Jan 2012 03:10:19 +0000

Setting Up A Local Web Server

10110101001

recently setup a local web server at home and am incredibly happy with it. This is not so much a guide but an outline of the steps involved. While it may appear to be total overkill and a hassle, I’ve found there to be many great benefits to working like this:

The setup mirrors very closely my setup at work. This allows me to practice and learn things on my side projects at home and apply them at work, and also vice versa.
You can make changes and see them on your local version much faster, pages refresh instantly, you don’t have to wait to upload files, you don’t have to worry about visitors viewing your work in progress. You can even work without being connected to the internet.
It allows me to have accurate mirrors of my sites locally running the same server side technology as the live sites. Before to style my WordPress posts I had a static HTML version of a post that I would style and then mirror that on the blog, but now I have a whole test version of the blog that behaves identically to this blog.
It is a great opportunity to learn how to use Linux.
This setup will also be a crash course in server technologies. If you want to know the basics of the LAMP setup, and if you are a web developer you should, then this setup will definitely be a great place to learn that. I’ve learned more about web servers just setting this up than I ever knew before. You get a great deal of experience working with Apache: setting up vhost files, etc etc.

10110101001

do all my designing and general tomfoolery on a windows 7 machine. So the first step is to create a virtual machine on that machine to act as the server, a large majority of web servers are Linux servers so it only makes sense to do the same.

Download and Install Virtual Box
Download the Ubuntu ISO file.

I am running Ubuntu 10.04 Lucid Lynx. I tried installing the latest version and found the new Unity UI to be completely unacceptable. I also downloaded the 64 bit version of Ubuntu, but it may have been a mistake, and I think the 32 bit version would have run faster.

Create a new virtual machine using the Ubuntu iso.

I found VirtualBox to be super easy to use. I’m running pretty much the default options, nothing too crazy. For the networking options I found that a bridged adapter setup works best. This allows your host (windows) machine and your guest (linux) machine to have different IP addresses.

After you get Ubuntu up and running you’re gonna want to install guest additions from the VirtualBox Devices menu. This will allow things like seamless display and more importantly the cross-machine clipboard, guaranteed to make your life easier.

Next step is to give your Linux machine a static IP. You can do this in your reuter.

Now that your Ubuntu VM is up and running you need to make it a web server. This is by far the biggest hurdle. Luckily it is such a common procedure that Ubuntu has documented it on a single page much better than I could ever do.

It puts the AMP in LAMP.

ApacheMySQLPHP

Now you should be able to go to a browser on your windows machine, and put the ip address of your Linux machine, and if you followed the instructions on the link above you should see your php info file.

To make this easier you can edit your windows hosts file and set your linux ip address equal to whatever domain you make up, here my addition to my windows hosts file mine:

192.168.1.3 eddie.test.internal

Now eddie.test.internal on my windows machine will point to my virtual machine.

10110101001

verything was working fine up to this point, I did a local install of wordpress, imported a database dump from dinflux.com into MySQL. and had a local copy of WordPress going. With one big problem, I could not access any links, if i went to /post_name, for example, I would get a 404.

After some troubleshooting discovered that when I installed Apache following the guide from Ubuntu’s site, the ReWrite Mod was not installed. I installed it using:

sudo a2enmod rewrite

This allows the .htaccess file in the WordPress installation to redirect the browser. This doesn’t make sense to me because I was under the impression that Mod Rewrite is pretty much essential these days, why wouldn’t it come pre-installed? Get your shit together Ubuntu.

And that is it. I actually share the site folders from my Linux machine back to my windows machine so that I can edit the files in windows.

I hate writing guides, so this is more of an outline that might get people thinking about doing this for their own setups, and pointed in the right direction. If you have any specific questions I’d be glad to help.

- ECF

21st Amendment Product Design

dinfluxEd — Mon, 14 Nov 2011 04:44:24 +0000

21st Amendment Product Design

These days the educated craft beer drinker knows that craft beer from a can can be as good as beer from a bottle. And one of the companies that is helping to reinforce this notion is 21st Amendment Brewing from San Francisco California.

A name like 21st Amendment brings to mind images of post prohibition America, of a time when beer popularity was exploding, and when almost all beer came in cans. 21st Amendment has taken these images and wrapped them up with beautiful graphic design and marketing.

Each of their distinct brews come in cans, and mostly in 6 packs from what I’ve seen. Each brew has gorgeous art on the boxes as well as a smaller version of that same art on each can. They are all images of Americana with a vintage flavor and a modern playful twist. Take the Statue of Liberty taking a break on the job, Paul Revere ridding into town on a hog, Mt. Rushmore kicking ass, or Teddy Roosevelt sitting down by the fireplace enjoying a winter ale. The art style is complemented beautifully by great typography that tells you everything you need to know about the can of beer that you hold in your hand. The text is logically divided by the direction it reads in, which works wondrously on a medium like a can which you can easily turn in your hand and read the text clearly.

If you can find 21st Amendement in your area bring a 6 pack home and appreciate the art on the cans. They are also conveniently really great beers, so feel free to pour one can while you appreciate another. But I would guess that if there was 21st Amendment in your area, you would’ve already seen it, because the packaging really does a good job of standing out and saying “Hey this can really does hold something special”.

- ECF

Mouse over the images on the left to see more

December 5th, 1933
The 21st Amendment to the US Constitution is ratified when Utah becomes the 36th state to approve it. Prohibition officially ends.

The One Graphic Novel All Designers Must Read

dinfluxEd — Tue, 01 Nov 2011 02:51:16 +0000

The One Graphic Novel

All Designers Must Read

*1./ DINFLUX

This post is in tribute to “The Nightly News”. All images used without permission, but with good intentions. Hopefully the positive review will dissuade lawsuits.

It’s pretty incredible how long it took me to appreciate graphic novels. For many years I simply had disregarded them, to be honest, i don’t even know why. I had assumed they all came as small comics so I will chuck it up to laziness and youthful lack of means. The first graphic novel I sorta read was 100 Bullets Issue #1, around 6 years ago, maybe more. The issue was released online as a promotion for the rest of the series. I thought it was pretty damn good! and then quickly got distracted by other interests…

Over time comics were always there, friends would say “oh have you read this comic” and many people I knew/know would say they were into comics, whatever that means. And of course when the watchmen movie came out it escalated to a frenzy and it was impossible to walk to the grocery store without seeing that yellow smiley face.

Finally this past year I decided to give in. I read watchmen. I felt I had to pay my dues. For the record I enjoyed tremendously. The story is fantastic, and it is in fact much better than the movie. The art I wasn’t particularly impressed by. It has that classic “drawn” look. Like the art lacks polish or the story was put before the art and printing. Which is fine, I would still recommend it to anyone. After the obligatory watchmen I did an inordinate amount of research and compiled a list of novels that I think I would like, but one stuck out on that list. The Nightly News by Jonathan Hickman.

Hickman wrote, lettered, drew, colored, and inked this short run comic. It originally ran 6 issues and is now available as a trade paperback.

You can immediately tell that this comic was the project Hickman wanted to work on all his life.

The story is passable, in my opinion Hickman isn’t the best writer, but lets move on because if you wanted good story you would read a book. (jk)

This graphic novel is visually stunning. Each page looks like a poster, and in fact could actually be a poster. The whole book is printed on glossy paper and the coloring is sharp.

A lot of disciplines of graphic design carry over exactly into graphic novels. For example, focusing the readers vision. Hickman completely ditches the panel approach for the most part. You would imagine that it would be hard to keep the readers eyes following the page in order, but it’s handled expertly, and the reader is never lost trying to read the page.

The book is also riddled with simple vector style graphics and patterns. This is so reminiscent of web design that sometimes I would look at the pages and think, “hmm that pattern would make a good background.” There is also good use of layering and elements are reused in different opacities it gives the book an overall grunge feel, all while straddling the line of being too visually busy. To top it all off, Hickman actually has pages that are infographics.

Another aspect I was greatly impressed by is Hickman’s attention to detail. It is often the very little things that take a design from good to great. There are tasteful little things all over the book: Page numbers randomly positioned on the page, sarcastic disclaimers that begin each chapter, or little notes directed at the reader.

*2./ DINFLUX

Some circles above and all the boxes have being rendered with CSS.

Go get it, it’s a visually stunning read. I dare any design professional to read this comic and not be impressed.

- ECF

Sample Pages

To view a gallery of the pages from the book click here.

Coding A Portfolio Site

dinfluxEd — Sun, 25 Sep 2011 02:36:11 +0000

CODING A PORTFOLIO SITE

With a well planned design already in mind, the next step was to recreate the photoshop layout using HTML and CSS.

Here is our layout once more:
Envision Yourself As A Website

Starting from a clean modular slate

I will be using PHP to create this site, and not because of any of the more advanced features of PHP, but just because of the PHP include function. I highly recommend that any novice web designers start using these functions as it allows you to modularize your code.

This is incredibly useful if you know you will be having many individual pages on your site. I will admit that I used to be one to just copy and paste or use the “save-as-and-change” method to create similarly coded content pages. The problem here arises when you have to make changes down the road, you have to go back to every page and change it, as opposed to just changing the included PHP code. We will see how PHP includes come into play later on in the coding of this site.

The first step is create a blank HTML file, and then attach 3 CSS files. They are also attached in order so that I know which files will supersede others. CSS links that come first will have their declarations replaced by the ones that come after if it is the same declaration.

First, I attach a reset file (if you do not know what a reset file is, please check out this great link). I have been using Eric Meyer’s reset file for a long time, it suits the way I usually code things in CSS and I have not found a need to modify it yet. You can check it out here and read Eric’s reasoning behind the elements in the reset file.

After the reset I attach a layout file and a text file. I like to split my CSS so that later on I can easily find declarations and make changes.

Lay me out layout

We now have a skeleton of the index page and similarly all the sub pages, click on the code barf box on the right to see all the code with some annotations, or click here to see the full code.

- ECF

envision yourself as a website

dinfluxEd — Mon, 05 Sep 2011 19:26:50 +0000

envision yourself

as a website

When I tried to envision my new portfolio site, I pictured a very clean design. The visual focus of the site had to be on the portfolio work, this was my number one priority, and accordingly, the focus of the design as well. With that in mind I started working backwards – I did not want the page to
be cluttered up with video descriptions, or an overwhelming gallery of works.

I decided to split the site into 3 pages: One
for video, one for web designs and one for print
designs, each one sharing an almost identical
layout. This way, I always had the option of
sending an interested client a URL to just my
video work, or just my web work. I started
creating the video page as a basis for the other
pages.

I knew I would want to implement a
thumbnail display for my works, and have the
videos and images pop up in a light box. This
would help keep the page clean and free of
descriptions. Any information related to a portfolio
work would be dealt with in that work’s lightbox
display.

For the video section of the site, I wanted my
reel to be the most prominent element. While the
site will include most of my work, I understand
that most people don’t want to go through all of
my work, they just want to watch the compilation
reel. This is specially true if I plan on using the
site to try to garner employment. So the
design was always focused around making
the reel the most prominent element on the
page.

Initially I had the idea of a vertical navigation
menu, and you can see that in some of the
designs to the right. After some experimenting I
realized that the vertical navigation did not look
as good and most importantly created some very
weird spacing. The weird spacing issues eventually
lead to the idea of using side scrolling and in
the end I went back to designing on a very tight
grid with fixed top elements and side scrolling to
showcase my work.

the final design

The final design is based on a 975px width. The columns are 95px wide and have 12px wide margins. The main video area and the right area widths are based on the divine proportion. And come in at 642px wide and 333px wide respectively.

Once I was happy and done with the design, I thought about the other pages – the web section and still section. What would take the place of my video reel in those pages? I came up with an unorthodox solution. The same reel. I decided instead of making a video about video to try to make a design reel which highlighted most of my work. I’m happy with how it came out, and think that if a visitor comes to the site and only views the video, they can get a pretty decent idea of my work.

You can of course see the design live at my portfolio site: eferrer.info. Below are some more notes about specific elements in the design.

elements

Background
Image I had on my computer, if it is yours let me know and I will credit you, I honestly don’t remember where I got it.

Color
This was a theme I remember seeing on Kuler for a previous freelance project I had done, I tried searching for it again and couldn’t find it, so I recreated the colors from memory. I’m really in love with the colors. For anyone interested these are the color codes: #FEFEFE, #a1b70d, #e44025, #9e9e9e, #cecece, #000000

Font
Helvetica. I do think Helvetica is getting really over used. I tried searching for another font, but I really like the capital R’s in Helvetica and the font just fit really well. All the titles are actually stretched vertically, so we could say
it is a modified Helvetica.

I took my time with the design of this site, and when I thought I had a design I liked, I would let it sit for a couple days and then come back to it. This is a great practice that often times is made impossible by project deadlines, but I believe it really helps. When I come back to a design a week later and still think there is nothing I can do to improve it, that is a design I can really stand behind. I as I look at the portfolio site, I think that is still the case. Except for some minor tweaks I would like to do – sigh, a designer is never done after all…

- ECF