Domnicana Victoria Web Design

So easy , So wonderful, so Domnicana Victoria Web Design

Month: June 2015

Top 10 Mistakes that Make your Website Look Unprofessional

Building your own website can seem like a good idea for money-strapped entrepreneurs. You can just get a designer on board later on, when your startup gains some ground, then you’ll worry about insignificant things like that.

Right?

Actually, design can prove to be much more important for your fledgling business than you may imagine. When you run an online business, visitors’ judgements of it always depend on tiny details in your design.

Customers are distracted. They trust a few major brands already. Why should they suddenly start trusting you? Unless you catch them within the first few seconds, they’re out.

Ultimately, it’s the tiniest details that make the most difference. But these details must be carefully examined and fixed, if you are to build a trustworthy brand and build revenue. In this post, I’ll talk about common web design errors that amateur designers make. Even if you have limited design abilities, you’ll be able to recognize some of the common mistakes that may have also crept into your web design.

Note: the examples used in this post are startups that specifically asked for feedback on their respective websites.

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 branding development package, at least make sure that the template is not obvious.

2. Using Default Bootstrap Look

A different, but equally horrifying error is using the default Bootstrap design for your company website.You’re not fooling anyone by using Open Sans. It’s hard to distinguish between all the website that are using the same design and it’s hurting your brand.

One giveaway that your site is built with Bootstrap is Font Awesome. It has (like Bootstrap) gained massive popularity due to its exhaustive library of basically all icons you could possibly want with a consistent visual language. And using it as a helpful addition to complex interfaces if perfectly fine.

Surely, your app’s benefits are more original than three generic icons? Why not try finding another, more detailed icon set to illustrate your main selling points or — wild idea — get an illustrator to do it for you?

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. 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.

5. Multiple Equal Calls to Action

Each page on your website should only have one main call to action. Visitors are confused — if you don’t give them a single action to complete, they will likely take a longer time to make a decision and then to act on it. They may even leave because of this percieved effort required!

Make sure to eliminate as many calls to action as possible. Make it easy for people to take action without much thinking. Whether it be a sign up button or selecting a plan, make it obvious with graphical accents which is the action you want them to take, while making the rest of options more bland and unappealing.

6. 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.

7. 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.

8. Readability Issues

No amount of great copy will save your business if it can’t be read. Many tiny details can be detrimental to how your text is read and, consequentially, can affect the way your company is being perceived.

Be careful to fix problems like too small line height, tiny unreadable font, or too little contrast between background and text. Even though these may not cause actual reading difficulties to most people, just the fact that these problems exist on your website make the website seem much less professional. Can you imagine Facebook with readability issues?

9. 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.

10. 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!

By the way, I’m writing a book on how design can help entrepreneurs build their businesses. Want to be notified when it launches? Get on the list here.

How to Combine Traveling and Web Design Career

Traveling is an exciting experience, it opens your eyes, widens your mindset and certainly inspires you for more. I’ve been traveling since I left high school in 2011, I went to study Multimedia Design & Communication in Denmark, I did an internship in a design agency in London, UK and after a quick trip around the Europe, I’ve left for a journey of my life – a tour around the world as a digital nomad.

What is a digital nomad, you may ask, a digital nomad is an individual with a certain skillset like writing, programming or designing, that leverages remote work opportunities to travel the world.

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.

How To Get Remote Jobs?

This might be a huge headache at the beginning, especially if you were getting physical jobs only. However, updating your portfolio, looking for previous clients and talking to them about a remote work possibility will put odds in your favor.

Focus on good relationships with your clients, if it’s a permanent position, look for a company that has a free policy on how you work, in other words, their culture allows you to get the job done in any way as long as it is done. My good friend, also a digital nomad, Jacob Laukaitis, who works on Chameleon John allows his employees to work from home or any other place, meaning that you can go to your friends birthday or that football match as long as you get the job done. Other notable companies leading the remote culture are Buffer, Zapier, Toggl.

I’ve seen many remote job boards popping up here and there and below is a list of some I’ve discovered recently.

Remote | OK

Remote OK is a daily listing of jobs where it’s okay to work remotely. At distributed startups like Buffer, Zapier and Automattic and many other companies who embrace the future are posting jobs there.

Remotive Jobs

Remotive Jobs is a curated collection of remote startup jobs by Rodolphe of Buffer.

Dribbble Jobs

Dribbble job board has an option remote/anywhere that lists all the jobs that allow you to work remotely.

Working Nomads

Working Nomads curates remote digital jobs in the areas of development, design, customer success, sys admin, management, and marketing.

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 nw 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.

Meetup

Meetup is another place where you can find a lot of different events, including design, business and tech that will make you some new connections and make you feel like home.

Eventbrite

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.

StayFocusd

StayFocusd increases your productivity by limiting the amount of time that you can spend on time-wasting websites.

RescueTime

A personal analytics service that shows you how you spend your time and provides tools to help you be more productive.

Evernote

Evernote is a great tool for note taking and sharing with your friends or clients.

Trello

Trello is infinitely flexible and incredibly easy to use tool for personal project planning. Trello keeps track of everything, from the big picture to the minute details.

Dropbox

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

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.

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.

Copass

Copass allows you to work from hundreds of co-working spaces on the planet with one single membership. The freedom to work and connect to awesome folks anywhere.

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.

5 Most Common Interaction Design Mistakes on the Web

Designing an interaction has never been easy. It involves deep analysis of user behavior and meticulous planning. With new technologies and interaction design patterns emerging, things are not getting easier.Users are harder to impress with glossy images, smooth hover effects and unexpected animations, but the dilemma remains the same — how can you create a delightful user experience that generates conversions along with users’ smiles? If you’re aware of common design pitfalls, you’re far less likely to make them.

To make it easier for you — and perhaps to let you know that you’re not alone — here is a roundup of the most common interaction design misconceptions.

1. Overwhelmed with Innovation

Web designers are a creative lot. We want to express ourselves through our work. We’re always looking for innovative ways to make designs stand out. However, when it comes to IxD, innovation doesn’t always work for good. It might even be bad for your site. Users crave familiarity and often they are tuned in to certain ways of operation.

Randy J. Hunt, Etsy’s Creative Director and author of Product Design for the Web, put it clearly: “Hey, designers: stop trying to be so damned clever.” In this article, he explains in greater detail why you should not go overboard with innovation in designing for the web.

Take the Iotorama website,for example. It looks beautiful, the music is soulful, but with with all those balls moving, the user is left wondering what to do. Don’t get me wrong, the project is fantastic and super-creative! I liked the gamification idea, but it’s far from intuitive.

Here’s another example. The guys behind the Safety on the Slopes project came up with a neat interactive webgraphic that informs users about the dangers of winter sports. It’s innovative and at the same time intuitive, immersive and fun.

2. Confusing Navigation

The “don’t be too clever” rule spills over to navigation as well. Some designers attempt to be original by experimenting with eclectic names for pages. For example, the Chijoff website leaves users wondering what exactly they deliver and how to hire them. It takes a bit of browsing to figure that the “Co-Create” page is supposed to be the equivalent of “Services.” And even then, after reading through the whole page, the user is still left wondering what to do … the end of the page has a small form to sign up for the latest industry news and tips! There is no form on the “Contact” page either, only postal and email addresses. They just do not make it easy for people to get in touch with them, or hire them.

Can you guess what “Universe” is for on the Maison Margiela website? It actually links to their Facebook page. Who would have thought?

In contrast, check out the legworkstudio’s website. It’s strikingly creative and unusual. The navigation is clear and unambiguous. There’s no chance a user will get lost.

3. Clutter

There was a time when websites tried to put everything they possibly could above the fold. Those days are gone, yet many sites still make this mistake. Take this online store:

The designer tried to stick to a simple color scheme, but the sheer number of boxes, logos and fonts in different colors on this page are enough to leave a user reeling. The search bar has catchy “So, what are you wishing for today?” text, but the overall look and feel of the layout is rather outdated.

EBay is the one major online retailer that gets this right. Instead of cramming their website with product images, promotions and multiple calls to action, eBay has kept it clean and simple, highlighting exactly what they want the user to see first, with clear prompts on what to do next.

4. Contrast, Baby!

Contrast is one of the most important means of establishing visual hierarchy and drawing user attention to certain elements. In web design, contrast doesn’t imply only color usage, but also size, shape and positioning.The most simple and vivid example is this site. They guys succeeded in consistency, but the general look of the background and buttons are not inviting when it comes to placing an order.

Compare to this. The color choice is close, but the result is radically different. Plus, the creative scrolling effect smoothly introduces the new amazing product feature — rflective material. Cool, huh?

5. Neglecting Form Styling

Form design is one of the fundamental parts of user experience. Each website has a goal — whether it is to generate leads, directly sell products or provide information. Unfortunately, there are many websites with glossy homepages that prefer to bore users to death with long forms and complicated CAPTCHAs. Unless the users has strong prior motivation, they’ll just leave.With effective cross-browser solutions like JCF, it’s time to forget about ugly default form elements and move toward a more immersive user experience.

Another irritating thing is when the form is too demanding or not well tested. For example, the sketchybusiness.io form highlights all blank fields, even if they are not required.

If you look at the mostlyserious.o form, you’ll definitely like the hover and active button states. Plus, the “Don’t be shy” note adds a sweet, humorous touch.

Finally…

Don’t be too lazy to test! What matters to you might be different from what matters to customers. Where do they encounter problems and get stuck? Is it the navigation, fancy parallax effect or long-loading video? One of the biggest benefits of user testing is that you can step into the shoes of users, focus on their needs and make improvements. Don’t try to restrain your creativity. Just keep in mind that site visitors might get confused and frustrated.

What are the worst IxD mistakes you’ve seen? Share your thoughts and stories in the comments.

What is Invisible Design?

Design is not always an in-your-face art. It is subtle, usable and often undefinable. Quite simply, good design is often invisible.

And just to be clear – invisible design is not about adding layers or transparencies or hidden meanings to projects. It is about creating great user-oriented projects that work functionally and visually.

It’s something I heard over and over again when I was starting out as a young designer. If you have to “decorate” the canvas, you are over-designing it. The best design – the design that really makes a project work – is invisible.

But how to you achieve that invisible design? Especially when web design is a quite visual tool. (As a bonus, a few websites that exemplify the idea of invisible design are featured throughout this post.)

Thinking About Invisibility in Design

So before we get too far along, design is visible. There’s no argument about that at all. But the techniques and tools you use, should not be glaringly obvious to the common user.

Much of design is about “feeling right.” Users want to engage and interact with something. They don’t necessarily understand why. That’s invisible design.

Though the concept had been pounded into my brain long before I heard him say it, Oliver Reichenstein, founder and director of Information Architects, is quite famously known for emphasizing this invisible design concept. Here’s a brief bit from an interview with The Verge.

“Good design is invisible. Good screen design happens in the subatomic level of microtypography (the exact definition of a typeface), the invisible grid of macrotypography (how the typeface is used), and the invisible world of interaction design and information architecture. Minimum input, maximum output, with minimal conscious thought is what screen designers focus on. And just as type designers and engineers we do not try to find the perfect solution but the best compromise.”

Invisible Communication

When you create a webage or mobile app or even interactions for a smartwatch, you are designing some type of communication. The design needs to support the message and not get in the way of it.

You will create an experience with all the design tools at your disposal. The end design is not for you, and not even for other designers, it’s for a wider audience that does not understand (or care to think about) color theory or spacing or typography. They only know if these things come together in a way that feels cohesive, usable and interesting.

That’s why it is important to think about design as an invisible tool.

Different Types of Invisibility

When we talk about invisible design, a few different things come to mind. Each type of invisible design is important and likely impacts your work in a variety of ways.

  • Invisible products and placents, such as brands or advertising that you might not even notice. (This is important for app and game designers that often have to think about where placements appear in their design.)
  • Invisible interactions and notifications that happen so seamlessly that you perform an action or task without thinking about it. (Such as alarm or alert on your phone.)
  • Invisible aesthetics that create an emotional connection and bond with users, making people desire engagement. (That’s what we will focus on.)

Design Techniques

Invisible aesthetics are rooted in the basics of design theory. It’s not a trend or application of a cool new UX feature. It’s using text, color, typography, images, icons and techniques to share a message. So let’s go back to some of the basics and how they can work for you.

  • Text and language: The words you use convey a tone and emotional response from users. Use language that communicates the way you want people to feel when they interact with the design. Is it formal, lighthearted, comical? Should it make you feel passion or want to act in some way? Also think about the rhythm of the words; how do they sound when you read them out loud?
  • Color: Every color or color combination has a feel to it. With emotional and cultural considerations to think about, color choice can take a lot of time. Take care with the color palette to select colors that help users perform specific actions as well as create the right feel, harmony and balance.
  • Typography: Typefaces can have meanings of their own as well. From clean sans serifs that take on the meanings of their surroundings (Helvetica) to complex blackletter styles (Baroque Text) with a feeling of formality, the type of letterform you select will convey a specific feel. When in doubt, stick to sans serifs or simple serifs with uniform stroke widths in a regular weight.
  • Images: What is happening in the images you use? This includes photos, animations and videos. Are the people happy and smiling? (Are there people at all?) Are the colors warm or cool? Is the action fast or slow? Proper pacing and flow — think of it as a walking speed – can create a certain comfort level for users. Action that is too fast or slow, can start to bring attention to that fact and users will focus on it more than the image itself.
  • Icons and UI elements: A consistent set of icons and user interface elements works wonders on the path to invisibility. A set tells users how a site works and how to interact with it with a standard display even though the action or specific look in each icon might be different. The invisibility happens when the user does not have to think about how it works. Think of the shopping cart icon that almost every retailer uses as an identifier to check out or view items. Users don’t have to think about how to navigate to the final step or make a purchase; this element directs them to the appropriate action.
  • Other techniques: There’s a whole toolkit of design techniques out there than can work with or against your design — drop shadows, text effects such as bevels, strokes and frames, spacing, underlines and the list goes on. They key with any of these techniques is use. If you are opening the tool in editing software and clicking “apply” while using the default settings, you are probably doing it wrong and will end up with a garish effect. These effects should be used in such a way that the user does not look at an image and comment that it includes a great shadow (although a trained design eye might notice it). The design effects should only contribute to the overall message and goal of visuals.

Conclusion

Now think back to what Oliver Reichenstein said for a moment. He emphasized both “micro” and “macro” elements. This is key. To be completely invisible, the design needs to be perfected down to each detail.

Design simply and with purpose. Don’t over embellish or add in trendy elements just because you want to use a technique. Design the little pieces so that they work seamlessly and design the big picture so that it paints a complete image of what your project is supposed to portray. Don’t overthink it: Sometimes a simple solution is the correct solution. (Maybe this whole idea of invisible design is what helped flat design take off, and why it has remained so popular.)

Have you stumbled across website designs that you think work beautifully and invisibly? Share them with us in the comments.

Powered by WordPress & Theme by Anders Norén