Archive for the ‘design’ Category
So there is a large focus on sites being fast. Google rewards sites that load quickly and meet their speed criteria. Go ahead, run your site through googles page insight tool.
What grade did you get? Was it under 50/100 on desktop? You won’t be alone. That’s actually pretty normal.
We have had this issue pop up many times in the last few months. So we spend a few hours tweaking the site. We minify it(compressed HTML, CSS & JS), cache it, and gzip it for the browser. This will usually bring up the speeds and scoring a bit. So thats the good news here.
This leaves us with images. We are almost always getting terrible scores because we are serving users retina images. This means the pixel density is tight, resulting in crisp, sharp images on all devices, and especially on retina screens. Unfortunately the fix for this is to basically stop serving retina images. These scoring tools are usually based on old tech. The ONLY way to serve the high res image is to compress it to the containing box. So a 400 x 400 image inside a 200 x 200 box = 2x the pixel density. But this method is a giant red F on site scoring tools because in the olden days, this was considered “wrong”.
In comparison we ran big sites like CNN, CharityWater, Vox.com, IGN.com, Mic.com, etc. And in our quick research, any nice, modern, retina ready site got about the same score as us. We used a few tools to check it. Want to know one site that ranked well? Google, yes google ranked great. See by offering few to no images, text only, and very little style, you should achieve an A rating.
So this brings me to our goals with any site. We want to serve your visitors a robust site that highlights great information, infographics and photographs that tell a story. Can we do that with low res images, sure, but thats not the direction of technology. All iPads, iPhones, most laptops over $1000 and many android phones and tablets are retina / HD displays. This means that a low res image would look worse than normal. they tend to look blurry or fuzzy.
So my two cents: We take our D+ speed rating and know that we have razor sharp images, graphics and are meeting current technology trends with ease.
We spend a lot of time working on the right font pairings in our projects. We try not to get super geeky on you, but sometimes we do want to share the process, get your feedback, or just communicate why we did something.
This is a great short animation on the history of type, showing great key points for anyone.
I love reading about designers and what their personal mantras are. Dieter Rams is one of the most influential industrial / product designers in our time. He made Braun a household name in the 50s and 60s by creating simple products that worked well. Design trends that are still being followed and copied today.
When asked if he thinks his work was good, he responded with the statements he designs by
- Good design is innovative.
- Good design makes a product useful.
- Good design is aesthetic.
- Good design makes a product understandable.
- Good design is unobtrusive.
- Good design is honest.
- Good design is long-lasting.
- Good design is thorough down to the last detail.
- Good design is environmentally friendly.
- Good design is as little design as possible.
I look at these 10 guidelines, and I think they apply to every facet of design. Web, print, branding, but further, and into architecture interior design, landscape design, fashion, etc. Im pretty sure Ikea, Apple and Audi follow these rules as much as they can, and I think it shows.
Just a quick preview of a new brand we recently developed for Crate Coffee. Featuring locally roasted beans with unique blends specific to their markets. We designed the logo to have a rough, painted look, so to finish the brand implementation we used a rubber stamp on the business cards and coffee bags. It is a very manual process, but the look is spot on.
Full details coming soon in the portfolio.
As designers, we like to say inspiration can come from anything. The following video showcases just this. Mine Kafon is a project from Massoud Hassani, a designer who grew up in Kabul. Using childhood toys, he modeled a land mine detonation device. It’s fascinating to see how much like his toy the final result is.
Just a great example of a big, giant, corporate site, having some fun.
Lowes.com has a promotional banner highlighting their new paint calculator. The focus is partially on wasting less. So what better way to highlight that message than show some wasted paint. Dripping down the entire home page.
I applaud their creativity and ingenuity in pulling this off in such a classy way. Well executed!
This was a really exciting project to work on here at factor1. Ace Hardware Phoenix is a regional site to represent the collective marketing efforts of all Phoenix metro valley stores. A total of just over 50 stores.
The new website features a Do-it-yourself video archive, news, sales & promotions, seasonal tips, and a Google Map™ store locations page. The new site is built on the cutting edge software Expression Engine—which also powers many large government and retail sites around the world. Factor 1 Studios worked with local Ace Hardware Phoenix staff to develop this beautiful, easy to navigate website. Visit the new Ace Hardware Phoenix website at http://www.acehardwarephoenix.com and see more work from Factor 1 Studios at http://www.factor1studios.com.
The Core design was planned around the focus of our unique location. Phoenix Ace Hardware stores have a different season of marketing than other states. They sell grass seed while other stores in the US sell snow salt. We had to make sure that the visitor knew they were local to Arizona. So We have a cycle of quarterly images to rotate into the background of the site, all with very clear Arizona landscapes.
The home is very short and to the point. We know the audience is not here to shop online, but to find a store, or watch video DIY tips and messages.
The locations page was built using Google Maps API for a dynamic store browsing experience. A user can pan and zoom to a location near them, or select a store from the list to see it pinpointed on the map.
Videos were a must. Ace Hardware Phoenix has several media relationships that keep the content rolling in on a routine basis. We built a system where Ace can simple add a new video, add the YouTube code, notes and any associated files, and our tools would sort them, newest up top, and rolling archives below. This makes management of the videos a breeze.
News operates similar to the videos page. Simply add a new news article title, description and content.
I love how a good clean site can be so simplistic and yet so aesthetically pleasing. Minimalism is hard to accomplish without seeming boring, but when done properly, the outcome is amazing. Check out these great sites that have nice color and typography choices, and a stunning minimalist layout.
Often we are contacted by potential clients that have little to no money. Just yesterday we had an up and coming actress inquire about a site, and only had $300 to spend.
This is hard on me. I love to help people, and I really love the web and marketing. In fact its why I love my job. I really wish I didn’t have bills, I would probably sit around, and help people for free or cheap all day long, and still love my job.
So back to my story. I thought to myself, I wish I could help this actress out, but for $300, there was little we could do. So I had an idea that would get her started on a site, help her out, and not use her entire budget.
WordPress is a blog. but it has pages. and you can flip wordpress around to be pages first, blog secondary. Thus turning it into a sweet little CMS anyone can use. Here are the steps.
1. get hosting set up that doesnt have any advertising headers.
Personally I love Liquid web, and we use LW for our dedicated servers.
or wordpress.com works. If you go this route, skip step 2.
2. Install wordpress.
Most big hosts can do this for you, or give you a simple install button in their control panel.
3. Pick a classy theme
there are great free themes and paid for themes.
Or there are paid themes: woothemes.com
4. Add in your pages as needed.
wordpress is traditionally a blog, but with a few tweeks, it can look more like a website, with a news page, than a blog.
Learn more about using wordpress here
Now while this is a good cheap and dirty set up, its no substitution to a great designer building something custom.
Dont forget – your organization, product and services are unique, and so are your customers, so you still need to custom tailor the site experience to fit those factors. This is merely a quick patch for a no money situation. A real website will do 10x for you that a free template can.
We are all about learning new things here at Factor 1. We try to stay on top new design and coding trends, and we love finding new techniques to test and play with. I know we have quite the mix of regular readers here: fellow designers, other coders, and some clients that have no design or coding knowledge. I’d love to share some of our favorite learning resources here at Factor 1, some for beginners to learn more about what we do and some for the more advanced people here.