DesignM.agFreelance Web Design Blog http://designm.ag Articles and Resources for Web Designers Mon, 15 Sep 2014 12:35:53 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.2 Tips for Designing a Beautiful Single-Page Portfolio Website http://designm.ag/freelance/design-a-beautiful-single-page-portfolio/ http://designm.ag/freelance/design-a-beautiful-single-page-portfolio/#comments Tue, 22 Jul 2014 13:14:01 +0000 http://designm.ag/?p=118069

Advertise here with BSA


Many trends in general web design can also be applied to single page layouts. But there are some unique features to the lone webpage which can add more flavor into a design. Like most of the web design field, common sense and user experience always trumps inessential creative ideas.

But that doesn't mean anybody can just understand the best techniques for creating a single page design. In this post I'd like to share a few ideas on how to create usable, tactile portfolios with content featured on a single page. Mobile users are growing rapidly so you have to be thinking about clickable and swipeable interfaces at all times.


Advertise here with BSA

]]>

Advertise here with BSA


Many trends in general web design can also be applied to single page layouts. But there are some unique features to the lone webpage which can add more flavor into a design. Like most of the web design field, common sense and user experience always trumps inessential creative ideas.

But that doesn’t mean anybody can just understand the best techniques for creating a single page design. In this post I’d like to share a few ideas on how to create usable, tactile portfolios with content featured on a single page. Mobile users are growing rapidly so you have to be thinking about clickable and swipeable interfaces at all times.

Fixed Block Scrolling

When all the website content is fitted onto a single page you can break down each section into horizontal blocks. As the user scrolls vertically they pass by each section denoted through background colors, images, or even horizontal rule breaks. This idea can be expanded with forced scrolling sections.

zack batsaikhan digital product designer website portfolio

The personal portfolio of Zack Batsaikhan demonstrates this effect brilliantly. Scrolling even 1 notch down will automatically animate to the next section. His website also supports navigating with the arrow keys so you can jump between sections and even go through his portfolio entries without a mouse or trackpad.

jeya karthika parallax website layout scrolling effect

Another designer Jeya Karthika has this same effect using split background colors. It’s especially nice for mobile users who need to swipe down between sections. To create this type of portfolio you would typically use a jQuery plugin for parallax scrolling. But it’s also possible to create your own with just a bit of JavaScript.

Responsive Design

Coupled with the importance of mobile support includes naturally responsive layouts. RWD isn’t a new concept, but the implementation is still in a growth & research phase. Designers are constantly playing around with new ideas for responsive web design. Portfolios are even more important because they represent your work quality and even some tidbits about yourself.

andrew shen portfolio responsive website design

Andrew Shen has a great responsive portfolio which adjusts the content and navigation menu. The hamburger toggle icon has become a staple among UX designers to convey a clickable button for showing & hiding a menu. His website is simple and would render perfectly on any sized mobile screen.

dennis field simple portfolio website layout

Comparing with another website by Dennis Field you’ll notice many similarities. Content is broken down into horizontal sections which then retract based on the browser width. But interestingly enough, Dennis’ portfolio hides the navigation beyond a certain point. Instead users move between page sections with arrows scrolling dynamically with jQuery. Each approach has its own benefits so think about your end result when building responsive traits.

There will always be a few responsive techniques you want to include on any site. Responsive images and collapsable thumbnail galleries will be necessary. Also think about breakpoint dimensions and when you should be resizing fonts to fit neatly on the screen.

Animations & Effects

A bit of charm in your single page portfolio will capture more attention if done correctly. There is a limit where visitors will not put up with your outrageous animations – but a neat balance will give the effect of dynamic and creative design talents.

keele web design ux agency website layout

The design studio for Keele has a bunch of neat page animations. Whether you find this beyond your acceptable limit is really subjective. But even if you don’t like all of these effects there is a lot to learn from their website. Notably the navigation hover effects coupled with the expanding logo really catch your attention right off the bat.

karol krakowiak designer developer animated portfolio website

Instead of interface animations you might try animating images or page content instead. The portfolio of Karol Krakowiak does this as you scroll throughout her work samples. If you can build the animations with jQuery everything should run smooth even on a mobile device. There is no scientific formula for making catchy page animations – just try some stuff and see what you like the most.

Hidden Sliding Navigation

The topic of navigation seems a bit confusing on a single page website. Since a one page portfolio has no inner pages(or very few), the nav links create auto-scrolling behavior. So basically users will click a link and it scrolls down to that section of the page.

clint forrester dynamic portfolio website sliding navigation

So why would you want to use hidden navigation? Well the example on Clint Forrester’s portfolio provides a good starting point. It will save you room on the screen which is very important on a 320px portrait iPhone view. Plus visitors will be able to scroll down through the site without a nav menu so it’s much less important compared to a multi-page website.

clean personal portfolio james mcgill

If you don’t want to use a larger menu take a look at how James McGill designed his portfolio. The menu link is always accessible yet only uses small icons and some brief text descriptions. Almost all of the content is accessible right from the page so the menu isn’t all that important. But it’s very useful if you want to include some off-site links such as your social profiles or personal blog.

Clean Minimalism

The simplest technique for creating a usable single page portfolio is clarity and minimalism. That doesn’t mean you should only stick to white colors and contrasting text. Instead just try to strip down the layout into absolute necessities. Once you’ve got a wireframe or mockup design then go back to add extra fancy icons or text effects.

alicia harris clean minimalist fullscreen portfolio

I think the portfolio of Alicia Harris uses the technique of minimalism brilliantly. Her website still uses a lot of color and the top-right navigation also has some neat icons. But it also uses plenty of whitespace and clearly readable text. It’s got the bare necessities and just the simple bare necessities(cue Jungle Book soundtrack).

gabe abadilla dark minimal portfolio website

Gabe Abadilla has a portfolio which seems a bit more detailed. He uses a fixed header along with some big images. But his portfolio is really focused on simplicity, demonstrating his work and his talents. This is the most important part of any portfolio. People want to hire you because you do amazing work – everything else about you is still important but shouldn’t take a primary seat at the throne above work samples.

I’m sure there are many other tips you could apply to build a magnificent single-page website. Just keep in mind that you’re selling yourself and more importantly, your talents. One webpage should be enough to do so if you organize content conservatively. Along with the examples in this post feel free to share other single-page portfolios and your thoughts on what makes them so great.


Advertise here with BSA

]]>
http://designm.ag/freelance/design-a-beautiful-single-page-portfolio/feed/ 0
How to Really Accomplish What You Need to Get Done by Becoming More Accountable http://designm.ag/freelance/how-to-really-accomplish-what-you-need-to-get-done-by-becoming-more-accountable/ http://designm.ag/freelance/how-to-really-accomplish-what-you-need-to-get-done-by-becoming-more-accountable/#comments Fri, 27 Jun 2014 12:29:28 +0000 http://designm.ag/?p=83307

Advertise here with BSA


accountability1 We're well into 2014 by now. How are you coming with your annual freelance web design business goals? That's what I thought. But don't worry. It's not just you. Most of us are behind on our goals. One of the biggest perks of freelancing is also one of the biggest problems. To be precise, the problem is the fact that you don't answer to a boss. Most freelancers that I know love the fact that no one is looking over their shoulder to make sure that they get their work done. And I agree. Not having a boss can be great.
  • Want a day off? Just take it.
  • Having trouble getting started in the morning? No problem. Get up later.
  • Don't feel like working today? Then don't.
  • Do you dread working with that problem client today? Put it off until tomorrow.
You get the picture. There's a lot of freedom when you're a freelancer. Unfortunately, sometimes that freedom means that you don't get your work done. You may miss deadlines. You may not keep up with your accounting tasks. You might put off marketing until you have no clients coming in. It's easy to see how freelancing freedom can be detrimental to your web design business. Fortunately, you can do something about it. You can choose to be accountable. In this post, I'll explain how accountability can improve your productivity and help you to get more done. I'll also describe what to look for in an accountability partner and list some possible accountability partners.

Advertise here with BSA

]]>

Advertise here with BSA


accountability1

We’re well into 2014 by now. How are you coming with your annual freelance web design business goals?

That’s what I thought. But don’t worry. It’s not just you. Most of us are behind on our goals.

One of the biggest perks of freelancing is also one of the biggest problems. To be precise, the problem is the fact that you don’t answer to a boss.

Most freelancers that I know love the fact that no one is looking over their shoulder to make sure that they get their work done. And I agree. Not having a boss can be great.

  • Want a day off? Just take it.
  • Having trouble getting started in the morning? No problem. Get up later.
  • Don’t feel like working today? Then don’t.
  • Do you dread working with that problem client today? Put it off until tomorrow.

You get the picture. There’s a lot of freedom when you’re a freelancer.

Unfortunately, sometimes that freedom means that you don’t get your work done. You may miss deadlines. You may not keep up with your accounting tasks. You might put off marketing until you have no clients coming in.

It’s easy to see how freelancing freedom can be detrimental to your web design business.

Fortunately, you can do something about it. You can choose to be accountable. In this post, I’ll explain how accountability can improve your productivity and help you to get more done. I’ll also describe what to look for in an accountability partner and list some possible accountability partners.

Why Accountability Works

When you think about accountability, do you kind of cringe?

Many of us do. After all, one reason to become a freelancer is to do it all on your own. However, accountability is an effective motivator for success.

If you’ve ever tried to lose weight, you know that many effective weight loss groups incorporate accountability into their program. There’s a reason for that. They know that reporting to someone means that members are more likely to stick their diet. Without accountability, it’s just too easy to sneak a treat–after all, no one will find out.

Business accountability works the same way. It’s easy to slack off or procrastinate if you know that no one will find out about it. Slacking off is harder to do if you know that you will have to report your progress to someone.

And ultimately, a lack of accountability is just an illusion anyway. Eventually we all must answer to someone for what we do (or in many cases don’t do).

For example, if you miss a deadline you’ll have to answer to your client. If you forget to pay your quarterly taxes, you’ll wind up owing more at the end of the year (and possibly some penalties too). And so on.

Generally, it’s better to choose who you’ll be accountable to than to let your own carelessness catch up with you.

What to Look for In an Accountability Partner

accountability2

Of course, it wouldn’t do to be accountable to just anyone. You need to choose your accountability partner carefully. Here are five traits of a good accountability partner.

  1. Trustworthy. You’ll be sharing information about how well your business is doing such as your successes and failures. Naturally, you’ll want to pick someone you can trust with such information.
  2. Understands your business. It would be difficult to share your progress with someone who doesn’t understand web design or doesn’t know about freelancing.
  3. Someone you respect. If you don’t really care what your accountability partner thinks of you, the partnership won’t be as effective.
  4. Not overly critical. Your accountability partner is there to support and encourage you, not tear you down. Overly critical people need not apply.
  5. Available. It takes time to be someone’s accountability partner. You’ll need to check in regularly and they’ll need to review your progress.

Okay, now you know what to look for in an accountability partner. But finding one who meets all the criteria can be difficult.

8 Professionals You May Want to Hold You Accountable

accountability3

So, where should you find an accountability partner? Here are eight ideas of where to look:

  1. Your mentor. If you have a business mentor, adding accountability is a natural extension of the mentor/mentee relationship. Make sure your mentor has the time to regularly check your progress.
  2. A trusted peer. Do you look up to someone in your field? A web design peer can make a good accountability partner because they already understand your business.
  3. An accountability group. Many professional groups provide an opportunity for accountability. For example, you may join a design group and regularly post your goals and progress.
  4. A former teacher. Generally speaking, teachers like helping people succeed. That’s why they became teachers in the first place. That’s also why they make good accountability partners.
  5. Your business partner. If your business is a partnership and you get along well with your business partner, there’s an accountability opportunity. Your partner is already vested in your success.
  6. A former employer. If you have a good relationship with a previous employer, they could make an excellent accountability partner. After all, they are already familiar with your work.
  7. A business coach. Okay, you’ll pay money for the service, but a business coach can be a good investment. They can help you with accountability and explore other avenues of professional growth.
  8. A personal friend. Maybe the person you trust the most doesn’t fit any of the above categories, but they still have all the traits of a good accountability partner.

Learn More about Accountability

Would you like to learn more about how accountability could help your web design business? Here are three additional resources on how to incorporate accountability into your business:

  1. Laura Vanderkam has written an excellent piece at Fast Company on how to create an accountability group. Read What You Need To Know To Create An Accountability Group That Works.
  2. Stephanie Vozza explains the value of an accountability partner at Entrepreneur. Read Why an Accountability Buddy Is Your Secret Weapon for Faster Growth.
  3. Marla Tabaka explains the importance of accountability at Inc. in the Home Based Business Productivity Playbook. Read about her ideas on accountability and success.

Your Turn

Do you have a business accountability partner or group? What tips would you add?


Advertise here with BSA

]]>
http://designm.ag/freelance/how-to-really-accomplish-what-you-need-to-get-done-by-becoming-more-accountable/feed/ 0
What You Absolutely Must Know Before You Form a Web Design Partnership http://designm.ag/freelance/web-design-partnership/ http://designm.ag/freelance/web-design-partnership/#comments Fri, 20 Jun 2014 15:49:07 +0000 http://designm.ag/?p=83929

Advertise here with BSA


partnership1 Should you work with a freelance design partner? The answer is "maybe." Not every freelancer is cut out to be in a partnership. And not every pair of freelance designers who decide to work together succeed. For many, working with a freelancing partner is the best thing that ever happened to them. But for others, forming a partnership results in nothing but chaos and misery. What's the difference? That's an excellent question, and one that we'll explore in this post. We'll look at why some partnerships work and others don't. I'll also provide five tips to help you form a working web design partnership. If you liked this post, you may also like 10 Essential Guidelines for Freelance Collaboration.

Advertise here with BSA

]]>

Advertise here with BSA


partnership1

Should you work with a freelance design partner?

The answer is “maybe.”

Not every freelancer is cut out to be in a partnership. And not every pair of freelance designers who decide to work together succeed.

For many, working with a freelancing partner is the best thing that ever happened to them. But for others, forming a partnership results in nothing but chaos and misery.

What’s the difference?

That’s an excellent question, and one that we’ll explore in this post. We’ll look at why some partnerships work and others don’t. I’ll also provide five tips to help you form a working web design partnership.

If you liked this post, you may also like 10 Essential Guidelines for Freelance Collaboration.

Born to Be Together

partnership2

The dream partners–you’ve probably met them at one point or another. You probably also envy them.

They seem to work together seamlessly. They get along so well, it seems that one could finish the other’s sentences. You may even wonder if they can read each other’s minds.

Of course, a smart web design company will avoid making any internal disagreements public knowledge. So, things might not be going as smoothly with the dream partners as you imagine.

Still, it is a fact that some personality types just naturally click. It’s almost as though they were born to be together.

Business partners who work well together generally have the following characteristics:

  • Mutual respect and trust. Partnerships work best when each partner respects and trusts the other. Without this foundation, most partnerships can’t survive.
  • Balance of abilities. In the best partnerships, the partners are equally matched. While their talents and skills may differ, one is not superior to the other.
  • Clear lines of communication. As with any business, good communication keeps a partnership healthy. Bad communication dooms a partnership.
  • A team mentality. Big egos need not apply. In a business partnership, working well with others means the difference between success and failure.
  • More work = more pay. Last, but not least, web design partnerships often earn more than solo web designers. And who couldn’t use more income?

Parnerships whose members have all or most of the traits listed above generally enjoy business success. But not every partnership is so lucky.

Freelancing Hell

partnership3

A poor partnership match can be a true disaster. Freelancing is stressful enough without having to deal with in-house fights and power struggles all the time.

You’ve probably also run across those freelance web design partners whose relationship with each other is so bad you wonder why they ever went into business together. They may be wondering the same thing.

A web design partnership mismatch can seem like freelancing hell. And betrayal by a once-trusted partner can feel worse than a client rejection.

Here are some of the disasters that can happen when you aren’t careful about which web designer you partner with:

  • Blame game. Whose does what? In a bad partnership, a lot of finger-pointing occurs. Mistakes are always the fault of the other partner.
  • Double jeopardy. When partners are mismatched, both may attempt to contact the same client directly–causing confusion and distrust.
  • Differing visions. Freelance web designers who don’t work well together are often unable to agree upon a unified project direction.
  • Unhappy clients. It’s hard to hide the chaos caused by a bad partnership. Odds are you’ll miss deadlines and otherwise upset your clients.

5 Crucial Partnership Tips

Partnership success begins before you ever form your web design partnership. Here are some tips to help you make sure your partnership starts out right:

  1. Be picky. When selecting someone to team up with, choose carefully. Just because someone is an excellent web designer doesn’t mean that they will work well with you. Consider their work habits, values, and experience. You should also consider their online reputation since they will be associated with your freelancing business.
  2. Get it in writing. Communication is vital, so it’s important to keep a written record of any work-related discussions you and your partner have. This includes contracts, who is responsible for doing what, and even specifics like when each partner gets paid and how much. Don’t rely on your memory for important details.
  3. Look for a complement. Often when a web designer looks for a partner they look for someone who is very similar to themselves. However, your partnership will benefit more if you choose someone whose skills complement yours. Try to find someone who is strong in your weak areas and vice versa. You’ll end up balancing each other out.
  4. Do a trial project together. While working as partners may seem like a good idea in theory, the reality is quite different. Before you make a long-term partnership commitment, work on a trial project together. If the initial project seems like a struggle, don’t assume that things will automatically improve once you have a more formal partnership arrangement.
  5. Don’t forget the legal questions. A partnership is often the first step to an agency or an even larger organization. Have an attorney draft a partnership agreement, or set up your web design business as an LLC. Laws vary depending on where you live. An attorney can help you decide what business structure works best for your situation.

As you can see, how you form your partnership is very important if it is to succeed.

Learn More

Are you thinking about forming a web design partnership? Here are three more resources to help you get started:

  • From SBA.Gov, Partnership. This resource does a good job of explaining the types of business partnership you can form. It also reviews the advantages and disadvantages of forming a partnership.
  • From Danny Iny on tuts+, The Ultimate Partnership Guide for Freelancers. I particularly liked the approach of this article, which provides an overview about partnerships as well as advice on how to fix a bad partnership.
  • From Thursday Bram on Fuel Your Creativity, How the Right Partnerships Can Make Freelance Clients Love You. Here’s some very actionable advice on finding the right freelancing partner.

Your Turn

Have you ever been in either a good or bad partnership? Share your experiences in the comments.


Advertise here with BSA

]]>
http://designm.ag/freelance/web-design-partnership/feed/ 0
Avoid These Top Complaints when Developing Mobile Apps http://designm.ag/uncategorized/avoid-these-top-complaints-when-developing-mobile-apps/ http://designm.ag/uncategorized/avoid-these-top-complaints-when-developing-mobile-apps/#comments Fri, 06 Jun 2014 03:58:46 +0000 http://designm.ag/?p=84009

Advertise here with BSA


Mobile apps are a growing trend these days with 22% of the population across the world owning smartphones and 6% owning tablets. According to the Pew Research Center’s Internet & American Life Project, 56% of American adults own a smartphone. Many businesses now offer loyal followers apps in place of their website to provide convenient and quick access to their information.

Advertise here with BSA

]]>

Advertise here with BSA


Mobile apps are a growing trend these days with 22% of the population across the world owning smartphones and 6% owning tablets. According to the Pew Research Center’s Internet & American Life Project, 56% of American adults own a smartphone. Many businesses now offer loyal followers apps in place of their website to provide convenient and quick access to their information.

However, some apps end up never being worth even the download due to usability issues. If these usability problems are too rampant with the initial release, then the app may never have a chance to improve due to bad reviews. An app developer has the responsibility of making sure that an app provides enough benefits to be worth an individual downloading, keeping on their phone, and (even better) using on a consistent basis. And one important way to meet these important goals is by being aware of and avoiding the issues that are the cause of common mobile app complaints.

Below are some of the most common complaints that users voice when reviewing mobile apps. Before you begin your next mobile app project, make sure that you use this checklist so that your app doesn’t become one of the obsolete ones that downloaders never use.

Too Many Notifications

Nothing is more frustrating than wading through spam mail after most people spend a majority of their days just working through the important emails. And spam mail is what many app notification emails become. Facebook did it right and allows for some very intense customization of notifications; selecting just to receive notifications for friend requests, for instance. You can even choose between texts, emails, and push notifications. And, of course, always give the option to completely turn off notifications. For many apps, there is simply no point in having notifications, especially since the release of iOS 7 and automatic updates.

Inconvenient Buttons

Photo Credit: JuditK via Compfight cc

While not kosher, it is much more understandable for a website to have buttons that are difficult to reach, especially if it is not a mobile-friendly design. However, apps are created specifically for easier use on a smartphone. So if buttons are so small that users can’t easily click on them, they probably will end up eventually deleting the app. The same applies for buttons spaced too close together or that don’t respond immediately to touch.

Overdone Intro

Keep in mind that an app has to load first before an animated intro can even begin to play. This is why it is so important to keep your intro memorable yet short, as in only 1-3 seconds long. You also don’t want users staring at nothing while waiting for the app to load either, though. To answer this problem, Ryan Matzner in a Mashable article suggests starting the app with a still image that transitions into very short introductory animation once the app loads. This keeps the intro interesting yet avoids annoying users with a long wait-time.

Slow Loading

Photo Credit: Daniel E Lee via Compfight cc

As briefly mentioned already, users do not like to have to wait. An app should make accessing information much quicker than using the website on a mobile device. So, if anything on your app takes too long to download, it’s a sure sign that your app is destined for deletion. Make sure that everything from the initial loading of the app to any buttons clicked on in the app loads quickly. You don’t want to keep users waiting for more than a few seconds.

Not Enough White Space

Remember, an app is for small screens. The more content you try to fit onto the screen, the less usable the app will be. If you find yourself trying to add too much to a single page in the app, you may want to go back to the drawing board and rethink your layout. As mentioned above, you need plenty of space around buttons so that users can easily tap the button they intend to without accidentally tapping on the button next to it. But you also need white space around text, images, graphics, and any other element in an app design. A small screen is hard enough on the eyes. Don’t make it harder on users by overwhelming them with too much clutter, which also ends up hiding the most important information you need them to see.

Poorly Focused Content

While white space is certainly important, it will never make up for a lack of focus. Make sure that in your attempt to create an uncluttered white space you don’t leave out important content. You may simply need to re-organize. Use bullet points rather than long paragraphs and break up content with boxes or lines. You may need more than one navigation menu. And don’t forget to utilize your color scheme and fonts wisely to break up content and emphasize important sections.

Overly Annoying Ads

Free apps make money off of ads, so completely removing ads is not an option. You can give users a paid version option that removes all ads. However, make sure that you are not intentionally using ads to push your users into purchasing the paid version. If your ads are too annoying, users may simply delete your app because they are too frustrated to want to pay for the ad-free version. Frustrating ads include videos that play with sound even when the user’s phone sound is on silent, ads that have too small of an X to exit back to the app, and ads that pop up too often.

Too Many Requests

When an app asks over and over for a review or rating, but every single time the user clicks on the No Thanks button, you could eventually end up annoying your users enough for them to quit using the app. There is a reason these rating requests include an Ask Me Later button. Other requests that could prove detrimental to your app’s popularity is requesting Facebook connectivity, asking for you to advertise the app to your Facebook friends, and requesting a rating before deletion of your app.

No Updates

Not every app is perfect at release. Sometimes it takes simply releasing an app before you can see where improvements need to be made. And operating systems are continuously rolling out updates as well. If you want your app to stay at the top of the popularity list, then one of the best ways to do this is to keep improving with updates.

Test for Usability!

Photo Credit: philcampbell via Compfight cc

One excellent way to avoid including any of the above mentioned issues is through usability testing. With any app, testing is an important part of working out any navigation or other bugs that you or your team may have missed. Just be sure that when testing to find testers who are familiar with their device. Don’t forget to test on both wireless as well as the cellular networks to make sure your app runs well on either connection.

What are some complaints you have heard from users or annoyances you yourself have experienced with mobile apps? Feel free to share your advice in the comments below!


Advertise here with BSA

]]>
http://designm.ag/uncategorized/avoid-these-top-complaints-when-developing-mobile-apps/feed/ 0