20 Best New Portfolios, January 2019

Welcome back, WDD Readers. It’s January 2019, and we’re all coming back to work bleary-eyed and bushy-tailed. Why don’t you take a moment to put off wor… I mean get inspired by these new portfolios? We’ve got a fair bit of variety in aesthetics and strategies this month. Enjoy.

Note: I’m judging these sites by how good they look to me. If they’re creative and original, or classic but really well-done, it’s all good to me. Sometimes, UX and accessibility suffer. For example, many of these sites depend on JavaScript to display their content at all; this is a Bad Idea, kids. If you find an idea you like and want to adapt to your own site, remember to implement it responsibly.

Robbygraphics

Robbygraphics starts us off with some modernist minimalism and a touch of illustration. It’s a part of that business-friendly wave of design that I mentioned recently, and it’s a fine example of the trend.

My only critique is that the hero image on the home page could really be SVG. PNG is great and all, but large vector illustrations are better served in a vector format, these days.

Platform: WordPress

O

Yup, this designer is named “O”. The one-page portfolio is a bare-bones as the name, with simple typography, screenshots, and red blobs that change shape as you scroll.

I’m not a huge fan of animations that absolutely depend on having smooth scrolling turned on (I keep it turned off), but overall, it’s a good-looking site.

Platform: Custom CMS built on Ruby (I think)

Florent Biffi

Florent Biffi stands out in the crowd with bold text on a sort of… wrinkled cloth texture? Look, the effect, while simple, is fairly striking. I haven’t seen it a lot. The rest of the site is fairly standard sans-serif fare with thick headings and occasionally-overlapping elements. That first striking visual is enough to keep a user scrolling all on its own, and that’s the point, isn’t it?

Platform: Static Site

Timo Kuilder

Timo Kuilder makes new-age-ish cip-art-ish illustrations that look… way better than that sounds. So of course the whole site leans into the aesthetic, using a light masonry collage of the work to sell their services.

Platform: Cargo Combined with Backdrop, apparently.

D7 Creative

D7 Creative takes an interesting and highly interactive approach by making every section of their one-pager look almost completely different. I mean, that’s one way to showcase your range, right? Plus, they have a fully functioning game of Snake that you can play.

It’s not the most visually consistent approach, but rules are made to be broken eventually.

Platform: WordPress

Playground

Playground is a fusion of the corporate-friendly aesthetic (including lots of solid blue and red) with the constantly-overlapping elements of more post-modernist web design. There’s also plenty of animation, but it’s understated enough that it’s not too distracting. I like this style a lot, but don’t make me come up with a name for it, please.

Platform: Static Site

Camilo Alvarez

Camilo Alvarez hit me right in the nostalgia. I had a phase where I used a sort of “film grain” effect for almost everything. Well the film grain is back with an animated vengeance, overlaid on a sort of post-minimalist design. As with most of these sites, it’s a bit JS-heavy for me, but it’s pretty and it’s making me feel young again, so it’s here on the list.

Platform: WordPress

Fly Digital

Fly Digital is going very minimalist, and reminds me of the ’90s in a good way. I normally wouldn’t recommend a handwriting typeface for body text, but when there’s this little text, you can get away with it. Though the text could be bigger. And I wouldn’t blur out those client logos on the home page, even if you are going to unblur them on hover.

Otherwise, the site feels handmade and old-fashioned without feeling amateurish. It’s a fine line to walk, but they’re doing it.

Platform: WordPress

epo

Where other sites merely feel modern, epo feels super modern. It’s like flat design had a baby with a corporate color palette. It’s like easy listening music in web design form. None of that is criticism, mind you. If it gets them the clients they want, then it’s doing the job right.

Platform: WordPress

Breadhead

Breadhead brings us some of that classic elegant dark-layout minimalism that we don’t see nearly often enough these days. Thin type, illustrations, and an all around classy feel are what will make this design stick in your brain for a while.

Platform: Static Site

Marijn Bankers

Marijn Bankers’ portfolio reminds me, at first, of an animated spa brochure. You know, the whites and pastels, then thin type, the thinly-lined UI elements, everything. As you dive into the site, it feels more like an architecture firm.

And then it all makes sense when you look through the portfolio. His clients are exactly those who would appreciate the aesthetic. I keep highlighting websites with this approach for the simple reason that it works. Portfolios tailored to the clients just work.

Platform: Static Site

Anvar Shoe

Anvar Shoe’s portfolio eschews the aesthetic fusion we’ve been seeing lately for a site that looks positively post-minimalist. It’s artsy all the way with a mostly-one-column layout and effects that, once again, kind of depend on smooth scrolling to look good.

Platform: Static Site

YRS Truly

YRS Truly is an interesting case. I’ve previously featured portfolio sites that mimic an operating system, but this one fuses the “windows” gimmick with the general structure and layout of a normal two-column website. It’s odd, but it works, and it uses UI conventions that most of us are used to.

Platform: WordPress

Cleverbirds

Cleverbirds’ art portfolio is highly presentational and animated. No points for accessibility here, but if you want some creative and pretty ideas for monochromatic web graphics, look no further. It’s on the list because it’s pretty, and that’s that.

Platform: Static Site

João Pereira

João Pereira’s portfolio is just plain pretty; I love the use of color. While the text could use a little more contrast in places, it’s just generally gorgeous. Plus you can click the triangles in the background to see a list of his skills.

Sure, that’s not intuitive, but it’s better than any “skill progress bars” I’ve ever seen.

Platform: Static Site

Kristopher Bolleter

Kristopher Bolleter’s portfolio leads with text that says, “No cliché slogans, just work that speaks for itself.” Well, he might not know how often I use the phrase “speaks for itself”, right?

All kidding aside, he lives by that motto, presenting all his featured work on one page in old-fashioned iMac illustrations. Man it’s been a while since I’ve seen that instead of the mockup mobile devices. The whole thing isn’t very flashy, but it’s effective and serviceable.

Platform: Hugo

Adrien Laurent

Adrien Laurent brings us back to the flashy stuff with their portfolio. It’s post-modernist, presentational, pastel, and loaded with animation (I couldn’t think of an animation-related word that started with “p”).

Platform: Static Site

Translation

Translation takes a generally bold approach, starting with their overall aesthetic, and on to their assertion that “The world doesn’t need another ad agency.” With a monochromatic palette and really big headings, the whole idea seems to be to blast your brain and hope it sticks. Well it’s working for me.

Platform: Static Site

Anthony Florio

Anthony Florio’s portfolio is fairly standard modernist, with light artsy touches in the form of randomly placed illustration. And it wouldn’t be a photographer’s portfolio without some sort of collage.

Do you ever miss the classic grid full of thumbnails? Nah. Me neither.

Platform: Static Site

Corn Studio

No portfolio list of mine is truly complete without someone using yellow right. In this case, it’s the ever-so-appropriately named Corn Studio gracing us with the classic yellow and black, combined with some highly animated minimalism. It’s flat, it’s pretty, and it’s pretty good.

Platform: WordPress

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot http://bit.ly/2M8ixb4

from WordPress http://bit.ly/2srwN5D

Popular Design News of the Week: January 7, 2019 – January 13, 2019

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Design Accessible Maps

 

Why are all Apple Products Photographed at 9:41am?

 

For the Freelancers: Here are the Most Valuable Freelancing Resources

 

Designing for Less

 

Over Instagram

 

Dimensions.Guide

 

Designers are Too Busy to Design

 

How to Create a WordPress Site: The Ultimate Beginner’s Guide 2019

 

Why Medium is no Longer the Go-to Platform for Programming Blogs

 

The Best and Worst Identities of 2018, Part 7: The Click-bait-iest Linked

 

Misrepresenting the Truth to Make Traveling Easier

 

CleanMock – Stunning Design Mockups Right from your Browser

 

Design Audits – What are They and Why You Need One

 

Are Users Really Stupid?

 

Aesthetics Vs. Function

 

Design is not Saving the World

 

Css Broken Grid Generator

 

What I’ve Learned After a Year of Non-stop UI Grinding

 

Is your Design Portfolio Hurting You?

 

How to Use Interactive Elements in Email

 

70’s Graphic Design Inspiration

 

8️⃣ Little Tricks to Grow your Design Career

 

Exploring the Elegance of Line Typography in Web Design

 

Designing from Scratch: A Blank Canvas

 

In Praise of Doing Nothing: How to Turn Boredom into Brilliant Ideas

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot http://bit.ly/2Cl0tpT

from WordPress http://bit.ly/2slX4lW

GitHub Now Offering Unlimited Private Repos to Free Users

GitHub has made its first really big change since Microsoft acquired it a while back, and it’s a good one for small-to-medium sized design studios, freelancers, and anyone who writes front-end code for fun and profit: Free users now get unlimited private repositories. For free. No money.

GitHub has always offered free public repositories, but you had to pay for the private ones; a move which encouraged the flourishing of open source software. But I have personally avoided using it on more than one occasion for two reasons:

1. Who really wants people to see their code before it’s ready? That can be kind of embarrassing, especially if your the kind of person who works messy, and cleans everything up after.
2. Sometimes you’ll be working under an NDA, or even just a handshake agreement to keep things quiet until they’re ready. Public repos kind of defeat that purpose.

Now instead of heading on over to a competitor like BitBucket, GitHub is an option for people who don’t want everyone to see all those missing semicolons and incredibly vague code comments. Well, it’s an option so long as no more than three people will be working on it. So… freelancers and studios with small dev teams, basically.

If you’ve been avoiding GitHub for any of these reasons, now is the time to get some GitHub experience. It’s nearly essential to working on many teams these days, so it’s good to get in some practice. Besides, GitHub’s GUI for Windows is really good right now, so long as you understand the basic concepts behind Git and its version control.

So that’s what you get out of it. What does Microsoft get out of doing something so nice for all of us working on our personal projects? Well:

1. Microsoft gets good press. (You’re reading some of it right now.)
2. Microsoft encourages more people to work and play with GitHub, meaning people will be more inclined to adopt the platform when they’re starting their own enterprise-level projects, or when they’re part of a bigger team.

Really, they didn’t have much to lose. Enterprise clients typically need more than three developers to work on a project at a time, so it hasn’t cut into their business model. A few extra projects on their already massive servers are worth more potential customers in the long run.

When I first wrote about Microsoft’s acquisition of GitHub, I believed Microsoft would see the business opportunities in not completely destroying GitHub and its community. So far, so good. Their treatment of GitHub and Visual Studio Code give me hope. Now if only they’ll stop messing about with Skype and Windows 10 updates, they could really impress us.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot http://bit.ly/2CefObD

from WordPress http://bit.ly/2VKPZJd

Conversion Optimization: Eight considerations to take into account when A/B testing in mobile

I’m writing this article on a laptop computer at my desk. And in your marketing department or agency, you likely do most of your work on a computer as well.

This can cause a serious disconnect with your customers as you design A/B tests.

Because more than half (52.4% according to Statista) of global internet traffic comes from a mobile device.

So, I interviewed Rebecca Strally, Director of Optimization and Design, and Todd Barrow, Director of Application Development, for tips on what considerations you should make for mobile devices when you’re planning and rolling out your tests. Rebecca and Todd are my colleagues here at MECLABS Institute (parent research organization of MarketingExperiments).

Consideration #1: Amount of mobile traffic and conversions

Just because half of global traffic is from mobile devices doesn’t mean half of your site’s traffic is from mobile devices. It could be considerably less. Or more.

Not to mention, traffic is far from the only consideration. “You might get only 30% of traffic from mobile but 60% of conversions, for example. Don’t just look at traffic. Understand the true impact of mobile on your KPIs,” Rebecca said.

Consideration #2: Mobile first when designing responsive

Even if mobile is a minority of your traffic and/or conversions, Rebecca recommends you think mobile first. For two reasons.

First, many companies measure KPIs (key performance indicators) in the aggregate, so underperformance on mobile could torpedo your whole test if you’re not careful. Not because the hypothesis didn’t work, but because you didn’t translate it well for mobile.

Second, it’s easier to go from simpler to more complex with your treatments. And mobile’s smaller form factor necessitates simplicity.

“Desktop is wide and shallow. Mobile is tall and thin. For some treatments, that can really affect how value is communicated.”  — Rebecca Strally

“Desktop is wide and shallow. Mobile is tall and thin. For some treatments, that can really affect how value is communicated,” she said.

Rebecca gave an example of a test that was planned on desktop first for a travel website. There were three boxes with value claims, and a wizard below it. On desktop, visitors could quickly see and use the wizard. The boxes offered supporting value.

But on mobile, the responsive design stacked the boxes shifting the wizard far down the page. “We had to go back to the drawing board. We didn’t have to change the hypothesis, but we had to change how it was executed on mobile,” Rebecca said.

Consideration #3: Unique impacts of mobile on what you’re testing

A smartphone isn’t just a smaller computer. It’s an entirely different device that offers different functionality. So, it’s important to consider how that functionality might affect conversions and to keep mobile-specific functionality in mind when designing tests that will be experienced by customers on both platforms — desktop and mobile.

Some examples include:

• With the prevalence of digital wallets like Apple Pay and Google Pay, forms and credit card info is more likely to prefill. This could reduce friction in a mobile experience, and make the checkout process quicker. So while some experiences might require more value on desktop to help keep the customer’s momentum moving through the checkout process, including that value on mobile could actually slow down an otherwise friction-lite experience.
• To speed load time and save data, customers are more likely to use ad blockers that can block popups and hosted forms. If those popups and forms contain critical information, visitors may assume your site is having a problem and not realize they are blocking this information. This may require clearly providing text explaining about the form or providing an alternative way to get the information, a step that may not be necessary on desktop.
• Customers are touching and swiping, not typing and clicking. So information and navigation requests need to be kept simpler and lighter than on desktop.
• Visitors can click to call. You may want to test making a phone call a more prominent call to action in mobile, while on desktop that same CTA may induce too much friction and anxiety.
• Location services are more commonly used, providing the opportunity to better tap into customer motivation by customizing offers and information in real time and more prominently featuring brick-and-mortar related calls to action, as opposed to desktop, which is in a static location, and the user may be interested in obtaining more information before acting (which may require leaving their current location).
• Users are accustomed to app-based experiences, so the functionality of the landing page may be more important on mobile than it is on desktop.

Consideration #4: The device may not be the only thing that’s different

“Is mobile a segment or device?” Rebecca pondered in my office.

She expanded on that thought, “Do we treat mobile like it is the same audience with the same motivations, expected actions, etc., but just on a different physical device? Or should we be treating those on mobile like a completely different segment/audience of traffic because their motivations, expected actions, etc., are different?”

She gave an example of working with a company her team was performing research services for. On this company’s website, younger people were visiting on mobile while older people were visiting on desktop. “It’s wasn’t just about a phone, it was a different collection of human beings,” she said.

Consideration #5: QA to avoid validity threats

When you’re engaged in conversion optimization testing, don’t overlook the need for quality assurance (QA) testing. If a treatment doesn’t render correctly on a mobile device, it could be that the technical difficulty is causing the change in results, not the changes you made to the treatment. If you are unaware of this, it will mislead you about the effectiveness of your changes.

This is a validity threat known as instrumentation effect.

Here are some of the devices our developers use for QAing.

(side note: That isn’t a stock photo. It’s an actual picture by Senior Designer James White. When I said it looked too much like a stock image, Associate Director of Design Lauren Leonard suggested I let the readers know “we let the designers get involved, and they got super excited about it.”)

 

“If your audience are heavy users of Safari on iPhone, then check on the actual device. Don’t rely on an emulator.”   — Todd Barrow

“Know your audience. If your audience are heavy users of Safari on iPhone, then check on the actual device. Don’t rely on an emulator. It’s rare, but depending on what you’re doing, there are things that won’t show up as a problem in an emulator. Understand what your traffic uses and QA your mobile landing pages on the actual physical devices for the top 80%,” Todd advised.

Consideration #6: The customer’s mindset

Customers may go to the same exact landing page with a very different intent when they’re coming from mobile. For example, Rebecca recounted an experiment with an auto repair chain. For store location pages, desktop visitors tended to look for coupons or more info on services. But mobile visitors just wanted to make a quick call.

“Where is the customer in the thought sequence? Mobile can do better with instant gratification campaigns related to brick-and-mortar products and services,” she said.

Consideration #7: Screen sizes and devices are not the same things

Most analytics platforms give you an opportunity to monitor your metrics based on device types, like desktop, mobile and tablet. They likely also give you the opportunity to get metrics on screen resolutions (like 1366×768 or 1920×1080).

Just keep in mind, people aren’t always viewing your websites at the size of their screen. You only know the size of the monitor not the size of the browser.

“The user could be recorded as a full-size desktop resolution, but only be viewing in a shrunken window, which may be shrunk down enough to see the tablet experience or even phone experience,” Todd said. “Bottom line is you can’t assume the screen resolutions reported in the analytics platform is actually what they were viewing the page at.”

Consideration #8: Make sure your tracking is set up correctly

Mobile can present a few unique challenges for tracking your results through your analytics and testing platforms. So make sure your tracking is set up correctly before you launch the test.

For example, if you’re using a tag control manager and tagging things through it based on CSS properties, if the page shifts at different breakpoints that change the page structure, you could have an issue.

“If you’re tagging a button based on its page location at the bottom right, but then it gets relocated on mobile, make sure you’re accounting for that,” Todd advised.

Also, understand how the data is being communicated. “Because Google Tag Manager and Google Optimize are asynchronous, you can get mismatched data if you don’t follow the best practices,” Todd said.

“If you see in your data that the control has twice as many hits as the treatment, there is a high probability you’ve implemented something in a way that didn’t account for the way asynchronous tags work.”                  —Todd Barrow

Todd provided a hard-coded page view as an example. “Something to watch for when doing redirect testing … a tracking pixel could fire before the page loads and does the split. If you see in your data that the control has twice as many hits as the treatment, there is a high probability you’ve implemented something in a way that didn’t account for the way asynchronous tags work. This is really common,” Todd said.

“If you know that’s going to happen, you can segment the data to clean it,” he said.

Related Resources

Free Mobile Conversion Micro Class from MECLABS Institute

Mobile Marketing: What a 34% increase in conversion rate can teach you about optimizing for video

Mobile Marketing: Optimizing the evolving landscape of mobile email marketing

Mobile Conversion Optimization Research Services: Get better mobile results from deeper customer understanding

The post Conversion Optimization: Eight considerations to take into account when A/B testing in mobile appeared first on MarketingExperiments.

from MarketingExperiments http://bit.ly/2QDN29m

from WordPress http://bit.ly/2AFhNpA

The Secret Design: Designing Trash

Oftentimes, no matter how you handle a project, the client is an *** and you’ve no choice but to walk away. JW Waste Management [not its real name] is that kind of client.

If we’d paid attention to our collective gut, spotted the obvious warning signs, then we wouldn’t have been caught out. Hopefully some of the lessons we learned will help you avoid the same problems.

The Kickoff Meeting

JW Waste Management is a trash disposal business, they clean out derelict properties, remove trash from waste ground, collect and dispose of small-scale commercial waste. They had (and still have) a site that in our opinion left them worse off than no site at all.

We met with the partners, William and Jim [not their real names] on a muddy lot they sublease from Jim’s father. We arrived 5 minutes early, and spent two hours waiting for them to turn up.

…he doesn’t believe in websites…

When they finally pulled up in a shiny new garbage truck, William climbed out of the cab to greet us but Jim walked away without a second glance. “Don’t mind him,” said William, “he doesn’t believe in websites.”

That should have been our first warning.

William claimed that he and Jim were equal partners, which we later found to not be the case. Best friends in their mid-thirties, they’d met at the local boxing gym and agreed to go into business together. As we later discovered, Jim was already in the family business, William was joining him.

The Brief

The brief from William was simple: Fix the serious bugs in their current site as a short-term patch, and then build them a site that would attract new business.

The brief from Jim was a little blunter, half way through the kickoff meeting he reappeared. “Look bro,” he said, “I don’t give a **** what you do, you just better get me some good contracts or God help you.”

That should have been our second warning, but we laughed it off. Jim had invested in an $800k truck for hauling larger loads and he was obviously just scared he couldn’t pay for it.

The Research Phase

We spent the day doing the rounds with William, learning how their business operated. We rode round in the truck as William picked up trash from various construction projects.

…if we stuck to the letter of the law we wouldn’t make enough money…

Some bins were dropped off at a recycling center, others were dumped out on a concealed patch of scrubland next to their lot. My partner asked if it was legal. “No,” was the short reply, “we’re not zoned for it, but if we stuck to the letter of the law we wouldn’t make enough money.”

We should have walked away there and then. I don’t know why we didn’t. It should have been strike three.

Once we understood how their business operated, we looked into the competition, and this is where the trouble really began.

12 miles away was a rival business called Hudson’s [not its real name]. Hudson’s was an established business that controlled most of the waste disposal in the area. William and Jim modelled themselves on Hudson’s, and wanted to copy the business model. It later turned out they wanted to copy the website too.

Version 1.0

At first, it was a good project to work on. Having patched up their existing site, we began work on a fresh approach.

Waste disposal is not a particularly interesting topic, but we came up with a design that addressed not the waste removal, but the results—clean properties, clean land, buildings ready to be reoccupied. It was a good campaign.

We pitched the idea, then heard nothing back. For weeks. Follow up emails and calls were ignored. Finally Jim accidentally copied us into an email to William: “I’m not paying these *******, who told them they were hired anyway, this is ********, it’s not what I want, no way.”

We were stunned.

We phoned William, when he didn’t answer we rang again, and again. On the third time he picked up. William couldn’t have grovelled harder: Jim didn’t mean to speak that way, he’s not used to business people, they absolutely did want to work with us, they had both signed the contract, Jim was just letting off steam.

We would later realise that William was very afraid of Jim. Their relationship verged on abusive. But at the time, we allowed William to reassure us.

William did have one suggestion: When we’d talked through the brief, they had really liked Hudson’s’ website, could we make our design a little more like that. “Sure,” we said, “we’ll see what we can do.”

Version 2.0

We’re a young agency, and I figure when you’re starting out, you feel like it’s your responsibility to be professional and to make things work. That’s what we tried to do.

As we designed version 2.0 we kept in regular contact with William, a phone call every other day. On every call William told us how much he liked our original idea, but that Jim would never go for it. We tried to reassure him that everything was fine, we’d moved on, we just wanted to do a good job for them.

This time, instead of pitching a complete design, we pitched in stages, trying to get each element signed-off before moving on. Each time, the feedback was the same: “It’s awesome, but it’s missing something. How do Hudson’s do it?”

They’ll look completely different once you’ve applied your ‘design magic’.

As the design came closer to completion we insisted on a face to face to discuss the design. We presented the work alongside a screenshot of Hudson’s’ site; the two sites looked identical.

We tried to explain that it was unethical, and poor business practice to plagiarize another site. “No problem,” said William, “They’ll look completely different once you’ve applied your ‘design magic’.”

We left wondering what they thought our ‘design magic’ was.

The Final Straw

Plagiarized or not, we were well over schedule, and set to make a loss on the job, so sign-off secured we passed the mockups over to our developer.

As the job was coming to completion, we asked William for the text and images. Instead, we received a message from Jim. They had been discussing the design and had decided that the design should be altered to only use their brand blue, with no accent colors at all. After we complained that it simply wouldn’t work, Jim agreed to allow us to add some chrome. When we explained that chrome wouldn’t work on screen he hung up.

With a completed build, but no content, we asked William and Jim to supply the content we needed.

After several false starts, William asked if he could send us some images that we could fix up, and add their logo where necessary. We said we would try. An hour later a link to an image archive arrived.

…we couldn’t believe what we were seeing…

Uncompressing the folder we couldn’t believe what we were seeing. The images had all been stolen from Hudson’s’ site.

My partner was ready to walk, but I wanted to try and salvage something so I called William. “You can just change the color to our blue, and add our logo,” he said, “no one will know.” Despite my protests, he couldn’t see the problem.

That was where we drew the line. I said what we should have said months earlier: No.

The End

We believed that by being professional, polite, and working hard, we could turn the project around. But we should have listened to our guts. We thought we could drag them up, but they dragged us down. We crossed several lines we didn’t want to cross, in the name of being professional.

As soon as we realized that William and Jim wanted a carbon copy of their nearest rival’s site, we should have walked away.

The moral of the story is, don’t work for people who don’t respect you, and definitely don’t work for people who don’t respect themselves.

 

Featured image via Unsplash.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot http://bit.ly/2FmadnK

from WordPress http://bit.ly/2soPuak

The Right & Wrong Way to Use Templates

I’m a big fan of templates. They’re an essential part of any productive designer’s workflow and they can also be really helpful in boosting your brand’s identity through greater consistency and professionalism.

Project management templates are one such example of templates that definitely belong in the workflow of a web designer. They free you from having to handle tedious project and time management tasks and, consequently, enable you to focus more on your work.

I also really like design snippets, mockups, and themes (like the ones you might find in WDD’s Freebies). When you use the same kinds of design elements over and over, it makes sense to have a reliable base of templates to pull from.

What I’m not particularly fond of—and you shouldn’t be either—are design templates that remove all creativity and strategy from your process.

The reason I bring this up is because I believe there is a right way to use templates in web design, and a wrong way.

The Wrong Way to Use Templates in Web Design

I recently attended a WordCamp event to learn more about what’s happening in WordPress and, specifically, what sort of trends I should be on the lookout for in web design.

There was one session I attended called, “Fast Track Your Design Process”. I was excited for it as I’m all about productivity hacks that help you work less while accomplishing more.

However, I walked away from the session incredibly disappointed by what I heard; the speaker told the room of about 50 designers that they should be building client websites using templates. That suggestion I had no issue with. I believe that WordPress themes are a great time-saver for many web designers—especially if they’re looking to start with a strong, responsive base that they can customize.

The problem, however, was in the rest of the advice given. It basically went like this:

1. Find a theme that fits your target niche nicely

For instance, if you design websites for real estate companies, purchase a license for a real estate theme.

Make sure you’re very familiar with the theme you choose.

2. Identify the key pages that your typical client needs on their website

Home, About, and Contact pages are a given.

Similar to how a theme developer might provide a few page layouts or design options to choose from, you would do the same. You could use the templates from your theme or design your own. Then, create no more than two or three template options for each page.

3. Save all your templates for future use

These are for no one to see but you.

4. Sign a new client to your web design services

Explain to the client that you are going to build the perfect website for their business. Have them sign the contract and provide you with any branding information or images you need to use.

Then, use this limited set of templates to build every website you’re hired to create. You still have to choose which of the page template options make sense for each client and add personalized content to the pages. But that’s about it.

The goal here is to make as much money as possible from each job.

5. Don’t engage with the client about the web design

Someone asked the speaker how he explained to clients that he was using templates to build their websites. (Which is a valid concern.)

To this, he told them that the client didn’t need to be involved in the process. Web designers are the experts and they know best, so clients shouldn’t have any say in what goes into the website and don’t need to see it until the work is complete.

My Two Cents on the Matter

At that point in the lecture, I raised my hand and presented a number of objections:

• It’s a terrible practice to not involve the client in their website project. It can lead to costly rework and also has the potential to hurt your business through negative reviews; people love to talk about bad experiences.
• When you limit web design to a few templated options, you run the risk of creating lookalike websites—especially if you take a niche approach to your business. This could hurt your business if clients start to notice that you’re not putting any time or effort into the work. Also, how can you expect to build an impressive portfolio if every website looks the same?
• This could also hurt your clients’ businesses if their visitors realize there’s nothing unique to the site since it’s just a copycat of another.

My input was not well-received, but I’m hoping you can appreciate the logic here.

The Right Way to Use Templates in Web Design

I’m not opposed to using templates in web design. Heck, I think that if you don’t use templates in your business, you’re making a huge mistake.

I understand the desire to want to cut corners so you can make a higher markup on your website projects. We all want to make more money. But I don’t believe that removing all strategy and creativity, and providing clients with a canned website is the solution. There are other ways to make use of templates and boost profits in the process.

Themes

Themes that skin your entire website are a great option. You still have to customize them and work on crafting search-optimized content (written and visual) for the website. But they’ll save you a lot of time.

Sectionals

Sectional templates are a good way to quickly replicate the same design elements across a website.

Another way to use them to your advantage is by turning them into wireframes. Use the bare bones of a sectional template to quickly bootstrap the structure of a page on another website.

WordPress Template

There is a multi-site management tool called ManageWP that comes with a WordPress Template Builder.

If you build websites with WordPress, you can use this to save time with new installations. Simply create your template WordPress install and add the plugins (and themes) you use often on your client websites.

Project Management Checklists and Templates

Perhaps the best way to save yourself time is to simplify as much of your project management work as possible. (That’s the part of running a freelance design business that you dislike the most anyway, right?)

Create checklists for all of your web design and business processes. Develop templates for communications you send to clients, contracts for new projects, and instructions you provide to freelancers or other team members. Even templatize your invoicing.

Summary

There is a difference between adopting templates for the purposes of optimizing your design workflow and adopting them so you can avoid doing any real work. I think this is what leads to the delivery of poor websites and gives clients a way to talk designers down in price.

You are a web designer and you’re being paid to provide a creative service. While 100% of the elements you put on a website don’t need to be handcrafted by you, you can’t expect clients to pay you well if no thought or consideration was put into the development of their design.

 

Featured image by Fancycrave on Unsplash.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

from Webdesigner Depot http://bit.ly/2VB6s2q

from WordPress http://bit.ly/2FodTEy