Monday, 29 January 2018

Design A Portfolio Website That Lands You Clients: The Ultimate Guide

Portfolio site layout

The goal of any portfolio site is to sell your work to potential clients. That means you need a killer layout that’s easy to use & helps sell your work for you. In the past we’ve covered plenty of great portfolio sites mostly as inspiration galleries. But for this post I want to share some […]

The post Design A Portfolio Website That Lands You Clients: The Ultimate Guide appeared first on Vandelay Design.

from Vandelay Design

How to Design a Web App: A Showcase of 20 Designs

An intuitive, efficient web app will always be a pleasure to use.  However, in order to create a well-designed app, you need to look beyond color choice and excellent content.  You also need to be aware of user experience.  Otherwise, users will move on to your competition.

Understanding the rules of application design will enable you to create an effective product which will keep users coming back. 

Although an attractive design and a tool like Photoshop may seem to be all you need to create an application, this does not mean your product will be effective.  An application geared towards user experience should be your ultimate goal. 

How do you do this?

Read on for specific steps to follow and then look at our showcase for inspiration.

How to Design a Web App: A Showcase of 20 Designs

Speak your user’s language

Using familiar language on your User Interface makes your app familiar and easy to use.  If users need to learn a new language they will grow angry and frustrated.

Familiar user language includes:

Color (e.g. using red for error messages or green for ‘go’ or submit information.  Color sends out messages which will speak to your users, helping them to relate.

Icons (a shopping cart for purchases, envelopes for messages).  Icons are quick and easy to understand and speak a universal language.  Keeping your icons standard will help your users understand how to use your app.  This will make your app intuitive and easily relatable. 

Placing (headings at the top, continue button below a message or instruction).  When content is grouped together, and the format is familiar and easy to understand, your product will be effective. 

Group information

Speaking a user’s language means that users will be able to guess how to use your device, where to find control buttons and how information is grouped together. 

Connect information with color, font size or style, or group them in the same box.  When the layout is easy, and users can quickly locate the information they are looking for, your app will be easy to use. 

If you’re making a dashboard design, for example, structure everything where the user expects it to be.

Make your app simple to use

Your goal is to make your app simple and easy to use.  Tabs may be used to separate content (e.g. different sections of a newspaper).  They are familiar and simple to use.  However, overusing them could make your content messy.

Instead of using tabs to break up complicated content, simplify this content instead.  You could use subheadings, bullet points, and concise sentences in order to make your message simple. 

Keep it consistent

If users sometimes have to click save to store information, and at other times, has to trust that information will be automatically saved, you run the risk of creating confusion. 

Your users may not know when to save, or may not trust that information will automatically be saved.   Choosing one way to save information will give your app consistency.

Use labels for fields

When your user has to provide information to your site, this takes commitment.  Reduce the chance for errors to avoid frustration by labeling clearly. 

A new trend is to use placeholders (instructions placed inside the fields) to serve as tips to users.  This keeps the app clean looking.  However, when the user begins to type, the placeholder will disappear, and your user may wonder what data to submit. 

Use floating labels to assist your user with what do submit.  This will reduce the possibility of error and subsequent user frustration.

Assess the purpose of your features

When designing your app, question what your client needs each feature for, and how to create a result which is simple and easy to use.  Try to deliver a solution which will be adapted to the needs of your client.

Understanding how clients will use your app will add to your design.  An app used quickly, during spare time, while a client is on a lunch break will be different to a product used to pass the time while a client is waiting around. 

Ensure your app is easily used on a small screen and that the text is well placed so that it is easy to type or fill in forms.

Make use of tooltips

When you are creating an app, you want it to be simple and efficient.  However, you also want an attractive and aesthetic result which will enhance user enjoyment.  Using too many labels may spoil your app.  Instead of using labels, apply tooltips. 

Tooltips enable your user to explore icons and commit to actions, helping to find their way around the app.  However, they can be disabled when a user commits to an icon.  This keeps your app looking clean and uncomplicated.

Keep it together

Keep important information together, so that your user doesn’t have to try to remember information from one page to another.

If your user submits data on a page, don’t repeat the request on a different page.  Instead, allow the user to follow an action in simple steps which makes it easy to achieve the desired result.

Offer many ways of achieving a result

Offering many ways of achieving a result, by clicking on an icon to assists users to navigate your app and achieve the results they want.  Keeping your app dynamic or flexible will make for an efficient and enjoyable user experience. 

Create an opportunity for users to achieve results at their own pace, storing information as they go along.  This way your user can access the app during gaps where he has free time. 

Use modals sparingly

Modals have replaced pop-ups with bringing dialogue to users.  However, they can be distracting, and take up a lot of attention.  This might make your user disengage. 

To help users feel more in control, make sure modals are easily closed.  You could place a cross in the corner of your modal window.  Alternatively, give users the option to click on the main screen to close the modal. 

Use modals sparingly, and only when you need the user’s attention. 

Scrolls and folds in website apps

Access to information can cause web designers some anxiety.  Do users understand how to find information under accordion style folds?  Can they scroll in order to use find information?

If you make your information interesting enough, users will scroll to access more of the page.  Leave enough content under the fold to interest the user.  Once at the bottom of the page, they may be interested in exploring more information. 

The end of your page is the most important space to find complex information because it is only interested users who will make their way to the bottom.  Casual users will stay at the bottom of your app.

Showcase of web apps


Robo Advisor


Private Lessons

Gmail Redesign

Dashboard for University Students


Robo Advisors Projection List


Timeline Screen



Ending thoughts

Designing a fast, efficient and attractive app will ensure user engagement.  When designing your app, instead of simply focusing on appearance, work towards giving your users an intuitive experience from beginning to end, keeping your user in mind as you do so. 

Test your app while running through a busy shopping mall, ensure you can use it with one hand and have a look at text formatting and font size. 

Keep your user experience in mind, and you will create an application which is both efficient and intuitive.  This will keep your user satisfied, and create loyalty to your product. 

Also read: Common UX Mistakes and How to Avoid/Fix Them

The post How to Design a Web App: A Showcase of 20 Designs appeared first on SpyreStudios.

from SpyreStudios

How To Use Google’s Material Design On Your Own Site

Google Material Design is a major part of the modern web’s design language. This is especially true for mobile websites and apps. It’s a clean, legible design with visually distinct elements to draw the eye and make user interaction simple. Material design apps, by and large, use flat, paper-based designs that rely on graphic color and bold typography. Images are edge-to-edge, and icons have a stacked paper feel to them. On the z-axis, elements are all the same paper-thin width, casting visible and distinct shadows. You can learn more about Material Design’s guidelines from their official guide.

1. Start with a wireframe

A major part of Google’s Material Design is edge-to-edge color and images. Look at Google’s own web services at apps (the ones that use Material Design, anyway) and you’ll see that everywhere. You’ll also notice meaningful, plentiful whitespace. This most often contains the most important data, or the data that needs to be most legible: i.e., songs on Google Play Music or emails on Inbox. This isn’t the kind of thing you can just drop in to a pre-existing website, but you need to design from the start with that in mind. The easiest way to get a design that harmonizes with this approach is to start with a wireframe. If you’re not familiar with the term, a wireframe is a broadly empty page design that focuses on layout instead of content. Make sure your horizontal elements fill the whole page (or close to it). Draw your wireframe in big, legible chunks. If you’ve never worked on a wireframe, we have some great web-based wire framing tools you can start out with. You can also use a framework like Material UI to help out.

2. Stack elements vertically

Adopt a mobile-centric design philosophy. When organizing the elements on your page, don’t put too many elements side-by-side. Instead, your body content should occupy around 60% of your desktop layout’s width (but more like 90% on mobile). To aid in this pursuit, focus on working your way down the page instead of stacking things next to each other. This will help you adopt a mobile design language, with page elements stack on top of each other instead of next to each other, as is seen on desktop.

3. Add graphic colors

Once you’ve got the basics of your wireframe down, you can start adding colors. Material Design focuses on bold, extravagant uses of single colors. This graphic use of color draws the eye and helps the reader intuitively understand the design of the page. Looking at Google’s own Material Design pages, you can see that the top horizontal element often includes a full-width colored block. Adopt this strategy: it’s one of the most recognizable elements of Material Design. The color your choose should be bright, recognizable and, if possible, unique. Look through Google’s own apps and avoid picking any of the colors they use. Make sure that you do use a color that shows up decently on all screen types: it’s possible to use colors that look bad on cheaper mobile (or even desktop) displays, which you’d want to avoid. Also ensure that you use a similar or the same color as an accent on user interface elements, especially OK buttons or buttons to create new content, like a new email. This goes double if the icon is persistent.

4. Use whitespace for text or data

As much as bold color is a typical part of Google’s Material Design, whitespace is just as much part of the visual design language. You need to use considerable whitespace in your design to fit within the Material Design standards, as evidenced by reviewing Google’s own apps. It might be challenging to imagine this design, so it’s easiest to cop inspiration from one of the many Material Design apps Google and other developers have published. But, ideally, your colored interface will stop at the top of the page. Below that, the user will get plentiful whitespace. On top of this whitespace, we’ll see your users’ data. Maybe it’s bus times, maybe its messages, maybe its upcoming songs. Whatever it is, you’ll want to make sure that it’s on white and legible, in a sans-serif font.

5. Get bold typography

Bold typography doesn’t literally mean <strong>. It means creating typographic designs that use large text and numerals. These make the page’s function super clear, helping the reader understand what the most important data type is. On a weather app, for example, the current temperature should be gigantic. Look at some other apps, and you can see that sometimes this information appears comically large. That’s actually well in keeping with the Material Design ethos of making things super easy for the user to understand at a glance. You can include your H1 typography on top of your color block, and maybe a little H3 under your color block. Sans-serif is a must for Material Design, but feel free to play around with finding a unique font. This is especially true for data-based apps that might want interesting numerals. If you can’t find one you like, Roboto is generally the default English font for Material Design. Check out Material Design’s typography page for more info.

6. Use shadows

Material Design actually provides a fairly detailed guide to how shadows should work. There’s a concept called a “key light” which shines on the most important user interface element and casts a noticeably darker, better-defined shadow. Other stacked elements also have a shadow, but it’s softer and ambient. Also, this is a great time to mention that all elements in Material Design should be the same width, which is about “paper thin.” The idea behind Material Design is to emulate bold and graphic print designs, with paper stacked on top of paper. Don’t use elements that are thicker, and don’t let your shadows be of varying lengths. Use the “key light” to focus the user’s attention and ensure they see the most important element on the page.

7. Create a Material icon

Since Material Design is a mobile-first design language, creating Material Design icons is important. These use the same design language of the rest of material design, stacking colorful, single-depth shapes like paper cutouts to create delightful images. These are some of our favorite icon designs, and you can check out a whole icon gallery for inspiration (and use!) at the Material Design site.

You might also like the following post:

15 Quality Web-Based Applications to Create Mock-Ups and Wireframe

How to Build a Chrome Extension

A Little Help – Developing A Tutorial-Driven Website

The post How To Use Google’s Material Design On Your Own Site appeared first on SpyreStudios.

from SpyreStudios

Friday, 26 January 2018

5 Ways To Flaunt Your Films With A WordPress Site For Filmmakers

For filmmakers everywhere, spreading awareness about your movie is one of the most important parts of your work. Unfortunately, make independent filmmakers looking to make it to the major leagues of Hollywood fail to realize that websites are key to conveying a film’s idea.

An effective, secure WordPress website helps you set the tone for your creation and reach your market(s). Think of your film site as an extension of your creative product. It needs to represent and inform, and you should be just as proud of the film’s website as you are with the film itself. Here are five ways to flaunt your films with a WordPress site:


1) Use A Film-Inspired WordPress Theme

If you don’t have a design background, no worries. One of the best things about WordPress is that there are thousands of theme templates to choose from. With the right theme, you can create a stellar first impression for your movie. To steer you in the right direction, try looking into WordPress film themes. These themes are custom built for your use case and carry several design and features that make it simple to show your film in the best light.

The responsive Visual theme is a great example of themes designed specifically for movies. The landing page features a full-screen trailer, and when visitors scroll down, they’ll see movie-like credit font with information about the production. A slider menu bar leaves space for information about the cast and crew, a gallery, news, and purchase opportunities.


2) Remember Important Features

Think of your trailer as the business plan of film. It should be front and center, not buried among other pages. Otherwise, your visitor may have to click through to view it and you could easily lose them in the process. Additionally, when it comes to film, there are several other features you need to consider, such as a press kit.

According to film festival Raindance, this is the most important element of the filmmaking process. The press kit gives your film marketable value, and is used to send to journalists and acquisitions executives. Of course, as a filmmaker, you’ll be sending a lot of these out yourself, but you should be sure to include it in your WordPress website, too. You’ll also want to list any awards or nominations you’ve received.


3) Design On Brand

Your website should be on brand with your film. Even pre-made movie themes are customizable enough to change the aesthetics of the design. One theme has plenty of branding potential, and can easily be altered to create dozens of different visions. For example, if it’s a horror film, the design should be dark and brooding. Take a look at existing video websites to help you understand what others are doing to achieve film branding on their sites. For example, James Franco’s “The Disaster Movie has a great website with interactive elements and does a phenomenal job with telling a story.


4) Add Reviews & Screening Times

Your website should be informative and engaging. Any piece of information your visitor might want––whether they’re a potential viewer or industry insider––should be readily available. Take advantage of WordPress plugins like Theatre to help display showtimes and locations. This is particularly important for independent filmmakers who might have limited showtimes and ticket availability. Check out the “Upcoming Screenings” portion of this film site to see how other filmmakers are listing their screenings. You’ll also want to show reviews for your films, especially if the movie has been garnering a positive reaction from viewers.


5) Monetize Your WordPress Site

Lastly, there are different ways to monetize your WordPress site for films, and these are areas you should consider. Filmmakers already have it tough enough trying to produce art that sells, so when an opportunity comes along to monetize work, you should certainly look into it.


Of course, one of the easiest ways to do this is to ask for donations. Setting up a donation button is extremely simple, and doesn’t hurt to incorporate. This will allow visitors to help support the film, whether they’re a family member or friend, or simply a film enthusiast looking to contribute to a cause. If you do plan to accept donations, be sure to tell your story and explain what you intend to do with your donation funds.


You can also sell relatable products on your site. This includes film memorabilia, DVDs, or digital downloads. A quick search on Etsy of the indie film “The Eternal Sunshine of the Spotless Mind” shows different products surrounding the film theme. You can do the same for your film and generate additional revenue.



Read More at 5 Ways To Flaunt Your Films With A WordPress Site For Filmmakers

from Web Design Ledger

Wednesday, 24 January 2018

Are You a Freelance Web Designer? Improve Productivity with These 3 Techniques

Productivity, or the lack of it, seems to be a major issue for many freelancers. Simply working harder may be one way to increase productivity. But it has its limitations and some definite drawbacks.

Working smarter makes more sense. However, only when one knows what “smarter” really involves.

If you’ve already tried several approaches, without a lot of success, not to worry. We’ve compiled this productivity guide to help you along. It’s a compilation of three easy-to-follow techniques, and you can start right away!

Productivity Technique #1: Use Be Theme’s pre-built websites to finish a client’s job in 4 hours

There’s no better way to start than with Be Theme. This is a premium, multipurpose WordPress theme. It features a gallery of more than 300 pre-built websites, the largest selection of its kind on the market.

With Be, you can forget about any need for wireframing. Also, there’s no need for coding. And, you won’t be wasting valuable time searching for a suitable theme to get your next project started. You’ll be able to find a theme that offers the perfect solution to your website needs in minutes. Once you’ve located it, you can install it with a single click.

When it comes down to actually building your website, Be Theme is exactly what you need. Be’s collection of powerful core features and tools will do all the heavy lifting.

At the same time, Be will give you all the design elements and options you’ll ever need. You can, in fact, pleasantly surprise a client. How? By creating an attractive, high-performance, one-of-a-kind website in as little as 4 hours.

That is not it! Once you’ve selected your pre-built website, you can, if you wish, give a client a quick preview of what he/she can expect. Some clients expect this, any client will love it.

Here’s what several Be Theme users have to say:

Here are 10 Be Theme pre-built designs you can use to create a full website in a few short hours

You could pick almost any Be Theme pre-built website, and get a good indication of the head start its design layout, content structure, and embedded functionality will give your web design project. Even better, check these 10 out:

Be Salmon

  • Building a food-oriented website? Using large images like these to entice users is a must. This pre-built website also offers an interactive menu and a customer testimonials section.


  • To score with visitors, a website for a business of this type needs to have a bold, professional look, and feature examples such as before and after images, and pricing, to help sell the services rendered.


  • This pre-built website features a standard menu for meetings and events and a clean design that makes navigation easier. A bonus: a countdown clock for a major happening.


  • A soft, luxurious design like the one featured in this pre-built website is a must for the health and beauty niche. Setting up an eShop? An eShop is already integrated.


  • Bold imagery & color combinations speak to the audience this pre-built website targets. It also features an integrated eShop, and the intuitive icons make navigation as easy as can be.


  • A hip design is the best design when it comes to attracting the young crowd. This pre-built website design is anything but sedate, with the integrated video and audio player adding to the good vibes.


  • Give your restaurant-owning client a pleasant surprise in the form of an award-winning website highlighted by these large images inside the online menu. Top it off with a gallery of images showing off the establishment.


  • An impressive gallery highlights this pre-built website destined for a creative, or creative agency. The overall design is simple and straightforward, and an integrated presentation video caps it all off.


  • The standard intuitive menu for eLearning platforms and the large thumbnails combine to help the user find his/her way. This design can easily be customized to perfectly fit any type of training or coursework structure.


  • The sharp, simple design, clean structure, and well-organized content make navigation easy in this pre-built website for a clinic. Note how the professional look is perfect for a niche of this type.

Productivity Technique #2: Be more flexible instead of forcing yourself into a strict schedule

Being focused firmly on the task at hand should not be daunting. It doesn’t mean following a nose-to-the-grindstone approach to your work.

You want to work to a schedule, and you want to have a set of tasks or objectives in place. However, a disciplined approach that’s overly strict can be counterproductive. It can even have a stultifying effect on your work ethic.

Try these out instead:

  • When you hit a difficult spot, take a breather. This could be taking a walk around the block, taking a walk in the park with your dog, or having a cup of coffee with a friend. Doing so will work wonders for your brain; which will probably continue to work the problem.
  • Make a to-do list – a general one. To-do lists are important. Yet, if they get too lengthy and detailed you’ll often find yourself trying to do too much at once. List a task or two that could easily be carried over to, or finished, the next day if necessary.

If you insist on working to a tight, detailed schedule, you might as well be commuting to and from an office.

Productivity Technique #3: Calculate how much productivity costs you every day

You could keep track of the time you save as you work to become more efficient. Or, you could track your daily output to measure your productivity gains. However, there’s a much easier, and more effective way to motivate yourself.

Whether you charge by the hour, or by the task, you should be able to estimate what your average hourly earnings are. Now, start keeping track of hours you are wasting each day.

Note: Taking a break, walking your dog, etc., doesn’t count. In fact, you should follow the recommended practice of taking a 5 to 10-minute break every 50 minutes or so. And, you don’t want to include those breaks either.

Add up the wasted hours and multiply them by your hourly pay, and you’ll see how much that wasted time is costing you. Write it down on a sticky note, to keep in front of you. That note will prove to be an excellent motivator and productivity enhancer.


Putting these 3 simple techniques into practice will definitely help you a lot. They can work wonders to increase your productivity as a freelance web designer. and you don’t have to turn your lifestyle inside out to follow them.

  • Use Be Theme to put together a website in 4 hours. Be Theme provides an efficient, effective way to create websites and saves you a ton of time in the process
  • Work to a more flexible schedule. Don’t force yourself into a strict schedule as a challenge. You’ve nothing to prove.
  • Calculate how much procrastination is costing you. Once you know the answer, you’ll do something about it!

These simple, straightforward methods can be used by anyone to make the most out of their time.

Read More at Are You a Freelance Web Designer? Improve Productivity with These 3 Techniques

from Web Design Ledger

Tricks to Overcome Common Development Problems

Everyone runs into a web development crisis at some point while working on a project. Either it goes over budget, you find unexpected security flaws, or you just run into a roadblock that keeps you from creating the kind of site you want your clients and users to appreciate. Knowing some tricks to overcome common web development problems can help you mitigate them before they appear.

Set Up a Roadmap

Basic information about your site should be easily available for anyone who navigates to it. Even people who aren’t web-savvy should be able to find it. When you’re working on developing a site, make sure you have a plan for your user experience. It’s one of the major factors that determines how successful the site is.

Sometimes it’s tempting to use cutting-edge development tools and features when the old standbys will do just as well. That’s not to say that you shouldn’t use modern technology or make the site you’re developing interesting and interactive. Just be aware of your audience and their capabilities. If you sit down early and make a plan for how a user will navigate the site, you might be able to avoid any problems that you have to later spend time to correct.

Use Responsive Design

You can’t design a site for every device that a person is going to access it on — that’s why responsive design is so important. If you aren’t planning for a responsive site now, consider going back and including those options. Responsive design is a type of design that allows the site to adapt to the device on which a person is viewing it. It’s important because a standard design might look great on a browser, but will appear messy and not optimized on a mobile device.

Not only does responsive design act as a positive ranking signal for SEO purposes, but it also improves user experience. If a user on iOS, a user on Android, and someone logging in from a computer browser can all view an optimized, professional site that reacts to their device by displaying things in the proper size, then they’re going to enjoy being on your site more.

Include All Extras

Before starting your design process, it’s essential to know what you want to add to your site. For example, if you’re making an e-commerce site, you’ll have to include places on the site for listings, a cart, a payment processor, and perhaps a place to leave reviews. Knowing everything you want to add at the beginning of the process will help you design your site more cleanly because you can be aware of how everything will fit.

Think of it this way — if you’re putting together a puzzle, you want to have an idea of how the final design will look. If you just start putting pieces together, it’s going to be much harder to achieve a positive final product. It’s the same for web development. Knowing what pieces you have and how you want the final product to look from the beginning will guide your process and help you create a better website.

Verify Everything

As Demir Selmanovic of Toptal points out, you absolutely have to authorize everything a user on your site does. When someone logs in, you might think that’s enough verification of their identity to access everything they’re entitled to. It’s not that simple, though. Once a person is logged in, a little tech know-how might allow them to access things they aren’t authorized to see or change.

If you make sure that you authorize each type of user input or action on your site, you’re going to have less security vulnerabilities. Just identifying a user when they log in isn’t enough — you need to make sure that you’re managing permissions for the user while they’re logged in as well. A little time now can save you and your users a lot of problems down the road.

Find Shortcuts

Taking shortcuts isn’t always smart — but sometimes they can save time without cutting any corners. If there are tasks you’re doing by hand, consider checking to see whether there are any tasks you can do that will save time. For example, you can convert PSD to HTML online and save yourself the trouble of having to do it by hand.

You should never take a shortcut that makes your work worse. At the same time, though, there are plenty of shortcuts that will give you additional time on the parts of your work that need a personal touch. As you find shortcuts that benefit your workflow, make sure to keep a note of them so that you can go back and use them again.

Make a Budget

One thing that always holds true when it comes to web development is that clients might not expect what different options cost. It’s important to create a budget early on and make sure each person you work for understands how the price will change if they decide they want something else later on.

One way to do that is to create a budget showing how different options affect the price. It makes your expectations clear and helps your client to understand up front whether they can afford what they’re asking for. There’s a major difference between developing a basic informative homepage and creating a site with a mobile app that requires forums, sign ups, or file sharing. If your client wants a custom CSS navigation menu, explain from the beginning that it will cost more than using something stock.

Whether you’re finding great shortcuts to save time or saving yourself a heap of trouble later by setting up budgets for your clients, a little planning will save hours of frustration. The most important thing you can do is sit down and plan your project from beginning to end before you actually begin doing the development work itself. That way you’re aware of problems that can arise and are ready to respond to them if and when they occur.

The post Tricks to Overcome Common Development Problems appeared first on SpyreStudios.

from SpyreStudios