Design

UI Design Fundamentals

I'm going to start doing a new thing where I start using my blog as a note taking resource from all of the books I read! Currently, I'm reading The Design of Everyday Things - Don Norman. I highly recommend this book for anyone looking for a scientific and psychological approach to design. Creativity is important, but there are definitely fundamental steps to help improve your designs.

Let's start with the Fundamental Principles of Interaction. This is for all of the user interfaces people out there :).

  1. Affordances - All of the possible interactions between the people and the environment. Some affordances are perceiveable, others are not. Affordances are relationships between properties of an object and the capabilities of the actor. For example, glass affords transparency - this is a relationship between the glass and the actor's sight. When affordances aren't perceivable, they will need some...
  2. Signifiers - Signals things. Lol, but seriously, signifiers indicate what actions are possible and how they should be done. Signifiers are more important than affordances for they communicate how to use the design. Suppose our glass example were a transparent glass door, we will need to know which way the door rotates right? Push/Pull signs, curved handle bars for a pull, and a large depressable exit door button are some ways to signify how an actor might use this door.
  3. Mapping - The relationship between the elements of two sets of things. In our door example, suppose we had a smart door which could be controlled from a mobile application. Mapping is an important concept in the design and layout of this mobile application's controls and display. We must establish a mapping of the phone display to UI elements which indicate whether to open or close the door. These mappings must be both logical and visible. Once we establish a mapping and press the buttons, we will need...
  4. Feedback - A communication of the results of an action. Feedback must be immediate and informative, any delays will cause reason for concern. In our internet of things smart door example, most feedback from the mobile application will be a touchable opacity to indicate the button was pressed. In addition, the door would have to move right? Feedback from a mobile application to a physical device is awesome and brings us into the Internet of Things (Tesla makes amazing cars and batteries with this capability).
  5. Conceptual Models - An explanation, usually highly simplified of how something works. Think of icons and folders as conceptual models. Would a normal user be able to understand the tree directory structure of the file system?? Hell fucking no. Give them something way easier to digest.

I hope you enjoyed this post! Keep track of all of these basic interactions when starting any of your designs and applications, they are fundamental human understanding. It is my dream to work on some cooler graphical design projects (AR/VR, Unreal Engine, Visualizers) in the future, so stay tuned Internet. (Note: That all projects started by me are never finished by me either hahaha)

Standard
Design, Programming

Montserrat Font and Legacy Support

See the ongoing GitHub discussion.

Without going into too much detail, Google updated the Montserrat font and its weights remotely, affecting millions of designs across the world wide web which integrate with Google fonts. This affected me personally, as I use Montserrat for my blog titles.

I absolutely despise API's which introduce breaking changes. All of these breaking changes destroy any legacy applications which are using the API's. Google in particular has a penchant for deprecating, breaking, or removing their API's: remember when the internet of shit's favorite Samsung smart fridge couldn't connect to its dumb calendar? Lol. This time, millions of websites across the web were forcing shitty text overflows down everyone's throats.. Who wants that???

I'm not sure who's in charge of these decisions, but developers - the best rule of thumb to go by is once an API is deployed to production, everything in that API spec cannot change. LEAVE IT BE! The end consumer is always expecting things to abide by the status quo. The majority of users will not update their application, and they will immediately complain about anything that doesn't work at a prolific scale.

It's an awful user experience. All designers and programmers should consider these legacy customers and find creative solutions to scale and expand their API's rather than forcing major upgrades.

Before I sign off here, I'd like to talk about one of my nightmares. I can hear it now...

what about Internet Explorer??

If you don't want to deal with an awful browser or device (Windows phone I'm looking at you), do not build applications for these devices in the first place. Once you decide to start supporting anything at all, you will have to support it for all its technological life.

Standard
Design, DIY, Programming

The Rewards of Full Stack Web Development

This summer I took the road far less traveled.. Having worked for Texas Instruments as my previous summer's Software Internship, I reaped the benefits of having a full time job. Hell, I was making almost 50k as an intern in a state with no state tax -- gotta love Texas. Fully paid living, endless beer, and beautiful Dallas babes.. Why did I even leave??

I don't want to go in depth on what I did for the company because I have a feeling I wrote some seriously wrong database query methods that could very easily be SQL Injected, but it was my first exposure to web development: Microsoft Visual Studio (VB.NET). HTML/CSS/Javascript, I figured out the basics, and I learned how to make serious web scrapers. I thought I was one badass software intern, lol.

I really do thank Texas Instruments for providing me with the opportunity to get started in web development, but all the work I did there merely scratched the surface of what Web 2.0 could do. Last winter, I decided to give Ruby on Rails a shot (shout out to Michael Hartl for one of the best, free, online Rails tutorial). Rails is fucking tough man.. It really did baffle me why they would separate the Models, Views, and Controllers just to render a simple static page. By the end of that tutorial, I still had no idea where to begin, but I had a much better idea of how the MVC interacted, and I also had a glimpse of how easy it is to make Rails dynamic.

And then this summer came rolling along.. I'm currently working part time to pay rent and booze, while working overtime on my startup product. tessle.com Being the only coder on a full stack development project is both physically and mentally draining, but I can safely say that I have learned 50 times as much as I did working for Texas Instruments. So without further ado, here are the rewards of full stack web development: You..

  • Master relational databases
  • Become a master of your framework
  • Understand Javascript and Frontend Development for all of the web
  • Firebug/View source on everything that looks remotely cool
  • Understand how to debug any and all situations for your application
  • Contribute to open source -- stack overflow, railscasts
  • Learn why github and heroku are absolute necessities for making your life easier
  • Appreciate how damn hard development can be
  • Evolve into a coding badass
  • Have a coding baby, one that you have nurtured for the past 6 months which you can proudly call your own... :')

Give it a shot. Even if your baby doesn't grow into anything, you will learn way more than sitting at a desk pretending to do work.

Standard
Design, Programming

Ubuntu Edge Won't You Be Mine?

Ubuntu Edge: The biggest IndieGoGo project to this date needs another 28.5 million in order to succeed. It looks extremely unlikely, but this would be my goto, drop-my-iPhone 5-in-a-heartbeat phone. Screw the MacBook Air, I just need a single mobile device to accomplish all my needs.

I currently use Google Voice, so the ability to text/call from my computer/phone would never leave my pockets, but on top of that, I'll be switching carriers to an unlimited data plan (screw you AT&T), so the ability to access data from anywhere will be crucial to me.

I'm a developer -- the only operating system I can develop on is Linux/Ubuntu.. The days for Windows should be left to bigger desktop towers to render all my games.. Having the ability to morph from a mobile device to a developing platform, Ubuntu Edge is what I once dreamed about.

The nerdiest and geekiest phone. Say Goodbye to the days of Apple/Google Voice, Ubuntu Edge won't you be mine?

Standard
Design, Programming

Add Disqus comments to WordPress and edit CSS

For those of you who have struggled using the Disqus WP Plugin, this guide is for you. I tried using the plugin, but no matter which stylesheets I edited, I couldn't edit the Disqus CSS since the stylesheets are located within an iframe tag. Anyways here's what I did to fix that annoying box/margin error.

Using this guide, I added this JavaScript code to the end of my functions.php file.

function disqus_embed($disqus_shortname) {
    global $post;
    wp_enqueue_script('disqus_embed','http://'.$disqus_shortname.'.disqus.com/embed.js');
    echo '<div id="disqus_thread"></div>
    <script type="text/javascript">
        var disqus_shortname = "'.$disqus_shortname.'";
        var disqus_title = "'.$post->post_title.'";
        var disqus_url = "'.get_permalink($post->ID).'";
        var disqus_identifier = "'.$disqus_shortname.'-'.$post->ID.'";
    </script>';
}

Next, I replaced comments_template(); in my single.php and page.php files with this code:

//comments_template();
echo '<div class="disqus-div">';
disqus_embed('YY');
echo '</div>';

Replace YY with your Disqus short name (typically http://shortname.disqus.com). Finally, I added this CSS to my custom.css file. Replace XX with the margins of your liking.

.disqus-div {
  margin-top: XXpx;
  margin-right: XXpx;
  margin-left: XXpx;
}

You can also add any other CSS you want to this class. Cheers, hope this helps someone.

Standard
Design, DIY

Screw the MacBook Air

I don't know when I actually decided I wanted an Apple computer; I've been using Windows, Ubuntu, and Hackintosh computers for all my life.  I still distinctly recall using MS-DOS to switch to my floppy drive directory in order to play my computer games.

I guess the design of the MacBook Air captivated my technological hormones: 0.68" in height, 2.96 lbs, and 7 hours of battery life -- what's not to love.  After some preliminary research, the 13" MacBook Air runs for about $1500 for the options I want.  Even with the rumored retina screen (which would increase the price by another 200), I still don't think a piece of technology should be priced so damn high.  Call me old fashioned, but I'm still a firm believer in Microsoft products for productivity.

So check it out:  I rigged my Asus U30JC-A1 with some supercharged upgrades.  Although the specifications say that my laptop only supports 4GB RAM, the Intel i3 technology actually supports up to 8GB RAM.  Furthermore, I swapped out the ancient DVD Drive, which also duals as a paper weight, with an SSD caddy and a brand new Samsung 840 SSD.  Whoa, nerdgasm.

I doubt my Asus is running the SSD at SATA3 transfer rates, but damn this thing is fast.  It definitely feels like my computer is running at double the horsepower, but I only spent $200 for all the upgrades.  Here's hoping this laptop will run me through the end of college.

On a side note, I changed up a bit of the Ryu theme.  I really wasn't digging the widget buttons at the top, so I scattered those menus among my page.  I've yet to make all of the CSS updates I want, but this is a good start.. WordPress, success!

Standard
Design, Programming

Switched from Rails to WordPress for CMS

I was screwing around with the Refinery gem for the first half of today, and I kept wondering why everything seemed so outdated -- why the hell is it so ugly??  The last blogging gem available for Rails, Mephisto, was updated 4 years ago...  Needless to say, I didn't want to craft my own content management system or use any of the gem alternatives for my blog application.

So here I am, and I must say WordPress is light years ahead of its competition (I'm looking at you Joomla).  I love the ability to quick install plugins and customize all of the content of the fly.  The flexibility of this CMS reminds me a bit of Drupal, but much more intuitive.  Moreover, I've finally found a use for the GoDaddy Linux server that I regretfully paid for a year's worth of hosting, but more on that later.

The only gripe I have against WordPress -- and it's not even the company's fault -- is how many people have used the default themes!!  Just browsing the first few pages of themes, I realize that multitudes of websites haven't even touched the CSS.  Rather, they apply the default theme and hope that no one else uses the same theme...

For now, I'm going to see how enjoyable this WordPress system can be. Stay tuned for design updates!!

Standard