64 search results for “Simon Heaton”

5 Websites to Download Free Subtle Textures and Gradients for Flat Design 2.0

5 Websites to Download Free Subtle Textures and Gradients for Flat Design 2.0

5 Websites to Download Free Subtle Textures: Email

As we move deeper into 2016, we’re beginning to see a trend towards something the industry has dubbed flat design 2.0 – the subtle usage of three-dimensionality in websites to create depth, and increase the saliency of flat focal elements.

With this in mind, we’ve put together a list of our favorite websites for downloading free, high-quality textures and gradients that work beautifully with flat design 2.0.

Continue reading

Announcing the New Shopify Plus Partner Program

Announcing the New Shopify Plus Partner Program

Plus Partner Program: Email

The high-volume merchants who use Shopify Plus are faced with a unique set of challenges, and their success often relies upon strategic partnerships that help drive their online business to the next level.

That's why we’re proud to announce the new Shopify Plus Partner Program — a way to connect directly with our high-volume Shopify Plus merchants. 

Continue reading

A Web Designer’s Guide to Pricing Strategies

A Web Designer’s Guide to Pricing Strategies

Web Designer's Pricing Strategies: Email

How you choose to price your design or development work can significantly impact the financial success of your business. Charge too little and you won’t cover your operating costs. Charge too much and you’ll never land a client. 

Today, we'll walk through three pricing strategies and identify which ones could help you take your design or development business to new heights.

Continue reading

An In-Depth Look Into Designing a Shopify Theme

An In-Depth Look Into Designing a Shopify Theme

Label Theme HeroCommitting to build a Shopify Theme is quite the endeavor. It can quickly become a long-term project that demands hard work, dedication, and an openness to change. And with thousands of merchants visiting the Shopify Theme Store each month to discover the perfect look for their store, it can be a lucrative avenue for any designer or developer to pursue. The challenge is how to stand out in a crowd.

Learn more about Shopify Theme development and using Shopify metafields to build great themes for your clients. And to help spruce up your proposals, check out our list of funny lorem ipsum generators.

To give you an idea of what it takes to design, develop, and publish a Shopify Theme, we sat down with Giraffic Themes to chat about their experience building the newest addition to the Shopify Theme Store: Label.

You might also like: 10 Top Questions About Developing Shopify Themes Answered

Who is Giraffic Themes?                              

Label Theme Giraffic Based out of Melbourne, Australia, Giraffic Themes is the brainchild of front-end developer and designer William Rainbird.

Rainbird started Giraffic Themes five years ago, when the majority of his work was focused on template design for Tumblr.

“Theme design really just started as a side project,” he says. “I was already doing front-end work for a software company but wanted to start earning some passive income.” His side project really started to see success when he concentrated his efforts on building templates for an oft-overlooked audience: creators.  

When Will was still working with Tumblr, he noticed there weren’t many templates catering to specific professions like musicians, photographers, chefs, and publishers. Most offered little to no additional functionality outside of the core template pages, which wouldn’t suffice for his niche audience who often needed unique technical requirements embedded into their websites. Thus he began designing templates with built-in integrations for music players, social media feeds, and calendar capabilities.

Despite the success Rainbird has seen on Tumblr over the past few years, he became hungry for a project that would challenge his technical skill. He began working for the cosmetic brand, and 2014-2015 Ecommerce Design Awards winner, Frank Body as their lead developer where he was first exposed to Shopify. This new role allowed him to quickly become familiar with the platform and that was when the idea for the Label Shopify Theme was born.

Label: A minimal Shopify Theme for creators

Label Theme 2Label is a Shopify Theme designed for musicians, publishers, and creators of all shapes and sizes. Its focus on simplicity makes it a great solution for merchants who offer a small number of products, but it can also be adapted for those with larger product lines and collections.

But despite its smooth appearance, Rainbird admits there’s more to the theme than meets the eye.

“Even though it looks simple, it definitely took me a few weeks and plenty of late evenings to get things perfect,” he says. “I was working full-time at Frank Body, and Label was something that I was doing outside of my 9 to 5.”

That dedication to perfection is apparent in Label’s design. The theme’s minimalistic layout not only establishes an elegant and clean interface, but also helps drive user focus towards products and calls-to-action.

“I noticed that most templates targeting musicians and creators on other platforms were overloaded with information,” says Rainbird. “I decided to strip Label down to focus on the core ecommerce elements, which I think resulted in a much more refined user experience.”

At its core, Label is all about the homepage, which features up to nine customizable modules. Merchants have the ability to include a Single Product Feature to highlight their best-selling or newest product for customers who arrive onsite. It also incorporates a few unique functionalities typically used by creative merchants, including an embedded Instagram integration as well as a calendar feature to showcase tour dates or events.

Label’s simple structure also translates exceptionally well to mobile. The stacked layout and prominent product imagery feels seamless on a mobile device, and customers can easily add products to their cart straight from the homepage with only two taps. This eliminates the hassle of navigating too deeply into the website for users who shop on phones or tablets.Label Mobile ScreensLike most Shopify Themes, Label comes in three distinct styles: Rainbird has named his Record, Create, and Publish. Each style features a unique style and tone that makes Label extremely functional for a variety of brands.

“Development was a lot more complicated than design since each style is so different from one another,” he explained, “but by keeping things simple I was able to circumvent a lot of those challenges early on, and the styles really stand on their own.” 

Let’s take a look at Label’s three distinct styles.

Record

Label Theme RecordRecord was the first style Rainbird designed for Label. The look and feel was largely inspired by his previous work on Tumblr, but without all the bells and whistles. By focusing the design around one core product and a few secondary pieces of information, Record was built for a specific audience: musicians and record labels.

Create

Label Theme CreateRainbird found inspiration for Create from his friend’s cap business. With its emphasis on multiple products, the design is reminiscent of the typical apparel brand site. In its original state, Create is designed for low inventory or single product stores, but it can be adapted to accommodate stores with much larger product collections.

Publish

Label-Theme-PublishThe initial idea for the Publish style was to build something that catered to the needs of small publishers or digital good retailers — a segment Rainbird noticed was underserved in the Shopify Theme Store. Its minimal style features a prominent Product Feature Image as well as a video integration functionality.

You might also like: An Introduction to Theme Options

Giraffic Themes’ advice for first-time theme developers

A unique set of challenges emerged when Giraffic Themes transitioned from Tumblr to Shopify theme development. Designing for ecommerce requires an increased focus on technical functionality and usability when compared to content-based sites alone.

There were many lessons learned when building out Label. Here are Giraffic Themes’ top three pieces of advice for first-time Shopify Theme developers.

1. Discover market gaps

When Giraffic Themes launched, Rainbird knew that his success would be tied to his ability to identify and solve problems.

“Before you even start prototyping an idea, you should look at the market and identify clear gaps,” he says. “Research is a major part of my design process.”

If you’re thinking of designing a new theme for Shopify, start by conducting some preliminary research into the current Theme Store offerings. Try to identify what’s already listed and what’s missing — this could be a specific niche audience or industry, a certain product type or inventory size, or just a cutting-edge design layout. Then use that inspiration to build something that looks, feels, and functions differently than anything else currently available.

We’ve put together a Theme Brief Template to help ensure you’ve identified an appropriate market gap before beginning your design work.

2. Build for flexibility and adaptability

It’s rare to find a merchant who purchases a theme and uses it as-is. Most want to tweak some parts, remove others, and ultimately make it their own.

“Building for flexibility within a template is a tough problem to tackle,” says Rainbird, “You need to consider that people are going to want to alter what you’ve built once they’ve installed it.”

For ecommerce templates, Rainbird suggests focusing on product presentation and accessibility over other more niche features. Try to keep things simple by reducing theme settings and limiting options. Not only will this reduce the potential for performance issues, but it can help you build a theme that is flexible and user-friendly.

He also suggests designing and developing your theme concurrently. This may allow you to identify usability issues in your theme during the design process, rather than after. Adopting an iterative approach ensures you know that what you’re building will work smoothly for merchants wanting to alter or remove anything when applying the theme to their store.

3. Design for the user and the merchant

Rainbird’s biggest piece of advice is to ensure your design is as accessible for the merchant as it is for their customers.

“At first I kind of focused on Label’s design solely from the user’s perspective,” he says. “But I quickly learned that it’s just as important, if not more, for a theme to be easily used by the store owner, and that meant keeping things simple.”

This insight radically shaped the direction of Label, which was originally conceived with nearly 400 theme options. The developer was faced with a lot of hard decisions about what to include and what to remove, but by stripping out most of the additional functionality, Label ended up becoming much cleaner and easier to use for both the user and the merchant.

When you’re working on your own theme, try to put yourself in the merchant’s shoes. Think about how they are going to use the theme and identify what’s going to make their life easier or more difficult. Remember: creative and unique features are only useful when they don’t get in the way, so try to cut out the clutter from your theme design.

Looking to build your first Shopify Theme?

Are you thinking about building a Shopify Theme for the Theme Store? Check out our list of Essential Tips for Building Your First Shopify Theme and get started on the right track!

What have you learned building Shopify Themes? Share your insights below!

You might also like: 4 Theme Features Every Client Will Ask For

Continue reading

How to Write a Design Brief to Keep Your Web Design Projects On Track

How to Write a Design Brief to Keep Your Web Design Projects On Track

Design-brief-heroOver the past few years, there’s been a lot of talk about the design brief. Ever since R/GA’s controversial presentation at the Cannes Lions International Festival of Creativity in 2014, creatives around the world have been debating whether or not briefs are still relevant in the design, development, and media industries.

But briefs are far more important than R/GA’s talk led on. They are an integral step when creating a strategic approach to project coordination. When effectively written, a design brief will not only allow you to identify and avoid roadblocks early on, but also help smooth out and speed up your prototyping and design and development process altogether (and check out our resources on rapid prototyping and some great prototyping tools).

Whether you’ve used briefs in the past or not, you should consider adding them to every project’s workflow. Here’s everything you need to know about writing a strategic design brief to keep yourself organized and delight your clients (need some inspiration? Check out an example of a great web design portfolio in our roundup article).

Grow your business with the Shopify Partner Program

Whether you offer marketing, customization, or web design and development services, the Shopify Partner Program will set you up for success. Join for free and access revenue share opportunities, tools to grow your business, and a passionate commerce community.

Sign up

What exactly is a design brief?

A design brief is a project management document that allows you to identify the scope, scale, and core details of your upcoming design project. Populated with the right information, the design brief has the potential to be one of your most powerful tools. It can be used to inform design decisions and effectively guide the overall workflow of your project; from conception to completion.

While every designer and agency tackles briefs in their own way, you’ll get the most out of it if you create yours collaboratively with your client at the onset of a project. Working on your brief this way allows you to clarify goals and objectives, receive input from important stakeholders, and, ultimately, hold both parties accountable for the final product.

If you and your clients have reached consensus before any work begins, you’ll likely avoid many unnecessary revisions or “We didn’t ask for that” moments during and after the project.

Here are a few other benefits of using design briefs in your projects:

  • Provides designers the necessary insight, background, and foundation for the effective creation of the visual design
  • Offers your team a more detailed picture of the client’s expectations, giving you everything you need to delight them
  • Helps keep individual contributors on track, while keeping the project on time and on budget
  • Gives the client a sense of involvement in the process, and comfort that the project is properly understood
  • Provides you with all design specs upfront
  • Helps you understand your client’s taste and identify their “must not-haves” for the project

Your design brief has value even after the completion of your project. If you’ve taken the time to draft a comprehensive brief, you’ll be able to use it as the basis for a case study to use in future pitches. If you’re unfamiliar with how to do this, check out our detailed walkthrough on how to write a web design case study.

Template Icon

The anatomy of a design brief

Briefs can come in a variety of shapes and sizes depending on the type of project you’re working on and the client you’re working with. To give you a sense of what to include, here are the core sections of an effective design brief.

1. Company profile

You should always ensure your briefs include an overview of your client’s business. This ensures that all members of your team are familiar with your client, their brand, and any internal factors that can influence the direction or success of the project.

Here are the key elements to include in this section:

  • Company details including name, industry, product lines, etc.
  • Brand differentiator and/or unique selling proposition
  • Brand mission, vision, values, and messaging
  • Key stakeholders, contributors, and points of contact within the business
  • List of direct and indirect competitors

When working with larger clients — especially when projects involve multiple stakeholders — it can be beneficial to formally acknowledge who within the organization has final approval for the project.

2. Project overview

The project overview is where you should provide a detailed description of the project that includes as much context and background as possible. When initially meeting with your client, try to formulate this section by asking the questions: “What are you doing?” and “Why are you doing it?”

The what is simple. Your overview should define the scope and scale of the project and its deliverables. Are you building something new? Are you redesigning something that exists? What other assets does the client expect at the completion of the project? These are all things that should be covered in this section.

The why is a little more complex. You should try to answer this question by identifying the design problem(s) your client faces that necessitated this project. Sometimes, by digging a little deeper into the why, you can discover alternative solutions that strategically meet the needs of your clients.

3. Goals and objectives

Designing websites may be a core offering that is central to your business, but to a client (especially those in ecommerce), a website is their business. In numbers or plain language, provide measurable outcomes for what this project is trying to achieve.

Goals reflect the overarching purpose of your project, while objectives highlight the granular methods in achieving that goal. Some sample examples of goals and their corresponding objectives for a website build or redesign could be:

The client wants more traffic to their website

  • Increase the amount of weekly sessions by 20% by X date.
  • Grow proportion of new monthly traffic to 40% of total by X date.

The client is looking to drive more revenue from their website

  • Increase daily revenue by 50% by X date.
  • Grow the total average order amount by 25% by X date.
  • Reduce cart abandonment by 15% by X date.

The client wants to increase engagement with their online content

  • Reduce average bounce rates by 10% by X date.
  • Increase the average number of pages viewed per session by 25% by X date.
  • Increase average time on page per user by 15% by X date.

By establishing goals and objectives up front, you’re not only suited to make more informed decisions around your design, but you’re also better armed to prove your value and worth to the client outside of the visual aesthetics of their website.

4. Target audience

Another way to inform your design decisions is to develop a solid understanding of the users who will be interacting with your client’s website.

If you’re lucky, your client will already be equipped with relevant research about their target audience and be willing to share it with you. However, not all business owners will have this information. If you find yourself in this circumstance, you have two options. You can try to use this opportunity to offer user research services as a value-add to the project. If they don’t bite, try asking them who their ideal customer is and work together to build an audience persona through discussion.

Your audience persona should include demographics such as age and gender, as well as psychographics like media consumption habits. This information can unveil important details about what resonates most with your client’s customers online. Are they apt to use mobile more than desktop? Do certain colors resonate more with their lifestyle?

Hopefully by defining their audience in your design brief, you’ll be armed to make informed decisions during design.

5. Design requirements

By including specific design requirements in your design brief, you can ensure you and your team has everything needed to work efficiently and meet client expectations. These details will not only round out your brief, but will also ensure that you don’t find yourself redesigning once you receive specs after the fact.

While requirements may vary for each project, you can include any of the following details about your deliverables:

  • Asset dimensions/resolutions
  • File formats
  • Required color palette
  • Image assets to be included
  • Associated copy documents

It is also worthwhile to include any reference materials in this section. These could include brand guidelines, mockups, moodboards, and anything else you feel could assist with the completion of the project. The more thorough your supporting documentation is, the less chance you’ll run into roadblocks while working through the design itself.

6. Budget and schedule

If you work in an agency, budgets and schedules are often seen as an afterthought and left for the client services team to deal with. However, these project components are just as vital for creatives as they are for your account services counterparts, and are unignorable for those of you working as freelancers.

The budget

Having a clear understanding of your client’s budget allows you to effectively manage their expectations as to what their money can get them, while also controlling how your team uses their time. When initially meeting with your client to scope out their job, make sure you allocate budget across all disciplines: research, design, copywriting, development, coordination, testing, and review. That way, you’re much more likely to avoid scope creep.

Without an explicit budget, it can be easy for you or your team to dive deep into a job and lose track of how many billable hours you’ve spent. To help avoid this type of situation, I also recommend using a time tracking app to help stay within the budgetary limits of the project.

The schedule

Projects need to stay on time to stay profitable — that’s why schedules are a must-have for your briefs. Your schedule should be realistic and account for potential changes or unexpected obstacles.

An effective schedule should not only highlight the final deadline, but also identify any progress milestones between the onset and endpoint of the project. It is crucial that your team can mutually anticipate completion dates for concepts, final designs, development work, and review periods.

While schedules are vital for keeping your team on track, they can also be valuable for your clients. Some clients you’ll work with won’t know how long it takes to research, design, and build a website. Thus, it’s important to set the expectation of what’s realistic and possible with them when creating your design brief. This, just like the entire design brief, ensures your team and client are on the same page from the get-go.

You might also like: The 7 Best Free Shopify Resources and Tools for Front-End Developers

Start introducing the design brief into your projects

The design brief has the potential to be one of your most valuable project management tools. Try to incorporate these tips into your design or development workflow so your projects begin with a strategic start.

We’ve put together a sample design brief template that you can use as your starting point for each project you work on. Feel free to alter it as you wish and make it your own. Download below and let us know what you think!

Template Icon

Continue reading

Grow your business with the Shopify Partner Program

Learn more