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.
It’s a common dilemma you want to build a fantastic new web presence, but you have many voices in the office competing to be heard and postulating about what will make for the most effective next iteration of your website. A lot of questions get thrown around in brainstorming sessions, but what you might need is a very simple roadmap to make use of all of the opinions and allow key players to weigh in and be heard. Matt won’t brag about it, but he has written some fantastically helpful articles that will aid your team in mining your internal data about what you already know about the web in such a way as to put your thoughts and insights into some groupings that any design or marketing team can use.
And you can also read THIS ONE that Matt outlined and wrote for the author.
If you want to follow up with us to launch or lead your next big project, you can share your team’s findings HERE.
Every team that is deeply involved in the success of your organization possesses valuable knowledge, insights and understandings of your core audience. Don’t leave that data un-mined; put it to work for you and take ownership in communicating about who you are and what you do in a powerful, creative and beautiful way.
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.
We’ve talked before about info graphics.
It is an extremely powerful tool when you can take your data and simplify it into a easy to understand graphic that your target audience can read, see, experience and most of all, understand. Visual information moves people to act.
And now it seems that Pinterest is info graphics on steroids which translates into sales and also donations. Have you ever questioned the need to invest a little more in your marketing or in your digital design budget? When this article by Fast Company publishes I think it will be well worth our time to study and then translate into our businesses and nonprofits.
Consumers are shopping and they make decisions based on what they can see and understand.
Bigger impact for you.
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!
Man… it has been a super busy and fun summer. We are stoked about some of our latest projects so be sure to check them out.
Stop Traffick Fashion
The leaders at Stop Traffick Fashion have an incredible mission and now they have a more robust online presence & very user friendly online store to aid them. We were excited to take on the challenge of making a client friendly, easy to use online store for their website that is easy to expand and enjoyable to use.
Hollingsworth Home Finders
If Ron & Renee Hollingsworth sell homes with as much personal interaction and eye for excellence as they with crafting their business website, then we are sure you will be pleased with their services. This site came together with great interactivity between them and our creative team and that certainly enhanced the visual appeal.
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.
When you think of websites with white backgrounds you probably think of search engines, news sites, and plain designs with lots of crammed in content. Many people want color, texture, and bright vivid designs. White is often overlooked, but many things can be done with just a white background. White offers the ability to add lots of contrast, allows your images to pop and there are many possibilities that you might not have considered before.
Here are some great sites that use lots of white to achieve a great look.
Typography is one of the most standout parts of a website, affecting the overall look and feel. It’s something we certainly take into consideration when designing a site. Which fonts work best with the style and feel of the site, does the information flow easily, is everything legible and easy to navigate through? Typography is a design aspect in itself and needs careful consideration in order to make a site top-notch.
Here are a few great sites that use great typography, making their content stand out and their design shine.
Web design is not all technical. We work hard to make the html and css stuff work on our end and then hand it over to our clients to make the content work on their end. Many mistakes are made on the web, by forgetting simple art theory and how it plays a big role in how web sites look. People also forget about how other people will view their page, how they will navigate through and find the information they need. (more…)
Some people say there isn’t anything new to design anymore, we are all just rearranging things that have already been created, slapping on a new label, and calling it our own. That may be true, however I do believe we can certainly push the envelope, change what’s already out there and make a beautiful creation that has never been seen before. Just like each website we create is brand-spanking new, an opportunity to wow a new audience with every new company/church/business. I came across these vodka bottles on The Dieline and I am wowed and impressed.
Someone decided at some point that vodka bottles are supposed to be made of clear glass, and be tall and cylindrical. Everyone that made a vodka bottle after that point, followed suit. Until 1000 Acres came up with a new idea, something unique and different. You can do what you’ve always done and seen before, but shouldn’t you expect the same results? Break out, do something different, push the envelope and you might be surprised with how well it’s received.
You would think an article like this from Seth Godin would make design firms shiver in fear that clients would walk away, and do design themselves. In case you don’t follow that link, Seth Godin talks about how you can become a better designer with a few hours a month of reading from his book list.
In fact, it makes me happy. I fully agree with him, and I think you SHOULD be a better designer. Why you ask, would a creative firm like factor 1, want clients designing things themselves?
1. You can’t rely on design firms to make the small things. Sure we can build an awesome website for you. But when you need a single powerpoint slide, for tomorrows presentation, thats harder to get a firm to want to do.
2. Almost every one of our websites is a CMS (content management system) driven site. Meaning our end client can log in, and add content. I would love it every one of our site administrators could insert top notch graphics.
3. If our clients know a bit more about design, and can speak the lingo, it makes communication and brain storming even better.
4. At the end of the day, I know the years of experience, talent, and overall approach our team brings to the table is not going to be beat by a book.
So I am sure some creative companies cringe at Seth’s post. I for one, embrace, encourage, and fully support it.
I know I have rambled on about Internet Explorer 6 still being used by some 20% of the population, even though it was replaced 2 years ago by IE 7. So I wont spiral into that post again.
I do have to share this. In a post by CSS tinderbox. Raymond shares his analogy for IE 6.
Warning: This is a technical, website coding post. Not really marketing related.
So I was coding a site today while waiting at the dentist office (I am a geek I know). And I decided I would name one of my Div IDs “960wrapper”, to indicate that this div was 960px wide. Makes sense right? After doing this, and some other code the issue arises. My html is not seeing this div. at all.
I added a border stroke to outline it
I added a background color, and a min-height.
Keep in mind I have no internet, since I’m in a waiting room. So no google searches, no CSS xray tool.
I am about to pull my short hair out.
In some playing, tweaking, and overall trying to do anything to make this simple div wrapper to work, I re-title it to just “wrapper”
And BAM it works. I think I let out a little victorious battle cry in midst of the dentist office.
So what I figured out:
Div ID’s seem to not like names starting with numbers.
I did a few google searches back at the office. Nothing. I cant find anything related to this issue. Can any web CSS geeks point me to where I can learn why this method wont work?