Observer Monogram Luke Dorny

007 lukedorny.com

Completing your own project that represents yourself in one way or another is, well, easy.
So, I set about creating a real site that has content that I like to read. This is how it happened.

article-image

figure 1:

<this is where the code goes>

Starting From Scratch

The fact that I’ve had website holder files on this and several other sites and projects for too many years can get you down. Why not take a break from some of your projects, work, life, etc., to really dig in and create something with your hands for yourself (even if it is with your keyboard).

Actually, I didn’t take a break to create this. This was a hobby over the last year and a half to convert and design on the fly from flat, to wordpress, to expression engine, to live design edits, to hobnobbing here and there, tinkering with IF:ELSE statements. It has been an engaging and rewarding experience so far. It’s funny how some of the initial six articles have evolved over the years. There are in fact other major articles brewing, as any proficient weblog writer will tell you, but that will not be complete until some review and finishing touches are applied.

Regarding this domain in particular, it’s interesting to feel such a front-facing project that would represent myself and my thinking in design and the web industry take such a careful and straining part of me to create. The project of actually *doing* the work on it, the designing, the coding, the testing, the changes, the newer methods (and oh how they change ever so quickly in this industry), has become a task which I don’t want to finish. Indeed the creating of the object is sometimes the most enjoyable. Restoring automobiles, building model airplanes, raising children, building up a company, exploring your own brand, preparing for retirement, or anything else substantial in our lives. Ha! No, making my own website is not like having kids, but you get the picture that I’m painting, right?

Firstly, design. This encompasses the look of the site, the brand’s logo, the arrangement of content, deciding what content is important to me and interesting to the reader. From paper to pixels, to code, to screen, to eyeball. Jumping mediums is an odd thing in the digital world. With printed design, you create files, then film, then plates, then onto rollers to imprint on paper, then folding, trimming, binding, packaging and presentation, be it in an art gallery or the instructions for flat-pack assembly. Ahhhh, print design. The finality, the smell of the ink on paper, the texture…

Design

Design started many times. You know the design process: EPIPHANY > SKETCH > PIXELS > CODE > and so forth. At any one moment your process may stall and return to the beginning. For a while, there was a BeOS design of this site up in a holder template for at least two years.

Designing the current Luke Dorny logo, or monogram, was a stumble in vectors in Illustrator. I’d used many different settings of the letters before, ones that I’m still very happy with. But this time, once the L and the D lined up within a circle with certain spacing, the shapes took on the look of a face. Some minor tweeking later, it was complete. For those interested, check out a massive list of artist monograms that have been scanned in from the old world. You’ll see that originality wasn’t always easy, and that the monogram for Lodovico Cardi (190) for example became what is know as the “Center Line” symbol in mechanical drafting.

The LD, or “Observer Monogram” as I’ve named it, begins to look like something you’ve seen before. Could it be the Bauhaus logo? The LG Electronics logo? The Long Play record symbol? No matter. Many things look like other things in this world.

Tooling

Becoming familiar with a new Content Management System is not always an easy task. Expression Engine had been used on a few projects I was involved with and so I decided to move forward with powerful tools instead of the popular ones such as WordPress. There are many out there to choose from, and it should be stated that they are tools. TOOLS.

 

Tools: Use what you know, learn what you find powerful, become adept at using them.

Expression Engine

There a few quibbles about using Expression Engine. Minor, but in the end, these issues help form the experience of creating and viewing an EE website. Listing all of my beefs with EE here in this post would be unwise. Their landscape has changed quite a bit in the last six months. Version 2.0 beta was released, pricing structure has changed, and a lot about the administration panel has changed, as well.

To be honest, EE is a tool. In a good way. If I wanted to make a beginner blog, I’d use a beginner tool or application (hey, no jokes here). Some of the web applications and tools that help you to create blogs do only that. For example, WordPress helps to create weblogs very well. There are a zillion plugins and extensions out there for pulling and twisting WP into whatever you’d like. But it’s still a blog, for the most part. Many of the features I’d thought up for the site you’re viewing were brought along with the process but were initially based on plugins that were available years ago. So, I’m not sure what the perfect metaphor is to compare Expression Engine with WordPress, for example, but perhaps let’s state that Expression Engine is a toolbox with some basic tools to create anything you want, and WordPress is a go-kart. The go-kart runs great, and hey! Go-karts! But if you want to add bigger wheels to your screaming backyard sport, the limitations of the body and the frame will prevent further growth into the Monster Jam machine you were aiming for.

With some minor faults that have to be noted regarding social network integration, for the most part, Expression Engine can be bent to your will. I’m not that familiar with the world of CodeIgnitor, a PHP framework which forms the basis of EE version 2.0 the metaphorical foundry of the tools you’d use in EE. I’ll stop there. Many people know much more about the pros and cons of EE than I. Besides, there are more and more add-ons for EE with every passing day.

HTML5 & CSS3

There is much to be said on this topic. Suffice it to say that HTML5 is here to stay, it’s the future, it’s slowly dominating, it touts many advantages and openness in comparison to many other platforms and continues to be explored by designers and developers the world over. Certainly, but beyond the initial confusion about which elements reside inside of others, what is a block-level element and what isn’t, and more… HTML5 has proven its worth and strength especially in WebKit and Mozilla-based browsers. For more on HTML5 and CSS support, there are many resources, but here’s one I’ve been watching: Web Designer’s Checklist (compatibility chart).

For myself, the new coding methods became cleaner and much easier to scan while creating code.

Structure

So, I began by setting up the items that I like from blogs in general. Google has recently altered its homepage to hide extraneous information on the page until your mouse moves, assuming that if you’ll only be typing for a search, you don’t need to see all the extra bits. I prefer little details to be added to entries. Sure, just a title and body looks clean, but how usable is it?

     
  • Title
  •  
  • Date
  •  
  • Article Number
  •  
  • Article Content
  •  
  • Author
  •  
  • Categories
  •  
  • Quicklink
  •  
  • Links Referenced
  •  
  • Comments

Mentally, I digest information in my own way. I grew up seeing my dad critique my mechanical drawings, assembling models, went to after school computer drafting classes, attended architectural and mechanical drafting courses at city college after school as well. On the other hand, I also started drawing perspective based hotrods in AutoCad there as well. So after spending quite a bit of time engaging in the world of formats and line-weights, ISO rules, etc. I realized that I still needed a large amount of creativity in my design. Having technical information present in my own design is something I appreciate. Arriving at proper ways to implement features becomes a trek.

As an example, In order to get an auto-incremented, three-digit Article Number for each article, I found that one could (in theory) just use the “entry_id” from the database, like so:

<span class="entry-id">
    {if entry_id <= '9'}
        00{entry_id} 
    {if:elseif entry_id <= '99'} 
        0{entry_id} 
    {if:else} 
        {entry_id}
    {/if} 
</span>

You’ll see there that I began the logic that would automatically add zeros before the number if it were less than a hundred, ten, and so forth to get a three-digit number everywhere on the site.

In practice, this is never a good idea, since these IDs should never be used in such a way. I was warned of this by several people before I gave up and threw in a custom field that I’d have to hand number while adding each new entry. This isn’t something that is unique to Expression Engine and is a unreliable and silly way to go about it using any CMS.

After the new change, I ended up with this:

<span class="entry-id">
   {artnum}
</span>

Of course, me being a designer first and programmer second, I stumbled along in this manner for years. Discovering, testing, tinkering…. Gently depressing multiple keys with my forehead repeatedly.

In fact, this is the method used by many, including myself, to learn new languages and become a more powerful designer, programmer, …anything really. Learn by doing. You learn hard lessons.

Comments

For many, comments are a contribution to the article, whereas for others, comments are a constant nuisance and potential security risk for hackers and random bored salesmen peddling wares of unknown origin.Personally, I appreciate commentary and encourage its use. Obviously wrangling in controls, forms, and methods to prevent trolls and medical salesmen who knock blog-to-blog from posting unsolicited adverts is important (so using a captcha or authentication tool is handy).

Naturally, the day this site receives an unwieldy amount of comments is the day anyone would revisit comment policies. Especially if said comments don’t add to the conversation.

Progress

There is more to discuss, but hopefully enough to sufficiently approach my 5,000-word target for otherwise simple blogposts. There are features I’d like to spend more time discussing, such as per-post custom CSS or code to help make each post interesting. There are many sites that do this quite well. Some come off as magazine spreads, broadsheets, and glowing printed matter. Expect more writing and explanations behind this soon.

For now, I’ve arrived at a time when I feel comfortable finally publishing this article and all of the previous articles as the beginning of something more. Finally, my vehicle has wheels and there are anvil hits in the garage. Also, I’ve been leaving major burnouts around the neighborhood.

 

UPDATE: October 29th, 2010
This was written months ago, and there are many more things to discuss about the new site, but that will have to be in a newer post. Expect it soon.

Referenced

  1. BeOS on Wikipedia http://en.wikipedia.org/wiki/BeOS
  2. monogram http://en.wikipedia.org/wiki/Monogram
  3. artist monograms http://www.artarchiv.net/doku/artistmonograms.htm
  4. originality wasn’t always easy http://www.artarchiv.net/doku/mono/111.JPG
  5. monogram for Lodovico Cardi (190) http://www.artarchiv.net/doku/mono/18.JPG
  6. Expression Engine http://expressionengine.com
  7. WordPress http://wordpress.org
  8. Web Designer’s Checklist http://www.findmebyip.com/litmus/
  9. Google Search http://google.com

Search flickr for web

  • Commentary

  • There are 11 comments . Comments are closed. Move along.
  • Gravatar for Brian Warren Brian Warren http://begoodnotbad.com 1

    from Philadelphia left this bit 6 years, 3 months ago on 2010 10 29

    FIRST POST!

    Love love love love it! Congrats on pushing this out the door and on behalf of the internet, thank you for making the world a better place.

  • Gravatar for Greg Greg http://www.airbagindustries.com 2

    from San Francisco left this bit 6 years, 3 months ago on 2010 10 29

    It’s about damn time! Every time I’ve see glimpses of this site I told you that it’s going to be great and it’s even better. It’s great to see your writing in long form Luke and I’m looking forward to the next post.

  • Gravatar for Joey Pfeifer Joey Pfeifer http://www.joeypfeifer.com 3

    from San Francisco left this bit 6 years, 3 months ago on 2010 10 29

    Nice work, Luke! Like Greg, I remember seeing snippets of this months and months ago. Great to see it finally go live!

  • Gravatar for Tom Carmony Tom Carmony http://www.bainbridgestudios.com 4

    from Tacoma, WA left this bit 6 years, 3 months ago on 2010 10 29

    Beautiful work, Luke! I’m really looking forward to poking around here. Instantly bookmarked…

  • Gravatar for Anton Anton http://antonpeck.com 5

    from Peoria, IL left this bit 6 years, 3 months ago on 2010 10 29

    Well done, sir! I love what you’ve done with the place. First Duke Nukem, now you. Wow. We live in the future.

  • Gravatar for Chris Harrison Chris Harrison http://cdharrison.com 6

    from Augusta, GA left this bit 6 years, 3 months ago on 2010 10 29

    Nicely done, sir. The details are astounding, but I wouldn’t expect any less from you. Can’t wait to see more.

  • Gravatar for Renaudical Renaudical http://jimrenaud.com 7

    from The Mitten left this bit 6 years, 3 months ago on 2010 10 29

    Congrats, my friend! Looks nice. Like cute babies it takes at least 9 months to gestate! Looking forward to see the content grow and then walk and then break stuff and then eat nothing but candy.

  • Gravatar for Patrick Brumfield Patrick Brumfield http://normalcy.net 8

    from Southern CA left this bit 6 years, 3 months ago on 2010 10 29

    Great work! So many details (which are typically so easy to ignore — especially on personal sites) and love baked in here. I love all of the animations/interactions, and the typography is sharp. Will be looking forward to iterations and more gems! Congrats, Luke.

  • Gravatar for Luke Dorny Luke Dorny http://lukedorny.com 9

    the Forklift Driver from Seattle, WA left this bit 6 years, 3 months ago on 2010 10 29

    Thank you, everyone. Too kind. Hilarious, Anton.
    Pretty much logged in and added bits as they came to mind and when I had time. Some of the ideas stuck, and worked, others, not so much. But that is the dev/designer’s personal site, right?
    Thank you again, peeps.

  • Gravatar for Tim Van Damme Tim Van Damme http://maxvoltar.com 10

    left this bit 6 years, 3 months ago on 2010 11 01

    Whoa whoa whoa, a bit late to the party, but this looks sah-wheet! Muchos congratios withos youros newos sitos amigos!

  • Gravatar for Scott Scott http://scottboms.com 11

    from Igloo Land, Canadia left this bit 6 years, 3 months ago on 2010 11 04

    I told you you could do it. Now—get writing! More.

  • Add Yours:

    Commenting is not available in this channel entry.