Sunday, 4 November 2018

Popular Design News of the Week: October 29, 2018 – November 4, 2018

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.

Is Front-end Development Having an Identity Crisis?

 

Celebrate Halloween with Ghoul-gle

 

Designers: ‘Stop Making Crap!’

 

Why do all Websites Look the Same?

 

There’s Always More Work to Do—but You Still Don’t Need to Work Long Hours

 

The Secret Dots that Printers Leave on your Prints

 

Project Management for Designers: Tips and Tools

 

Best Tools for Code Collaboration

 

2018 UX Tools Survey

 

Haska – A Codeless Back-end Services Platform

 

This is WordPress 5.0’s Default Theme (Twenty Nineteen)

 

Uilicious Snippets

 

Redesigning a Canadian Lifestyle App – A UX Case Study

 

Systemizing Color for Change

 

DNA of a Designer

 

Sketchnoting for UX Designers: WebExpo Conference Captured by Sketchnotes

 

The Little-Known Reason Pencils are Yellow

 

Google Wants to Hear from SEOs on the Search Result Listings

 

Accessibility in UX: How to Make Mobile App Design Work for Everyone

 

Build your own Horror Atmosphere

 

Don’t Have a Halloween Costume? Let an AI Pick One for You

 

Site Design: Justin Jackson

 

Design Portfolio Bingo

 

The Pitfalls of Running A/B Tests

 

The Future of Creativity at Adobe MAX

 

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

from Webdesigner Depot https://www.webdesignerdepot.com/2018/11/popular-design-news-of-the-week-october-29-2018-november-4-2018/

Friday, 2 November 2018

9 Fictional Websites Reviewed

There’s a moment that every tech nerd in every corner of the tech industry knows all too well. It’s that moment when you see that some movie or TV show has decided that your area of tech is relevant to the story, and by golly they plan to butcher it in the cheapest and most simplified way possible.

(This is your yearly reminder that CSI: Cyber was a thing, and that NCIS once had two people type on the same keyboard to “hack faster”.)

Oh dear God…why?

Thankfully, the representation of web design hasn’t been nearly as ham-fisted as that of information security. Sure, there are plenty of badly designed websites in movies and TV, but it’s getting better. Some may hate to hear this, but we probably have pre-made templates and frameworks to thank for that, because it now requires less effort to create a passable-looking prop site.

For the heck of it, I went down memory lane (and did some Googling, if you must know) to list some of the best and worst web design that our fictional universes have to offer. Some of them exist only in fleeting screenshots of shows, while others have real, live builds up right now. Some exist in both worlds.

Here they are, for your enjoyment. (Note: Some of these are old, and not all have working HTTPS. Just sayin’.)

1. Chumhum

Ah, The Good Wife. Was it a bit soap-ish? Yes. Was it also littered with stunning performances by amazing actors? Was the sometimes-over-the-top drama balanced by interesting characters, and genuinely hilarious moments? Yes to all of that.

Protagonist Alicia Florrick represents a tech company or two in the show, and many plot points revolve around web technology and the information age. One of the most notorious examples is that of Chumhum, a Google stand-in that copies the dead-simple aesthetic, but adds a cuddly mascot. The screenshot featured here is of a live mockup that is integrated with DuckDuckGo, a search engine with a mascot of its own.

My ranking: I can’t fault the UX or aesthetics for much beyond maybe the small height of the text box. I mean, how complicated do you want your search?

2. Trask Industries

In X-Men: Days of Future Past, Trask Industries is a corporation dedicated to dealing with “the mutant menace”. For all that, their website looks like a fairly standard corporate presentation-style site with a heavy emphasis on background video and simple animation.

My ranking: It’s a bit JavaScript-heavy for my personal taste, but the aesthetic itself feels understated in a clam and professional way. I am gonna give it extra points just for the photos/video of Peter Dinklage, and say this is one of the better ones.

3. Masrani Global Corporation

The Masrani Global Corporation site (from Jurassic World) has a sort of low-key corporate feel like Trask Industries, and much less in the way of fancy flourishes. It feels a lot like a premade template.

My ranking: It’s rather middle-of-the-road. While perfectly serviceable, it feels like they spent about as much money refining the details of their site as they did on not letting dinosaurs eat people. It loses a couple more points for having a splash video. Seriously, who does that? People who are bad with dinosaur security, that’s who.

4. Pawnee

The City of Pawnee’s website (Parks and Recreation) is what you get when you use a government budget on the cheapest, oldest HTML 4 template you can find. It’s got illustrations, very small photos, very little in the way of typography, and even less in the way of layout.

My ranking: As a website, it’s terrible. And because it’s terrible, it’s the perfect prop. It’s exactly what you’d expect a small-town website originally built in the ‘90s (probably) to look like.

5. Pied Piper

Let’s bring it to the tech sector with Silicon Valley. This is Pied Piper’s website. It’s simple, it’s corporate, and it all looks exactly like it was designed by a developer who has a general idea of how modern websites look, but hasn’t practiced a lot.

My ranking: As a website, it gets the job done. What really sells that “designed by a developer” feel for me is the typography. It has all the basic elements of a good website without the polish you get with experience.

6. War of 1996

Ah Independence Day 2. It’s a perfectly mediocre movie with a website to match. The design is presentational and modern, but kind of stuck in the ‘90s. I feel like that’s appropriate, though, since web design and many other aesthetic disciplines might stagnate with interstellar war on the horizon.

My ranking: It loses points for auto-playing audio, even if it’s epic music and that fantastic Independence Day speech from the first movie. It’s alright, otherwise.

7. Save Walter White

The Save Walter White website (Breaking Bad) looks like it was built with GeoCities in mind. Since it’s supposed to have been built by Walter’s son, who is most decidedly not a professional. He just wants to save his dad. I think we can let this one slide.

My ranking: It’s awful. It’s ugly. That’s appropriate.

8. John Watson’s Blog

John Watson’s Blog was created to market the BBC’s Sherlock. While it certainly wasn’t a perfect show, they did pay great attention to detail in crafting the world. This would include what appears to be a standard blog theme that could run on any platform.

My ranking: It’s one more of those sites that I couldn’t call “pretty”, but it doesn’t need to be. It needs to hold words and make them readable.

9. Grade my Teacher

Last, and definitely least, we come to Grade my Teacher from How I Met Your Mother. This one doesn’t even warrant a ranking. It’s abominable. It’s an image mockup on a repeating background. Approximately half an hour of Photoshop work went into this, and then they called it a day.

Look, if it was just going to be a static prop (nothing wrong with that), why would they bother making it live? This low-effort “website” should have stayed purely fictional.

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

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2018/11/9-fictional-websites-reviewed/

Thursday, 1 November 2018

5 Ways to Design for a Local Audience

In a recent post, I discussed how caution needs to be taken when designing websites for a global audience. Different cultures perceive things like color quite differently from one another. Devices that might be popular in one region of the world might not be used in another. And the customs each country has—even for something as seemingly insignificant as filling out a contact form—can vary greatly.

Needless to say, global web design needs to be greatly simplified and neutralized in order to appeal to a broader audience.

Now, local design techniques, on the other hand, require much more attention to detail and personalization. In this article, I want to discuss 5 ways in which web design can be more aptly handled for a local audience, be it within a single city, or nation.

How to Design for a Local Audience

When it comes to designing locally, your goal is to tap into a very targeted audience in a highly distinguished geographic area.

1. Prioritize Intent

In many cases, a website that targets local users is one that has a brick-and-mortar component. This means that you not only have to think about why your visitors have come to the site, but also how they intend on using it to complement the in-person experience (if at all).

As such, many websites designed for a local audience place all the essentials in the header and above-the-fold. This ensures that, if there’s no time to waste, your website isn’t responsible for it.

Let’s use Fusion Fitness Center as an example:

The header alone gives local members of the gym most of the information they’d likely come to the website for. This is part of the whole Google Micro-Moments proposition. The navigation is the next piece users see. Again, it doesn’t waste time with About Us pages, Team bios, and so on. While that information may exist somewhere on the site, the focus is on what this local business can do to facilitate the in-person experience for its local members.

And, if that’s not enough, the hero image at the top of the home page continues speaking to the local user. Never once does it falter and put the attention back on Fusion Fitness. It all remains on helping that user attain their goals.

2. Add a Map to the Home Page

For businesses that aim to drive virtual traffic to their website and physical traffic to their local property, a map is an essential piece to include within the design of your website. Feel free to get creative with it, too, so that it blends with the style of your site.

Here is an example from Foxwoods Resort Casino:

As you can see, it’s not the traditional Google Map you’ll find on websites. Instead, they’ve included a static greyscale image of their mapped location. The links within it then drive users to the relevant information they need.

3. Localize Content

Local consumers tend to have emotional connections to the area in which they live.

The nice thing about this is you don’t have to betray your brand’s color palette or sense of style in order to pull this off. Based on the kind of business you’re designing the website for, utilizing images or colors that are reminiscent of the local cityscape or landscape, home team, and so on isn’t too difficult.

Cervera Real Estate is a company in Miami that helps local consumers find a new home:

Take a look at that hero image. It’s beautiful, right? And it’s definitely one that is taken from the scenic Miami cityscape. But look a little closer. Notice how the orange hues within the sky—and even the animal sculpture on the deck on the right—play off of the orange in the logo? That wasn’t an accidental choice.

This image was selected (or custom-photographed) because of what it would do in terms of appealing to Miami residents as well as establishing a stronger brand identity that’s tied to the city.

Also, don’t forget that it’s not just visual content that needs to be localized. If you’re targeting an area with a specific dialect or jargon, make sure your writers account for that when developing content for your beautiful and local-friendly designs.

4. Create Local Pages

Businesses with multiple locations and unique teams and identities at each should have dedicated pages for them.

Slalom is a consulting firm with locations scattered all around the U.S. Each location has its own custom-designed and localized subdomain as this example from the Atlanta office demonstrates:

In addition to including an address for the location, this page includes:

  • An image of the Atlanta cityscape;
  • An introduction to the team;
  • Local customer case studies;
  • Job openings;
  • And more…

These local pages give you a chance to establish a unique identity for each location, helping prospects in those regions to develop stronger connections to the people and not just the brand.

5. Use Recognizable Trust Marks

Trust marks are an important part of convincing online shoppers, in general, to trust a website. But when it comes to convincing local users to believe in your brand, it’s not enough to include a Norton security seal or logos from big corporate partners on your site.

To impress a local audience, you need to use names and logos that mean something to them.

  • Local companies as advertising sponsors;
  • Case studies from other local businesses or residents;
  • Logos from local events your brand participates in;
  • And so on…

Lyons Group doesn’t commit its home page—or even most of its site—to talking at great length about how they’re a successful restaurant group in Boston.

Instead, it highlights dining establishments that exist within its family of restaurants. Boston residents know these establishments quite well, so leveraging these known “trust marks” is a smart move by the Lyons Group.

Designing with More Detail

While a local website might not have the ability to generate sales around the globe, this niche market does open up other opportunities you wouldn’t otherwise have. In fact, it allows you to do much more powerful and personalized things with design as you now have a clear audience to target and you can appeal directly to things like user intent and emotions.

The key here is to do your research, so that you can aptly impress visitors with design alone.

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

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2018/11/5-ways-to-design-for-a-local-audience/

Previewing the WordPress Twenty Nineteen Theme

Winter is coming, and so is WordPress 5.0. From some of the chatter about Gutenberg—the new content editor in WordPress—you might be led to believe that it’s worse than White Walkers. Others of us are more cautiously optimistic. We can all agree on two things: dragons are cool, and a lot of theme developers are going to have some work to do.

The WordPress developers themselves are leading the way with a brand new theme they’re calling Twenty Nineteen… because 2018 is almost over, I guess. It is intended to provide flexibility and customizability, and maybe to compete with Medium.

What? Don’t tell me you don’t see similarities.

But really, there are two clear priorities:

Priority One: Gutenberg Integration

Clearly the devs want to show off what Gutenberg can do, and put their best foot forward in that arena. They want us to see what we can do with Gutenberg’s layout tools, so they have refrained from doing too much layout themselves.

We get a big single column; and inside that, we get the content area, and everything it now offers. What it offers is—if the screenshots are anything to go by—is not overly impressive, but not bad either.

As a nice side addition, they’ve used SASS to implement both front-end and back-end CSS. They want the content to look pretty much the same in the editor as it does on the front end. I am particularly interested in seeing how well this works, as it could mean big things both for designers who love WordPress as a platform, and for our clients.

Priority Two: Going Beyond the Blog

WordPress will never abandon their blog-centered user base, but they’ve been adding more and more goodies for those developers that love to stretch the CMS to its limits. Until now, all default themes have been, first and foremost, blogging themes.

With Gutenberg’s integration coming, it seems that they’ve decided to expand their horizons in the theme-building department, in deference to everyone who uses WordPress as a more traditional CMS. This is reflected in the screenshots they provide of a typical business site:

Technical Bits

We will, hopefully, get to find out how well it all works on November 19th of this year, when WordPress 5.0 comes out. They’ve got a shortened development cycle, though, so it may be delayed if they run into significant bugs.

You can try out a testing version here: https://github.com/WordPress/twentynineteen

You can find more screenshots on WordPress’ own blog post here: https://make.wordpress.org/core/2018/10/16/introducing-twenty-nineteen/

Lastly, Twenty Nineteen is based on a combination of the Underscores theme and Gutenberg Starter Theme.

My Impressions

Twenty Nineteen is intended to be a nearly blank slate, as default themes tend to be. The typography is absolutely beautiful, while remaining flexible enough to be used for different kinds of sites. There will, most likely, be a fair amount of customization available in any case.

It’s not blowing me away, but it’s not supposed to. It’s supposed to be a foundation that helps a million would-be publishers get up and running, and help developers understand how Gutenberg is intended to be used. In that, I suspect it will succeed.

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

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2018/11/previewing-the-wordpress-twenty-nineteen-theme/