Monthly Archives: June 2017

Designing Photography Website

Use Hero Images

One of the most visually stunning ways to use photography is when it is large. Oversized, or hero images can have dramatic impact and lure visitors into your website.

Opt for hero images when you have one or two stunning photographs with plenty of detail and impact. Images should represent what your site or brand is all about without a lot of additional detail.

Sliders Add Interest for Multiple Photos
When you have more than one image to showcase, sliders can be a good option. What’s also nice about a slider is that it can often accommodate multiple sizes, so you are not locked into a full-screen image.

The key to using a slider is to not go crazy. Stick to a handful of images for the most impact. Make sure each image is relevant and does not duplicate or look like another image in the set. Another bonus to a slider is that you can change the images from time-to-time, such as replacing images with seasonal photos or adding images of new products.

Create a Collage or Grid

A beautiful grouping of photos can add drama to your site. But you have to be careful about photo selection, cropping and grouping. Ajax scrolling features are a fun way to keep users moving through groupings of photos.

But there are a few things to keep in mind when creating a collage or grid – mainly photo size on the screen. Select images that you can see at smaller sizes. Typically this will include images with simpler framing and composition. This design technique is popular with looking at groups of tight images or faces. It does not work so well for landscapes or images with a lot of detailing.

Use a Minimal Aesthetic

Keep the rest of the design simple when working with photography as a theme. You want to let images speak for themselves and a lot of “obvious design” can take away from the images themselves.

Simple buttons, elements and even colors will give photos more room to be enjoyed on the screen. (This is why so many portfolio sites take advantage of a minimalistic style and back and white backgrounds.)
Stay Away from Too Many Effects

At this point, most designers are already avoiding flash, but it is still important to remember. Avoid flash in your photography website designs, as enticing as it may be.

High-resolution photos need to load quickly – they are large files – and accurately on all devices. Keep this in mind when designing animations, loading presets or other effects. And if special effects or techniques impact speed or take away from actually looking at the photography, don’t apply them.

If you want to use an effect, keep it simple. Consider parallax scrolling or autoloading images.

Design a ‘Photo’ Theme

Some photography sites use fun “themes” for photos, which can be a good way to show off photography and some other design skills. Them ideas include an Instagram-style look, Pinterest design theme, black and white gallery, an effect with borders or edging or a color overlay. There are plenty of fun options that you can use to create a site with a photo-based theme.

The caution is to not take away from the message photos are supposed to have. Use a theme in a way that compliments photography and does not hide it.

Mix Up Shape and Size

Some designers get caught up in shape and size when it comes to photography. Images can be different shapes, sizes and orientations (portrait versus landscape). Using a mix creates more visual interest.

Using that same concept, think about the framing and composition of photos as well. Some should be close, others at medium or distant ranges. Think about this variance when it comes to color and background as well. Using a large group of similar photos will bore users quickly; mix it up to keep users flipping (or clicking) through your images longer.

Place Text Strategically
Poor text placement can ruin a website that features great photography. Ensure that text, buttons or other elements are not placed over key parts of an image.

One trend that we’ve seen a lot of recently is the use of large images and ghost buttons. This combination allows for a dominant image with a large-style button that does not overpower the photo.

A few rules of thumb when thinking about text or element placement and photos is to avoid placing elements over faces, keep elements out of the action of images and make sure clickable tools are discernable from the image.

Create Contrast

Contrast is one of the key principles of design and is incredibly important when thinking about websites design around images. Create text and backgrounds that are very different from photography.

Black, white or neutral backgrounds often work best in photography websites because they are so plain in comparison to the intrigue of images. This contrast tells users where to look on the screen.

Use plenty of white space so that photos have room. Each image should have enough context and contrast to be distinguishable from surrounding photographs.

Whatever design aesthetic you choose, make sure that images and the outline where they live are different enough so that users know the main part of the message (the photo) from background elements or navigational tools.

Design for the Images

The most important thing you can do with designing a photography-based website is to design for the photography. Creating a design outline and then adding photos in later will often feel awkward and clunky.

Choose your images first and design a framework to support your content. Design is nothing without content. Treat it properly and you might be surprised at how much better your overall project turns out.

Material Design websites

Developer team recently released a library of components in their Material Design style called Material Design Lite, or MDL for short. It’s a library filled with numerous design components like buttons, forms, and everything else your heart could desire really. They are considering this library to be framework-agnostic in order to make it extremely flexible for people to use. Additionally, one of its key benefits is the fact that it is developed in ‘vanilla CSS, HTML and JS. So far so good.

“Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible.”

You can download the Material Design Lite library, on their website. You can also peruse their Github repo.

Simple tech behind the scenes

A key component to this library is the fact that it’s easy to install. That’s a brilliant step one because it would not make for a great free resource if it was difficult to use from the get go. However, the whole library is based on simple markup, hance they describe is as vanilla. The simple structure of the library makes it compatible with many browsers – another plus. It supports modern browsers like Chrome, Firefox and even Microsoft Edge. The library does promise smooth degradation to the more challenging browsers, like IE9.

A big principle in making this library was its flexibility and accessibility across devices and browsers; it’s impressive that they have achieved it. We all know this is important but we can’t always afford the time to make our designs this flexible ourselves; once again, it’s a huge plus for the library.

Take a look a a code snippet for the round flowing buttons. The markup for the library is easy to follow in terms of syntax as well.

They use great APIs to make the code aspect of the library great, like Polymer for the various paper components and BEM for Sass. If that’s not good enough for you, the CSS can be used by referencing their CDN or imported through npm as well. You know, in case you wanted choices.

 A bold idea

I think it’s an interesting idea to share such a library with the world. The previously released Material Design documentation was geared towards explaining the philosophy of their overall user experience and how it relates to user interfaces. It was a document based on how Google goes about creating their own apps. We share our work with each other all the time, we have plenty of UI kits and code snippets being used throughout our work. That’s nothing new. MDL is geared towards sharing their design and letting everyone else take a stab at it; what makes it interesting is the fact that Google is a big company whose aesthetic is very unique.

I’m also having a hard time seeing a company like Apple, which too is know for it’s aesthetics, opening up it’s style for everyone to use. That’s why I think it’s a bold move for Google to freely open up the use of their style actually and I’m curious how it will go about over time.

Easy to utilize

All in all, the setup steps are neatly laid out to be easy to follow. The library itself is actually pretty well displayed on their website as there is a lot you can do without even downloading it. On their site, there is a section dedicated just to components where you can browse through all the various elements and interact with them yourself. You can even open them in CodePen to edit it quickly and play around it.

Google really though this library though; that’s clear. They provided a whole section designated to colour customization so you can check out to see how their colours play out with each other.

There is even a whole section designated towards the Material Design style that feeds off their Material Design documentation in order to help you understand the design principles governing their visual style. It goes over basic design elements like typography and iconography. You can download zipped file assets too. Like I said, Google Development team give this a lot of thought and it shows.

In order to help us see the potential of MDL, there is a templates section to help spark our creativity. These templates are free for use and are also customizable. They vary from portfolio websites, to stand alone articles. There are only a few of them but who needs an infinite list, anyways? I think the template page was a great idea in helping people conceptualize the ability of the MDL’s capabilities – another smart move.

And now the bad

With everything flattering I’ve already said about the library, I have concerns. As a designer, I don’t want my website to look like a Google app. This to me is concerning. It’s really awesome of them to make this public and free for use but the last thing we need is another set of websites that look the same. It’s unoriginal. It’s not good for design.

Joshua Johnson did a take on this point of view for Smashing Magazine not too long ago either. In an article titled Beyond The Boring: The Hunt For The Web’s Lost Soul,he too points out that too many websites look alike. The lack of originality in terms of style and especially layout is jarring. Joshual Johnson was inspired by Noah Stokes who feels the same way; he’s resentful of the fact that most current designs rely on clear boxes and grids making for uninteresting designs.

As a designer, I consider myself a creative. Now, some design elements will always be reused, like left hand side logos and top navigations. I was much more impressed with Material Design documentation because it provided explanations on why they designed the way they designed. Insight into their philosophy, so that I could learn from it, was not only more useful to me but more empowering. Frankly, I can’t find a single good use for this library as it looks exactly like Google; the library doesn’t provide much creative freedom.

Mistakes That Make Your Website sound unprofessional

1. Improper Use of Template

I don’t condone using templates for large businesses, but I can see the need for them in small, bootstrapped startups. However if you end up using one, it’s a good idea to get a designer to properly customize it to your branding. You may even end up with a pretty good product.

A common problem on websites built with pre-designed templates is a weak visual connection between the logo and the rest of the website. There will be colours used in the logo that aren’t repeated anywhere on the website, or fonts that don’t fit well with ones used in the site.

If you’re saving on brandin

2. Using Dark Backgrounds

Background color covers the largest part of your website, so better choose it carefully.

As a rule of thumb, entirely black websites almost never look good, unless they’re professionally designed. White color is a safe bet, but even more designers use very light gray. Be aware that the darker the gray, the worse is readability of black letters on this background. It’s best to stay below 15% of black in gray to keep the design light.

3. Typography Contrast Issues

Fonts are a much bigger deal than most non-designers realize. They will make or break your entire design, even though they are just “letters”.

A common problem on “home-made” web designs is that there is too little contrast between headline and body fonts. Just implementing some size variation mostly doesn’t cut it. Try using a bolder weight for your headline font, and make it very obviously more important than the rest of the text. This will help with hierarchy and gently guide the eye through the website.

4. Unprofessional Copy

Writing well is hard, but it’s necessary to get your point across on the internet. Especially if you’re trying to sell something, you’ll need to make sure your copy is easy to understand, and have it checked by the proofreader to fix any spelling mistakes.

I oftentimes see awkward sentences in the website copy that seems to have been stuck there as a placeholder text from the prototype stages of design. It’s a good idea to have somebody read all the text before the site goes live.

5.Off-trend Design

Like it or not, we have bid adieu skeuomorphism for now and every website still using the gradient – and shadow- heavy web design is bound to look outdated. While you can get away with some 3D effect here and there, it’s best to explore your creative options inside the flat design guidelines.

So here you have it: 10 most common issues I have come across analysing a number of different startup homepages. Now go and review your website against the tips above!

6.Inconsistency

Your branding should ideally be very consistent. Everywhere you turn up, whether it be social media, Facebook ads, or offline, your customers should be able to immediately recognize your brand.

But let’s take a step back and first make sure that your website is consistent with itself. Have you got any legacy ul styles that are overwriting your body font? Are your logo’s colours exactly the same hex as those used on the website? Are you using the same shade everywhere or just “something similar enough”? Usually, just keeping your CSS files organized and deleting all unneeded code will fix these inconsistency problems.

7. Alignment and Spacing Problems

Spacing is hard. Leaving enough, but not too much white space around elements is probably the hardest part of figuring out design. But it can be simplified with a few rules. First, make sure all elements are properly grouped together, second, leave enough white space around those groups.

Combine Traveling and Web Design Career

In this article I’d like to share how I traveled the world and worked as a freelance web designer while building Despreneur. I want to inspire an idea that you as a web designer can easily combine these two activities and completely redesign your lifestyle. Collect moments, not things they say. As a web designer you’re able to produce your work without physically being in the place so it gives you the freedom to move anywhere in the world as long as you have an internet connection. Read also our previous article about How to Work as A Freelance Designer and Travel.

Plan Thoroughly

Not a surprise but you need to plan your itinerary, future destinations and getting paid for very simple reasons: to save time, money and stress while you’re on the road.

Some of the things you need to think of are:

  • Where will you get web design clients?
  • How are you going to get paid?
  • What happens if you’re not able to work for a month or two?
  • Where are you going to live?
  • What about health insurance and taxes?

Before leaving make a rough plan of where you want to go, let your relatives, friends and family know that you are leaving.

It’s very important to contact your bank and other institutions and inform them about your leaving. Make sure they activate online payments in your cards, enable a risk of your card being used in third world countries, also make sure to get medical check ups. Get a credit card (if you can) that covers travel insurance.

From the professional perspective, ensure that you have a fully working laptop, charger with adaptors for different countries, get a Skype or other VoIP service credit for cheaper international calls.

Ideally, have a list of clients queuing up for your work, healthy work pipeline will give you a lot of confidence and peace of mind. If you don’t have enough clients yet, hold on, save some money and work on booking some clients for the future.

AngelList Remote Jobs

AngelList is the largest platform for startups to find investors, hire new people and get press. They just recently launched remote jobs platform where you can find a well-paid startup position to work remotely.

Meeting Other Designers

Traveling and missing out on meeting new people is a complete failure of traveling in general. Meet as much people as you can, that way you will learn about their culture, you will get new ideas and make new friends that will make you feel like home anywhere in the world.

While I was traveling with my buddy we were attending different design, business, and tech meetups and events to meet like-minded people. WordCamp Europe, Startup Weekend, Couch Surfing meetup, Dribbble Meetup as well as different events at co-working spaces. These events provide great atmosphere for people to connect and discuss about their hobbies, life and even potential collaborations.

Startuptravels

Startuptravels is a great website that allows you to browse your destination directory and propose a meetup with local entrepreneurs, while most of them are not designers, they can be very cool people to talk to and potentially will need a web designer services, meaning that in the long term you may get another client.

Dribbble Meetups

Check Dribbble Meetups page of official meetups listed there to book your calendar of an upcoming meetup near you. It’s great for networking with fellow designers, learning from them and generally having a good time

Eventbrite is generally for event tickets but there are many different events for free too, just browse it in your selected area and you will see how much is going on.

Hubud

Co-working spaces is another great place to meet other like-minded people. One of my favorite co-working space is Hubud, a hub in Ubud, located in a paradise island in Bali, Indonesia. They have fast wifi, nice coffee and great community with dozens of events.

Utilise Your Social Network

I was surprised how many followers I have in different countries located in Southeast Asia, where I was traveling for the last 6 months. Indonesia, Thailand, Malaysia, Philippines, and many other countries and I had someone I knew online, simply check your current connections and ask to meetup for a coffee or so, if they can’t make it ask for an introduction to someone they think you will have a good time with.

Best Tools To Get Things Done

While working remotely you will need tools to save you time and solve specific problems like scheduling a meeting in a different time zone or sharing a huge PSD file with your client. There are numerous tools to get the job done, and every web designer has their own workflow. I’ll list some tools I’ve been using so you can check them too or look for alternatives.

Toggl

Online time tracking tool featuring 1-click time tracking and helps you see where your time goes. Free and paid versions are available.

iDoneThis

iDoneThis is an incredible management tool which has provided me with unprecedented visibility into our productivity and the areas where we need to improve.

TweetDeck

The most powerful Twitter tool for real-time tracking, organizing, and engagement. Very easy to manage multiple accounts, schedule updates and filter feeds.

Dropbox is a service that keeps your files safe, synced, and easy to share. Bring your photos, docs, and videos anywhere and never lose a file again.

Headspace is a digital health platform, providing guided meditation sessions and mindfulness training for a better work/life balance.

Skype

Free calls with your team, clients as well as your friends and family.

Wave Apps Accounting

Accounting is extremely important and shouldn’t be ignored while traveling. Wave’s accounting tools are 100% free, secure, and accountant-approved.

Travel Hacks

Traveling can get very expensive if you don’t know how to book flights or accommodation for your next destination. In this section I’d like to introduce you to some cool apps and services that will help you find cheaper flights as well as nice places to stay and work from.

Nomad List

Nomad List is definitely your go-to place for researching destinations, value for money, connecting with other nomads and obviously finding some more handy information.

Momondo

Find cheap flights with Momondo. Find and compare fares from 700+ travel sites, find out best dates to travel to your desired destination.

Google Flights

I use Google Flight Search to get the big picture of the biggest hubs to fly from like London in Europe and Singapore, Bangkok or Kuala Lumpur in Southeast Asia.

JetRradar

JetRadar is a flights search engine. Similar to Momondo it shows you the best deals from hundreds of airline companies.

Skypicker

Especially good for using in the US. Save a lot of money and get smart suggestions to save some dollars on flights.

Co-working Spaces

How do you find a place to work from? You will certainly need a very fast internet connection and comfortable environment. While I personally can work anywhere from cafe to restaurant to hotel room, you may want to try co-working spaces first. You don’t just get a comfy place with fast internet and coffee supply but amazing like-minded people around you.

ShareDesk

ShareDesk marketplace provides a platform for mobile professionals to discover and book work and meeting spaces on the go–by the hour, day, or month.

Desk Surfing

Desk Surfing gives you the freedom to work where you want. And who you want to work with. Desksurfing is co-working at any given place.

Airbnb

Find nice rooms, usually better for shorter term stay, however, hotels and homestays are cheaper but after living in hotels you really start feeling that authentic homes are probably better, even if they cost slightly more.

Agoda

Booking.com and Agoda are great services for nice deals on hotels, providing especially good value for money in Southeast Asia.