CSS Media Queries Min vs Max

Max-Width: If device width is less than or equal to 800px, then do {…}
** Use sparingly **

Min-Width : If device width is greater than or equal to 800px, then do {…}
 ** Use as much as possible as Max will load more styles **



<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width:960px){
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width:1440px){
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width:2000px){
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width:480px){
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width:768px){
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

Credit :

  • http://kevinwtharp.com/lessons/Dynamic_Web_Technologies/Implementing_a_Responsive_Design_using_CSS_Media_Queries.html
  • https://stackoverflow.com/questions/13550541/media-min-width-max-width

One Typeface – How to use fonts effectively

How many fonts should I use on my website?

Well, it depends. 
As a general rule, you should probably stick with 2 or 3 fonts for your website.

Design

Generally speaking, using 2 or 3 fonts will ensure that your site has a consistent look and feel. Establishing a visual hierarchy for your users will be easier with less fonts. 

Load Time

Like everything on your website, fonts must be loaded in order for a user to see them. Using too many fonts can actually slow down your website significantly. 

Is 2 or 3 fonts enough?

We happen to think so. In fact, we believe that most of the time you can design a website using just one font.

The trick is to use variations of font weight, spacing, and line height to establish a clear visual hierarchy. The best part? Since its technically all the same font, your site is almost guaranteed to have a consistent look and feel. This consistency is great for brand recondition. We suggest that you actually use this rule across platforms and mediums to further establish your brand.

Where can I find fonts?

We suggest checking out Google Fonts .

They have a large variety of  web fonts that load quickly and look great. You can also download the fonts you choose and use them for other mediums, such as print and presentations.

Oh, and did I mention that it’s free?

The One Font Challenge

Using Google Fonts, we have created a few examples of using one font. By using different font sizes, weights, spacing and line height, we think we were able to establish a solid look for each of the three examples. We used some free images from Unsplash to help establish the tone for each example. Remember, all of these fonts can be downloaded for free using Google Fonts.


Example : Merriweather


Example : Montserrat


Example : Open Sans

Think Lightweight – Logo and branding

THINK LIGHTWEIGHT

think_lightweight_final_logo

 

Think Lightweight is a company that focuses on applying lightweight engineering principals to traditional solid wood applications. As the company continues to grow, we worked with them to update both their website and branding.

You can visit the official Think Lightweight website here.


The Logo

think_lightweight_final_logo

 

When creating the Think Lightweight logo, we wanted to emphasize both the lightweight and structure elements that represent the company. Think Lightweight’s previous branding contained a feather, which we felt represented the idea sufficiently. With the feather as the focus, we chose a light blue color that continued to represent lightweight. Finally, we paired this with both a hexagon and the Gotham font. These are both bold visuals that we feel represent the strong structures Think Lightweight creates.


 The Logo Use Guide

In addition to creating the logo, we provided Think Lightweight with a Logo Use Guide. This document helps Think Lightweight maintain a cohesive style in all future branding. You can view the guide by clicking the image below.

 

capture


The Brochure

Because Think Lightweight offers many different products and specifications, we worked with them to create a product brochure. For both the product brochure and the website, we created individual product logos. The major challenge in creating the brochure was maintaining all of the technical information in a more simplified way. We accomplished this using a few design elements through out the website and the brochure. This includes hexagons, icons, colors and typography. You can view the entire brochure by clicking the image below.

 

brochure-page

 

Dhali Icons

DHALI WEB DESIGN ICONS

Creating a more cohesive look for Dhali’s Website.


Home Page Icons

At Dhali Web Design, our core business involves making the web an accessible and enjoyable environment for our clients. We do this by building a majority of websites on WordPress, which allows them access to their own content and media. We also involve them in our designing process, making sure everything meets expectations. In order to represent this environment, I wanted to create friendly icons that get at the core of our services.

You can view the full sized icon set on our Home Page, or check out some smaller version below.

 

website-maintenance e-commerce web-design website-hosting wordpress-dev wordpress-managment

 


WordPress Services Icons

In order to maintain a cohesive look and feel across our site, we’ve created icons similar to the homepage for all of our services.

Below are a few of the icons we created for the WordPress Services page. For a full list of our services, Click Here.

 

wordpress-training wordpress-backups website-updates staging-server  plugin-updates email-hosting

 

White Glove Data

This week most of my attention was directed to a new client of ours, White Glove Data. After the initial meeting I began work on the logo that will be used on the site and branding. When this process was completed and approved, I began work on the website layout.

A larger version of the comp can be seen here.

whiteglovedata-comp

 


Below are some shots of my initial brainstorming process, and original Photoshop wire frame. The purpose of these is always to place elements and content in a effective way before I begin to plan any design elements. Typically, wireframes help me lay out the structure of the site without having to worry about colors, typography, icons or images.

 

IMG_4384wireframe

 

 

The Dhali Team illustration

This week I was able to work on a few fun projects regarding our team here at Dhali. Part of this was creating avatar images for us in the office. I wanted to create an accurate representation of everyone in the most minimalistic style possible. When I finished I threw them all together.

This evolved into a “team portrait”.

team

 

 


 

My process for these is to take a photo of the team member and throw it into illustrator. Then I select the layer and set it to template mode, which makes it easier for me to distingish the layers. From here, I try and trace out all of the major features using the pen tool. liia-rough

From here, I get rid of the back ground image and make a few decisions on style and color.

liia-two-02

The last thing I do is tighten up the design and add a background. The final avatar can be seen below.

liia

Case Jacket – Website Redesign

Case Jacket is a fast and straightforward case management system that is used by over 3000 people. Currently, the software is being redesigned to a more modern look and feel, so I decided that creating a landing page that reflects the new look.


 

I started my design with a few very rough whiteboard outlines, refining and editing until I land on something that will work. This stage of the process is focused on functionality over design.

 

IMG_0106


 

Once I lay out the major elements of the site on a whiteboard, I move to a notebook to further refine the idea. Again, this stage of the design is less about look and feel, and focuses instead on functionality.

IMG_0105


 

The next step is bringing my ideas into Photoshop. This is where most of the design elements like color, logo and typography are added.

casejacket-mockup

Design Matters – Redesign Concept

While i’m at the office I often have a design podcast running in the background. One of the podcast sites I visit most is Design Matters with Debbie Millman, so I decided to make a redesign concept in my spare time.


 

design-matters-mac


 

The current website has some awesome elements that I felt can be emphasized with more white space, and a side bar for navigating the different episodes. I also decided to make a large banner as a “featured podcast” section, highlighting the most recent guest. Instead of going to a different page, the podcast would play on the landing page, allowing you to scroll around while you listen. I also changed the font, weight and color scheme to highlight important areas.

You can see a before and after screen shot below. You can listen to the Design Matters podcast here.

 


Design-matters


 

Design-matters-redesign

Raetz Law – Logo Design

We are currently working on a website redesign for RaetzLaw.com. As a part of this project, I am creating a logo to compliment the new site and colors. After some initial research and sketching, I created a few renditions using Illustrator. The early renditions can be seen below.

raetzlaw

From this point, I decided to focus on the logo designs I felt were the strongest. After adding some taglines and tightening things up a bit, this version was sent to the client for review.

Raetz Law Branding

Since then I have received feedback from the client. They have suggested getting rid of the scales in favor of the attorneys initials. The revisions can be seen below.

Raetz Law Branding (revised)

Dashboard Concept

This week I focused on creating a simple and clean dashboard that can be applied to school or office setting. The goal of the dashboard is making the navigation feel new without taking away from the usability, and keeping the notifications in focus. To accomplish this, I created a navigation that rest on the left with a notification alert under the users photo.

You can see an example of the welcome page and a sub page below.

-Rick

comp-one comp-two

User flow – Mock up

After a meeting with a potential client, I began building a low fidelity user flow for our proposal. Creating a rough user flow allows us and the client to see the amount of work a site will take to build out, which gives us an approximate timeline and price point.

I usually start with a whiteboard and notes from the client meeting about the needs for the site. In this case, the client needs a single sign in page that will lead to three different dashboards. Each dashboard will have its own functionality. With this in mind, I begin to create a rough outline.

user-flow-whiteboard

During this process I will check my notes and goals to make sure that the site is as streamlined as possible. The goal is to make sure the site is completely functional without any more or less than necessary. From here, I go to Photoshop and clean the user flow up for the client proposal.

mock-up-02mock-up-04mock-up-05mock-up-06