Thursday, November 30, 2017

7 Design Challenges to Sharpen Your Skills

Once in a while, I just have to try something new. Maybe I feel my skills are slipping. Maybe I want to jumpstart the neurons responsible for my creativity. Maybe I’m bored. There are a lot of good reasons to take on a design challenge, really.
Here are some more: You can add conceptual designs to your portfolio. You can blog about your experiences, and advertise your skills in doing so. You can take on a design challenge with other designer friends, and perhaps compete. You can gain a greater understanding of the technology you use.
The point is to do something differently from the way you usually do things. Change for its own sake isn’t always advisable, but trying new things is how we grow as designers, and as people. Just maybe don’t do any of these challenges on a client’s site unless you’re absolutely sure they’ll like it.

1. TRY TO BUILD SOMETHING NEW

This is actually my personal go-to challenge. I try to build something—usually something to do with layout—that I haven’t built before. It could be an effective and accessible horizontally-scrolling interface, a three-column site I actually like, or a full-screen responsive background image with absolute positioning.
you get to try out newer CSS modules…without worrying too much about cross-browser compatibility
This is a challenge where you get to try out newer CSS modules, or techniques you might not have thought of before, without worrying too much about cross-browser compatibility or other issues like that.

2. CHANGE YOUR COLORS

I know that I personally am always tempted to stick with what I know works, as far as colors go. I love my muted shades of colors, my grays, my de-saturated greens and blues, and so on. Unless you’re required to follow a specific style or branding guide, it can be easy to fall back on what you know works.
Well, get right on out of your comfort zone! Build a site with a color scheme you wouldn’t normally go for. For me, that would be using more bright, and bold colors. I’d have to turn up the saturation in general. For you, you might consider a dark layout, if you usually do light ones. Use calmer colors, if you’re prone to going bright and bold. Many of us, myself included, aren’t using enough contrast in our designs. Try adding more. Heck, try a design that’s totally just black and white, and make it work.

3. COPY A COMPLICATED LAYOUT

Okay, don’t copy someone else’s site exactly. Just find a site with a nice, complex layout or design, and copy it without looking at the source. Build the thing up from scratch by examining the major layout elements, and figuring out how to do it yourself. Don’t use this for a live site, but as a simple HTML/CSS/JS exercise.
the point is not to create a pixel-perfect copy, but to learn the principles behind the design decisions
You could choose to copy one of those fancy, experimental-looking sites to see if you can manage the same feat. Or you could copy the layout from a large retail site, to see figure out how you would manage that amount of HTML and CSS in a practical way. Copy a news site to see how they handle the scaling of large amounts of text and images in a responsive way.
Remember, the point is not to create a pixel-perfect copy, but to learn the principles behind the design decisions.

4. DESIGN AND/OR CODE A SITE USING NEW TOOLS

If you’re used to Foundation, try Bootstrap, or a lesser-known framework. Try a different pre-processor. Try a different CMS. Try a different file manager or text editor. If you’re a programmer and/or like pain, drop your favorite JS framework, and try another.
Obviously, if you want to go in-depth this would be one of the longer challenges, but it doesn’t have to take too long to learn the operating principles of new tools. The key is not to necessarily change everything about your workflow, but to expose yourself to new and potentially better ideas.

5. TRY OUT A NEW METHODOLOGY

Similar to the last entry, you can spend an afternoon or two trying a totally different way of working. If you’re primarily a graphics specialist, try looking at how others start and fill out their mockups. Look at how others organize their layers. See if you can learn something from them. Or you might look into a full-fledged design methodology like Atomic Design.
On the front-end development side, you might try out a new CSS methodology. Hongkiat has a good overview of a few of the more popular ways of organizing your CSS.

6. REFINE AN OLD DESIGN

When I look at my older design work, my most common emotions are frustration, and a small amount of disgust. In that state, I have often decided to go for a full redesign. If you’ve been doing this for some time, chances are that your old work is built on solid principles. It just needs to be updated and refined.
apply new knowledge to old design instead of burning it all down and starting over
Take an old design, and update it without changing its core elements. Maybe keep the same layout, but update the spacing of elements. Keep the chosen typefaces, but update the text styles to better reflect your knowledge of typography. Keep the chosen colors, but make better use of them.
Just see what happens when you apply new knowledge to old design, instead of burning it all down and starting over.

7. FOLLOW A TUTORIAL (THE HARD WAY)

Tutorials are often a wealth of information, even if you’ve been at this for some time. Don’t copy and paste the code. Find a good, long tutorial, and type every line of example code out yourself. Follow every step in Photoshop carefully. Observe how everything changes as each piece of the puzzle is added in.
If there’s a bit you don’t understand, Google it until you do. The challenge here is not one of creativity, but of understanding…and maybe endurance.
  By Ezequiel Bruni  - Orginal Post: https://www.webdesignerdepot.com/2017/11/7-design-challenges-to-sharpen-your-skills/

14 Best ECommerce Options for Designers

With Black Friday/Cyber Monday just a few weeks away, it’s time to get clients set up and ready to sell. The list of solutions to choose from keeps on getting longer, so how do you pick which one to go with?
Start with a list of features that are must-haves for your client, be clear on what their budget is, decide how much development you want to do to get the thing set up, and whether you want a hosted solution, or separate hosting. Once you know what you need, then start looking at what’s out there.
Here’s a selection of some options that should be on your shortlist:

1. SHOPIFY

What began as a bespoke store selling snowboarding equipment is now a platform powering half a million active stores and $40bn in sales to date. Shopify offers an easy to set up an online store with secure unlimited hosting. There is a well stocked theme store, plus a guide on building custom themes for clients who want a bespoke design.
Shopify also allows you to sell through several other channels: Facebook, Messenger, Pinterest, Amazon, and embedded Buy Buttons. Not all features are available in all countries, for example Pinterest Buyable Pins are not available outside the US. Plans start at $29 per month plus credit card fees, and transaction fees for payment gateways other than Shopify’s own.
Cost: From $29 / month + fees
01-shopify

2. MAGENTO OPEN SOURCE

Magento Open Source, formerly known as Community Edition, is a free open source (obviously) platform built in PHP. It comes with a basic, configurable store to get you started. In theory, because it is open source, it is more flexible and customizable than other, hosted, platforms. This may mean getting your hands dirty with PHP, although there is a large community of developers providing all sorts of free and paid add-ons and themes.
Although the software is free, you need to provide your own hosting, and unlike hosted solutions, the security side of things is not taken care of. There are certain legal and PCI (payment card industry) requirements that must be met. To address this PayPal is the payment solution recommended by Magento.
Cost: Free
02-magento

3. OPENCART

OpenCart is another feature rich open source platform. It is module based which means extensions can be added easily. Like Magento, it is free but there is again the same responsibilty to provide secure hosting. OpenCart offers a longer list of payment gateways, and the option to add more through extensions.
This is a solution for those who like to tinker, and get stuck in to some development, and not one to let a client loose on.
Cost: Free
03-opencart

4. WOOCOMMERCE

WooCommerce is an official WordPress plugin that will add a store to your WordPress site—there was a time when WordPress was for blogging, now it will even make the tea and pass you a biscuit. WooCommerce is built to work with themes, including the yearly default WordPress theme. There is also a free official theme, Storefront, which comes in 14 different flavors.
Several payment gateways are available, such as PayPal and Stripe and direct payment is an option, although it is up to the site owner to provide the SSL and other PCI compliance criteria here.
WooCommerce is completely free to install and use. Rather confusingly, clicking on the ‘Get Started’ button on the WooCommerce home page takes you to the sign up for a WordPress.com account. This gives the impression that the commerce plugin is only available on wordpress.com. That is not the case, it can be installed via your WordPress admin just like any other plugin.
Cost: Free
04-woocommerce

5. EKM

EKM have been around since 2002, and although they are smaller than Shopify with 30,000 online shops, their sales to date of £5bn work out at a higher average sales rate per shop. They are squarely aimed at customers in the UK, although the actual stores sell internationally, with a couple of continental European offshoots.
Besides the usual list of features, themes, and payment options, EKM stress their customer support. You get a dedicated account manager free for the first three to six months, depending on the plan you choose. EKM is one of the pricier platforms, starting at £29.99 (+ VAT if applicable), but you are not paying separately for hosting, and the security is taken care of for you.
Cost: From £29.99 (approx $39) / month + fees
05-ekm

6. VOLUSION

Volusion is one of the less expensive hosted eCommerce platforms with a site builder to get up and running with. Prices start at $13.50 a month but that only allows you 100 products and bandwidth limited to 1GB. You also have to buy your own SSL if you want to use direct payments. If you use more than your allocated bandwidth you get charged, but this is instead of a per transaction charge.
Volusion also offer custom design services as well as theme help, and marketing services.
Cost: From $13.50 / month
06-volusion

7. BIGCOMMERCE

Another hosted platform, BigCommerce starts at $29.95 per month. That includes unlimited products, file storage, bandwidth and staff accounts, hosting, SSL certificate and online sales of up to $50k per year. There are no additional transaction fees for using any of the major payment gateways, and POS transactions can be integrated with the online store.
BigCommerce also offers embeddable Buy Buttons, and integration with Facebook Shop, Amazon, eBay, and Google Shopping.
Cost: From $29.92 / month
07-bigcommerce

8. SUPADUPA

SupaDupa is one of the newer kids on the block, and one of the cheapest of the hosted platforms. Plans start at £6 (approx. $8) per month with unlimited bandwidth and no transaction fees. Credit card gateway, unlimited products and storage, and SSL certificate are only available on the higher priced plans but at £19 per month (approx $25), that’s still pretty reasonable.
SupaDupa say they are not claiming to have a platform for everybody, it is aimed at design related or creative businesses. Design customization is limited on the lower plans but there are over 40 themes to choose from and a custom design service is available.
Cost: From £6 (approx $7.80) / month
08-supadupa

9. PRESTASHOP

PrestaShop is a free, open source platform. As with the other open source platforms mentioned, hosting is not provided and security—SSL certificates, PCI compliance etc—are your responsibility. There are a stack of payment methods available, and while not all of these modules are free, those for the big payment gateways such as PayPal and Stripe, are.
There is a well stocked theme store and a fairly active developer community. Training courses are available, and there are regular conferences and meetups.
Cost: Free
09-prestashop

10. LEMONSTAND

LemonStand starts at $19 per month with no transaction fees. This includes unlimited products, storage and bandwidth, but only 75 orders per month. They claim unmatched flexibility with design customization, including the use of your choice of frontend framework.
This platform seems to be aimed less at merchants directly and more at designers and developers who are looking to build customized eCommerce solutions for clients.
Cost: $19 / month
10-lemonstand

11. STRIPE

Stripe is a secure payment gateway that can be integrated with most good eCommerce platforms, or used on its own to take card payments directly using its own checkout. It can be used for card payments and some other payments methods, depending on country. There is a transaction fee, but no setup fee or subscription.
Stripe has extensions to integrate with a host of other applications to help with business admin, including Xero and Slack. Payments made through Stripe are typically paid out to your nominated bank account on a schedule based on your country and industry.
Cost: Fees
11-stripe

12. PAYPAL

Currently—probably—the best known online payment gateway to date, PayPal offers a range of payment solutions for businesses of all sizes. PayPal can be integrated with most eCommerce platforms or it can be used on its own by integrating a PayPal checkout, or embedding a PayPal button.
There are free and paid solutions and a transaction fee is charged the rate of which depends on the volume of monthly sales. Because of its high profile, PayPal is one of the more trusted payment options.
Payments made with a credit or debit card or from another PayPal account are available immediately and can be held in your PayPal wallet or withdrawn to your nominated bank account.
Cost: Fees
12-paypal

13. AUTHORIZE.NET

Authorize.Net payment gateway accepts all major credit cards as well as  Apple Pay, PayPal and Visa Checkout. There is a setup fee of $49 and a monthly fee of $25 on top of the transaction fee which varies depending on whether you use the payment gateway only or the full gateway with merchant account. This also includes the ability to take payments in person, over the phone, by mail or through mobile devices. You can use Simple Checkout buttons or integrate with a certified shopping cart.
Cost: $49 setup + $25 / month + fees
13-authorize

14. SNAPPPT

Snapppt allows your customers to shop via your Instagram feed. Or at least link directly to a specific item in your store to buy it. It’s from the people behind the SupaDupa platform, and integrates with SupaDupa stores, but also other platforms including Shopify.
Cost: Free
14-snapppt