{"id":393,"date":"2016-07-17T18:32:38","date_gmt":"2016-07-18T01:32:38","guid":{"rendered":"http:\/\/ericallen.x10host.com\/?page_id=393"},"modified":"2019-06-15T16:36:56","modified_gmt":"2019-06-15T23:36:56","slug":"portfolio","status":"publish","type":"page","link":"https:\/\/ericallen.x10host.com\/?page_id=393","title":{"rendered":"Portfolio"},"content":{"rendered":"<p>&nbsp;<\/p>\n<h2>Samples of Web, Graphic and User Interface Designs<\/h2>\n<p style=\"text-align: left;\">&nbsp;As a developer and user interface designer, I wear a lot of hats. The following categories highlight my skills in several areas.<\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><span id=\"1\" class=\"clickList\">Page design<\/span>&#8211;<span style=\"font-size: smaller;\">web page design<\/span><\/li>\n<li><span id=\"2\" class=\"clickList\">Graphic design<\/span>&#8211;<span style=\"font-size: smaller;\">iconography, artwork, etc.<\/span><\/li>\n<li><span id=\"3\" class=\"clickList\">UI design<\/span>&#8211;<span style=\"font-size: smaller;\">reworking of interfaces and design of new interfaces<\/span><\/li>\n<li><span id=\"4\" class=\"clickList\">Graph and chart design<\/span>&#8211;<span style=\"font-size: smaller;\">revisions and new charts-information display<\/span><\/li>\n<\/ul>\n<hr style=\"width: 100%;\">\n<p><span id=\"SectionHolder\"><\/span><br \/>\n<span class=\"mainRightSide75\"><span class=\"callout2\"><span id=\"ItemHolder\"><\/span><br \/>\n<\/span><\/span><\/p>\n<p class=\"cleaner\">&nbsp;<\/p>\n<hr style=\"width: 100%; text-align: center;\">\n<div style=\"display: none;\">\n<div id=\"a1\">\n<h3>Page design<\/h3>\n<p>These are pages that I&#8217;ve designed for both development teams and small businesses<\/p>\n<hr>\n<div class=\"listItemsReg\"><span id=\"1\" class=\"subclickList\">Radical redesign<\/span><br \/>\n<span id=\"2\" class=\"subclickList\">Clinic website<\/span><br \/>\n<span id=\"3\" class=\"subclickList\">Booking website<\/span><br \/>\n<span id=\"4\" class=\"subclickList\">Backup viewer<\/span><br \/>\n<span id=\"5\" class=\"subclickList\">Charity website<\/span><br \/>\n<span id=\"6\" class=\"subclickList\">Whimsical prototype<\/span><\/div>\n<\/div>\n<div id=\"b1\">\n<div class=\"narr\">These two comprehensives represent redesigns for a product that analyzes database performance. They are graphically stunning, and present information in a way that&#8217;s easily and quickly graspable. These are hosted within a standard framework.<\/div>\n<p class=\"narr\" style=\"text-align: center\"><a href=\"\/wp-content\/uploads\/2016\/07\/ovpara.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/ovparath.png\" alt=\"\" border=\"0\"><\/a><br \/>\n<a href=\"\/wp-content\/uploads\/2016\/07\/bowtie.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/bowtieth.png\" alt=\"\" border=\"0\"><\/a><\/p>\n<\/div>\n<div id=\"b2\">\n<div class=\"narr\">This is a production website for a small clinic. They&#8217;re in an historic house, with an intimate feel. This drove the design, as did the need for simplicity and maintainability.<\/div>\n<p class=\"narr\" style=\"text-align: center\"><a href=\"\/wp-content\/uploads\/2016\/07\/sellwoodmd.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/sellwoodmd_th.jpg\" alt=\"\" border=\"0\"><\/a><\/p>\n<\/div>\n<div id=\"b3\">\n<div class=\"narr\">This is an implemented site for a small entertainment booking and production firm. It&#8217;s an adaptation of a Flash-based website. It has simpler navigation and a clearer layout, but isn&#8217;t as graphically intense. Sidebar navigation is handled using AJAX.<\/div>\n<p class=\"narr\" style=\"text-align: center\"><a href=\"\/wp-content\/uploads\/2016\/07\/lassuhome.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/lassuhometh.jpg\" alt=\"\" border=\"0\"><\/a><\/p>\n<\/div>\n<div id=\"b4\">\n<div class=\"narr\">This is a working prototype of a web-based backup viewer. It shows multiple sections as openable and closable areas, using ASP and cookies. The content is served using XML\/XSL inside ASP, and CSS for the layout. There is some AJAX used for the report spec.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><a href=\"\/wp-content\/uploads\/2016\/07\/lsbackupv.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/lsbackupvth.jpg\" alt=\"\" border=\"0\"><\/a><\/p>\n<\/div>\n<div id=\"b5\">\n<div class=\"narr\">This is an implemented site for a small charity. Simple, direct navigation, a small Flash photo banner and uncluttered layout on this design.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><a href=\"\/wp-content\/uploads\/2016\/07\/hazhome.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/hazhometh.jpg\" alt=\"\" border=\"0\"><\/a><\/p>\n<\/div>\n<div id=\"b6\">\n<div class=\"narr\">Here is an older webpage prototype for a small boutique. Navigation is simple and whimsical, with clear identification at the top and bottom of the page.<\/div>\n<p>&nbsp;<\/p>\n<p class=\"narr\" style=\"text-align: center;\"><a href=\"\/wp-content\/uploads\/2016\/07\/goldenBough.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/goldenBoughth.jpg\" alt=\"\" border=\"0\"><\/a><\/p>\n<\/div>\n<div id=\"a2\">\n<h3>Graphic design<\/h3>\n<p>Another facet of my work is to create the artwork and icons that get placed on a finished design. This can vary wildly from project to project.<\/p>\n<hr>\n<div class=\"listItemsReg\"><span id=\"10\" class=\"subclickList\">Icon samples<\/span><br \/>\n<span id=\"11\" class=\"subclickList\">Banner ads<\/span><br \/>\n<span id=\"12\" class=\"subclickList\">Internal splash<\/span><br \/>\n<span id=\"13\" class=\"subclickList\">Logo designs<\/span><br \/>\n<span id=\"14\" class=\"subclickList\">Themed functions<\/span><br \/>\n<span id=\"15\" class=\"subclickList\">Basic icons<\/span><br \/>\n<span id=\"16\" class=\"subclickList\">Background art<\/span><br \/>\n<span id=\"17\" class=\"subclickList\">UI facelift<\/span><\/div>\n<\/div>\n<div id=\"b10\">\n<div class=\"narr\">These are a variety of icons for development teams.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/iconSamples.png\"><\/p>\n<\/div>\n<div id=\"b11\">\n<div class=\"narr\">Here are two banner ads used for online advertising. My goal was a simple, uncluttered layout.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/copySamples.png\"><\/p>\n<\/div>\n<div id=\"b12\">\n<div class=\"narr\">This is a splash screen for an internal product. This utilized several common elements with a dynamic and casual feel.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/zap-splash.jpg\"><\/p>\n<\/div>\n<div id=\"b13\">\n<div class=\"narr\">Here are several logo designs for an internal website. My intent was to present a variety of different moods within a common layout.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/RDLogo.jpg\"><\/p>\n<\/div>\n<div id=\"b14\">\n<div class=\"narr\">This is a set of icons centering around a common theme with different functions contained within each box.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/DSSContact.jpg\"><\/p>\n<\/div>\n<div id=\"b15\">\n<div class=\"narr\">Another set of icons-mostly basic functions. This is for a web based reference utility.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/icon-samples-ii.jpg\"><\/p>\n<\/div>\n<div id=\"b16\">\n<div class=\"narr\">This is the top background of a web service.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/timine.jpg\" width=\"60%\" height=\"60%\"><\/p>\n<\/div>\n<div id=\"b17\">\n<div class=\"narr\">Here are a large set of icons for a dev team doing a UI facelift. My goal was a modern feel without a lot of clutter.<\/div>\n<p><span style=\"align: center; margin-left: 15%; margin-top: -50px;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/JPContact.jpg\" width=\"65%\" height=\"65%\"><\/span><\/p>\n<\/div>\n<div id=\"a3\">\n<h3>UI Design<\/h3>\n<p>I work on revising development teams&#8217; interfaces as well, and I&#8217;ve done a lot of UI programming in the past. I have also done prototypes for information architects.<\/p>\n<hr>\n<div class=\"listItemsReg\"><span id=\"27\" class=\"subclickList\">Report redesign<\/span><br \/>\n<span id=\"28\" class=\"subclickList\">Mobile UI<\/span><br \/>\n<span id=\"20\" class=\"subclickList\">Security dialog<\/span><br \/>\n<span id=\"21\" class=\"subclickList\">Connection dialog<\/span><br \/>\n<span id=\"22\" class=\"subclickList\">Database list<\/span><br \/>\n<span id=\"23\" class=\"subclickList\">Performance layout<\/span><br \/>\n<span id=\"24\" class=\"subclickList\">Prototype<\/span><br \/>\n<span id=\"25\" class=\"subclickList\">Selector\/Parameters<\/span><br \/>\n<span id=\"26\" class=\"subclickList\">File generator<\/span><\/div>\n<\/div>\n<div id=\"b20\">\n<div class=\"narr\">This form was done primarily in Visio, with polish and the framework added in Photoshop. The original was just a grid, and the filtering mechanism was overly cluttered and removed from the data display.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/ToadSecurity.png\"><\/p>\n<\/div>\n<div id=\"b21\">\n<div class=\"narr\">Here is a comparison of a redesign of a database connection dialog. This design was done in Delphi. The goal was to simplify and show more information on the grid, and to differentiate parameter entry from the dialog&#8217;s main function.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/redesignCM.png\"><\/p>\n<\/div>\n<div id=\"b22\">\n<div class=\"narr\">This is a dialog to organize database connections. This had a layout directive, and some navigation issues in the original.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/ManageTree.png\"><\/p>\n<\/div>\n<div id=\"b23\">\n<div class=\"narr\">A revision to a database performance product. My goal was to make the main area simpler and easier to see the relevant information. Also to centralize the next steps and give a more balanced textual presentation.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/PACompare.jpg\"><\/p>\n<\/div>\n<div id=\"b24\">\n<div class=\"narr\">Here is a prototype in Delphi, compared with the block diagram designed by the architect.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/SPCompare.jpg\" width=\"75%\" height=\"75%\"><\/p>\n<\/div>\n<div id=\"b25\">\n<div class=\"narr\">This is a page from a wizard that sets up physical inventory processing. This page enables location choice and run parameters for each choice.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><a href=\"\/wp-content\/uploads\/2016\/07\/invsel.jpg\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/invsel_th.jpg\"><\/a><\/p>\n<\/div>\n<div id=\"b26\">\n<div class=\"narr\">This is a program that generates member files based on their proximity to the store.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/geomvp.jpg\"><\/p>\n<\/div>\n<div id=\"b27\">\n<div class=\"narr\">This redesign consolidated several different reporting modules. Report selection and creation was simplified and modularized. This 3 top pane, bottom pane layout was subsequently applied to redesigning the rest of the application.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><a href=\"\/wp-content\/uploads\/2016\/07\/ecrtrep.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><br \/>\n<img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/ecrtrep.jpg\" width=\"60%\" height=\"60%\"><\/a><\/p>\n<\/div>\n<div id=\"b28\">\n<div class=\"narr\">This is a design for a messaging app, targeted at a mobile device. My intent was to simplify the data entry so that users would be motivated to fill out the entire form. I also wanted a clean, spare, flat look, so all the borders and extra stuff is gone.<\/div>\n<p>&nbsp;<\/p>\n<p class=\"narr\" style=\"text-align: center;\"><a href=\"\/wp-content\/uploads\/2016\/07\/newIssue.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/newIssueth.jpg\" alt=\"\" border=\"0\"><\/a><\/p>\n<p class=\"narr\" style=\"text-align: center;\"><a href=\"\/wp-content\/uploads\/2017\/04\/ExistingRequest-Simple-Small.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/04\/ExistingRequest-Simple-Small-th.png\" alt=\"\" border=\"0\"><\/a><\/p>\n<p class=\"narr\" style=\"text-align: center;\"><a href=\"\/wp-content\/uploads\/2017\/04\/NewRequest-Simple-Small.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2017\/04\/NewRequest-Simple-Small-th.png\" alt=\"\" border=\"0\"><\/a><\/p>\n<p class=\"narr\" style=\"text-align: center;\"><a href=\"\/wp-content\/uploads\/2019\/06\/Inbox-small.png\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2019\/06\/Inbox-thumb.png\" alt=\"\" border=\"0\"><\/a><\/p>\n<\/div>\n<div id=\"a4\">\n<h3>Graph and Chart Design<\/h3>\n<p>Making and revising data presentations is also something I do as a UI designer. This process is overlooked, and risky-it&#8217;s easy to add a lot of effects to charts that can actively detract from the information being displayed.<\/p>\n<hr>\n<div class=\"listItemsReg\"><span id=\"30\" class=\"subclickList\">Inspector<\/span><br \/>\n<span id=\"31\" class=\"subclickList\">DB stats<\/span><br \/>\n<span id=\"32\" class=\"subclickList\">Chart effects<\/span><br \/>\n<span id=\"33\" class=\"subclickList\">Activity chart<\/span><br \/>\n<span id=\"34\" class=\"subclickList\">DB freespace<\/span><br \/>\n<span id=\"35\" class=\"subclickList\">Cutoffs<\/span><br \/>\n<span id=\"36\" class=\"subclickList\">TS failure<\/span><br \/>\n<span id=\"37\" class=\"subclickList\">SQL compare<\/span><\/div>\n<\/div>\n<div id=\"b30\">\n<div class=\"narr\">Here is a revision, removing the 3-d effects, lightening the bright colors and simplifying the grid and axes.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/inspmgr.jpg\" width=\"60%\" height=\"60%\"><\/p>\n<\/div>\n<div id=\"b31\">\n<div class=\"narr\">This is a main landing page set of charts that benefited greatly from removal of 3-d, lightening colors and axes.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/dbstatcomparison.jpg\" width=\"60%\" height=\"60%\"><\/p>\n<\/div>\n<div id=\"b32\">\n<div class=\"narr\">The dev team wanted some &#8220;snap&#8221; to their charts, so I added some effects and tried to retain the clarity and clean up the grid and axes.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/SPChartCompare.jpg\" width=\"60%\" height=\"60%\"><\/p>\n<\/div>\n<div id=\"b33\">\n<div class=\"narr\">In addition to changing colors, I also scaled the bottom axis and cleaned up the bottom list of options.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/sqlactivitycomparison.jpg\" width=\"60%\" height=\"60%\"><\/p>\n<\/div>\n<div id=\"b34\">\n<div class=\"narr\">Again, removing 3-d, lightening up the colors, moving the legend and compressing the vertical space makes this chart much more descriptive.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/TSFreespacecomparison.jpg\" width=\"60%\" height=\"60%\"><\/p>\n<\/div>\n<div id=\"b35\">\n<div class=\"narr\">I lightened the colors and made the bottom axis logarithmic. This chart was very hard to extract the relevant information before the revisions. Small changes like removing contractions also help with readability.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/cutoffcomparison.jpg\" width=\"60%\" height=\"60%\"><\/p>\n<\/div>\n<div id=\"b36\">\n<div class=\"narr\">Many of the same changes are made to this chart. This one includes slice labels, but clarifies them.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/tsfailalloccomparison.jpg\" width=\"60%\" height=\"60%\"><\/p>\n<\/div>\n<div id=\"b37\">\n<div class=\"narr\">This is an early example of a chart revision. I used many of the same techniques here.<\/div>\n<p class=\"narr\" style=\"text-align: center;\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2016\/07\/comparisongraph.jpg\" width=\"60%\" height=\"60%\"><\/p>\n<\/div>\n<\/div>\n<p><a href=\"\/?page_id=110\">Return to resume<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Samples of Web, Graphic and User Interface Designs &nbsp;As a developer and user interface designer, I wear a lot of hats. The following categories highlight my skills in several areas. &nbsp; Page design&#8211;web page design Graphic design&#8211;iconography, artwork, etc. UI design&#8211;reworking of interfaces and design of new interfaces Graph and chart design&#8211;revisions and new &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/ericallen.x10host.com\/?page_id=393\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Portfolio&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-393","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ericallen.x10host.com\/index.php?rest_route=\/wp\/v2\/pages\/393","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ericallen.x10host.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ericallen.x10host.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ericallen.x10host.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ericallen.x10host.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=393"}],"version-history":[{"count":11,"href":"https:\/\/ericallen.x10host.com\/index.php?rest_route=\/wp\/v2\/pages\/393\/revisions"}],"predecessor-version":[{"id":10762,"href":"https:\/\/ericallen.x10host.com\/index.php?rest_route=\/wp\/v2\/pages\/393\/revisions\/10762"}],"wp:attachment":[{"href":"https:\/\/ericallen.x10host.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}