Left Aligned Design for Web and UX

Design Tools

jQuery events

Adobe Photoshop

Photoshop plays an essential role in optimizing the images that show up on my sites. I use a number of functions available to edit, manipulate, design, and optimize images to be displayed online.

recaptcha

Adobe Illustrator

Illustrator is the basis for my website layouts. I use a 980px grid system that can be expanded or contracted for responsive displays from desktop to mobile devices. Illustrator acts as the blueprint for my work, and is a powerful tool to create wireframes and visual designs.

jQuery events

Google Fonts - SkyFonts

Google Fonts is a font library with many free options to choose. Fonts are cycled on a regular basis, so font options are always progressing.

SkyFonts is another font library that gives the ability to download desired fonts. It provides its own premium fonts, but will also link with Google Fonts in order to allow for downloads. As such, you will never need to worry about losing a font from a site, even if it gets cycled out of the Google Font collective.

recaptcha

HTML5 - CSS3

All of my sites are written with HTML5 and CSS3 as a standard. I have a particular interest in the structure defined by HTML5. With the introduction of ‘main’, ‘article’, ‘section’, and ‘aside’ tags, the outline of the site is far more visible to search engines. The outline of the site is a key factor for the rating at which search engines display results. Using these HTML5 tags along with a logical progression of heading tags will improve the site’s search engine optimization.

CSS3 has done a good job with creating many of the visual effects of a site that had previously required Javascript or jQuery to accomplish. Smooth transitions and transformations allow better visual cues for the user. I look forward to developing more CSS3 functions for future projects.

jQuery events

Animated Events

With the use of jQuery events and CSS3, animated transitions are easy to implement. Not to be overstated, I feel that animated events are meant to augment the user experience. Primary uses of animated events include smooth scrolling and highlighting links or calls to action. Static and stagnant websites have an unfriendly, ‘robotic’ feeling. My goal for designing these sites is to give the user an implicit understanding and response to navigating the site. Visual cues, like animated transitions, are a core addition to an embedded user experience.

recaptcha

Parallax

Parallax gives the website depth with a difference in foreground and background scrolling speeds. The difference in speed can help differentiate one section from another and can be a subtle cue for the user to compartmentalize different pieces of information. It also can be appreciated as a visually pleasing way to scroll through information.

My current jQuery plugin for this effect is Parallax.js. But I am searching for new parallax solutions as well. Parallax.js will not run on iPhone or Android phones. Instead, I replace the scrolling background image with an appropriate static image, with all other functions fully intact.

Popup Gallery

The popup gallery that I use is a plug-in provided by Magnific-Popup. It is a Javascript based function that allows a neat display of images as an overlay in the foreground of the website. While my portfolio projects have a popup display to fit the user’s screen width, there are options to toggle the view to fit horizontally, vertically, or to the actual pixel size. Whether for single images, or multi-page displays, Magnific-Popup provides friendly solution to viewing full size images on a website.

  • spotlight 1
  • spotlight 2
  • spotlight 3
  • spotlight 1
  • spotlight 2
  • spotlight 3

Flexslider

The Flexslider feature allows a carousel image display that can be browsed by the user. I use a jQuery plugin produced by Woo-Themes. On a desktop or laptop, controls appear as the cursor hovers over the images. If you are using a touch-screen device, feel free to swipe the image above.

My projects omit the controls in order to create a continuously rotating banner, but the Flexslider controls are always available on request.

jQuery events

Google Analytics

Google Analytics allows me to monitor my website traffic. It can be customized to report specific events, show trends, and locate where users are viewing the site.

recaptcha

Recaptcha

ReCaptcha is a function that requires validation from the user in order to process a request. In this case, I use it to validate the email function. ReCaptcha is important because it filters out any web robots from sending me spam emails. It asks the user to identify images that only a human should be able to recognize in order to send me email. This is an added layer of security for the site.

User Research

Understanding your audience has gained a new definition with a new wave of digital media. The way we get information has been compacted in to the icons on the screens of our phones. We expect the user to understand the graphics and symbology without an instruction manual. How do we empower the user to read webpages with confidence and a sense of ease?

We have to understand that user’s step-by-step path with interacting with the site. A powerful tool in re-designing a website, User Research gives us the perspective of what aspects are good and what aspects need to be changed. Have a look at a user research project a group of us conducted for the PCC Natural Markets Website.

Please note that since the research project was performed, PCC has re-designed their website. It looks really nice.

Site Security

I have collected various measures to improve the site security of this site. I use Dreamhost to serve my pages, and can add varying levels of SSL encryption to provide secure, certified connections. Other server-side protections can be found by validating PHP forms in conjunction with third-party software such as reCaptcha.

About Me

Who am I...?

Myself, I’m a native north-westerner who has made Seattle my home for the past ten years. If I’m not building websites, you can find me somewhere outside or perhaps wedding planning as of late.

I’ve received a broad foundation for web design at Seattle Central College. My current ambition is to build solid, efficient coding practices. Further, there is an increasingly important focus on user research including sound logic of information architecture and interaction design.

But enough about me, how can I help you?

marco@left-aligned.com

425.830.8119

Contact Me