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.
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.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
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.
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.
The post How to Design a Web App: A Showcase of 20 Designs appeared first on SpyreStudios.
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.
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.
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.
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.
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.
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.
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.
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:
The post How To Use Google’s Material Design On Your Own Site appeared first on SpyreStudios.
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
