Websites for iPhone and iPad apps are always a great source for creative inspiration as the projects often allow for the designers to go to town and create a beautiful design to promote the app. This showcase rounds up 35 of the most outstanding iPad app websites. Common traits include large imagery of the iPad device, subtle textures and plenty of white space around well-presented content.
Typography on the web comes in two formats; firstly there’s the classic image replacement technique which allows for beautiful typographic designs, but it lacks the technical wow factor. Then there are true examples of web typography where designers wrangle with browsers to manipulate HTML rendered type in impressive ways, but while browsers and web technologies are continuously improving, this method often lacks in the visual flair that is achieved when designing typography in Photoshop and exporting it as an image. Both techniques result in equally inspiring web designs, so today’s showcase features a huge collection of sites with all kinds of web typography.
As one of the core design principles, typography can really make or break a website design. Despite recent advances in web type technology, we’re still fairly limited when it comes to creative typography layouts, meaning image replacement techniques are still common, but these days we have a massive choice when it comes to selecting fonts for our designs.
This post showcases 50 website designs that all feature beautiful typography in a creative way, this might be through elegant typographic layouts or perfectly typeset combinations of styles to create visually pleasing pages.
This site uses huge white typography on a dark background to lay out important information to their readers. You’ll notice that this is also an interactive site that uses animations and gives you a white trail as you hover your mouse.
Their good taste for typography resulted in a nice and minimalist web design that uses horizontal bands along the way. If you’ll keep scrolling you’ll find out they’re a very dedicated brand strategy and design studio.
The Cut has their name as the first thing a reader sees and goes on with laying out important information about who they are and what they do. This is another way of using typography in your next project.
Giflan Design’s aim is to take your ideas and help you in making them big. You’ll notice that their page surely expresses their taste for innovation and good design through typography, slideshows, and web layout.
This is yet another example of making your design look sensitive and clean through simple images and typography. The large fonts are overlayed on the blurred, sepia-filtered images, and this makes the text easy to read and eye-catching.
This website presents Luke Stephenson’s epic adventure and the world of 99 ice creams. This page has a clean and elegant design and it is a good example of choosing the right typography for your project.
This website also uses huge typography in a horizontal layout as the first thing a reader sees. Scrolling you’ll notice that the style, font, and colors change making the page look even more interesting.
Blank’s aim is towards innovative and creative solutions that best suit their clients’ needs. This is a business card website that uses typography to lay out only the important information about their business.
With a minimalist design, Jason James’s website shows a great taste in typography. It’s not visually-oriented at all, but the well-chosen fonts and perfect typeface pairings make it a good example for this list.
Electric Mainline also uses huge white typography in their header but this time on a pale pink background. The gradient background is a really nice touch and the large, bold font is definitely an eye-grabber!
Planet Propaganda’s website gives typography a more creative look trough the way the menu is built. The great fonts are combined with interesting vector graphic elements and give cool distortions to create a dynamic concept.
This website uses horizontal bands to lay out a vertical slideshow of typography that comes in different shapes and colours. The texts are the main attraction of this design, so the fonts are very well chosen.
Motion uses typography in different shapes and colours to give their website a dynamic look. The fonts are vintage-inspired and very well paired! The all caps fonts are perfectly paired with their regular, serif counterparts.
On this website, the use of typography is done in a creative and unique way. This website has a lot of cool projects you can check out. The graphics, colors and images are very well created and match the overall branding.
You can design a poster with the theme of Design for Good or you can simply have a look on this interesting page. This is yet another good example of creative ways of using typography in your next project.
API documentation is the number one reference for anyone implementing your API, and it can profoundly influence the developer experience. Because it describes what services an application programming interface offers and how to use those services, your documentation will inevitably create an impression about your product—for better or for worse.
In this two-part series I share what I’ve learned about API documentation. This part discusses the basics to help you create good API docs, while in part two, Ten Extras for Great API Documentation, I’ll show you additional ways to improve and fine-tune your documentation.
Know your audience
Knowing who you address with your writing and how you can best support them will help you make decisions about the design, structure, and language of your docs. You will have to know who visits your API documentation and what they want to use it for.
Your API documentation will probably be visited and used by the following audiences.
Based on their skills, experience, and role in projects, developers will generally be the largest and most diverse group. They’ll be using your docs in different ways.
At Pronovix, we started conducting developer portal workshops with our clients to help them learn more about what developers need and how to best support their work—and what they’re really looking for in API documentation. This is also supported by solid research, such as the findings published in Stephanie Steinhardt’s article following a two-year research program at Merseburg University of Applied Sciences.
Newcomers: Developers lacking previous experience with your API tend to need the most support. They will take advantage of quickstart guides that encourage them to start using your API—clear, concise, step-by-step tutorials for the most important topics, and sample code and examples to help them understand how to use it in real projects. If you can make onboarding pleasant for newcomers, they will be more likely to devote themselves to learning every nuance of your API.
External developers: Developers already working with your API will come back repeatedly to your docs and use them as reference material. They will need quick information on all the functionality your API offers, structured in an easy to understand way to help them quickly find what they need.
Debuggers: Developers using your API will encounter errors from time to time and use your documentation to analyze the responses and errors that crop up.
Internal developers: API providers tend to focus so much on their external audience that they forget about their own developers; internal teams working on the API will use the API documentation, as well.
These are just the most common use cases.
Decision makers like CTOs and product managers will also check out your API documentation and evaluate your API. They need to determine whether your API will be a good fit for their project or not, so it’s crucial to your business that this group can easily and quickly find what they’re looking for.
Although not as common, journalists, technical writers, support staff, developer evangelists, and even your competition might read your API documentation.
Remember the purpose of documentation
The foundation of your API documentation is a clear explanation of every call and parameter.
As a bare minimum, you should describe in detail:
what each call in your API does
each parameter and all of their possible values, including their types, formatting, rules, and whether or not they are required.
People won’t read your API documentation in order, and you can’t predict which part they will land on. This means, you have to provide all the information they need in context. So following the best practices of topic-based authoring, you should include all necessary and related information in the explanation of each call.
Context.IO, for example, did a great job documenting each of their API calls separately with detailed information on parameters and their possible values, along with useful tips and links to related topics.
In order to be able to implement your API, developers need to understand it along with the domain it refers to (e.g., ecommerce). Real world examples reduce the time they need to get familiar with your product, and provide domain knowledge at the same time.
Add the following to the description of each call:
an example of how the call is made
an explanation of the request
Studies have shown, that some developers immediately like to delve into coding, when getting to know a new API; they start working from an example. Analysis of eye-tracking records showed that visual elements, like example code, caught the attention of developers who were scanning the page, rather than reading it line by line. Many looked at code samples before they started reading the descriptions.
Using the right examples is a surefire way to improving your API docs. I’ll explore ways to turn good API docs into great ones using examples in my upcoming post “Ten Extras for Great API Documentation”.
When something goes wrong during development, fixing the problem without detailed documentation can become a frustrating and time-consuming process. To make this process as smooth as possible, error messages should help developers understand:
what the problem is;
whether the error stems from their code or from the use of the API;
and how to fix the problem.
All possible errors—including edge cases—should be documented with error-codes or brief, human-readable information in error messages. Error messages should not only contain information related to that specific call, but also address universal topics like authentication or HTTP requests and other conditions not controlled by the API (like request timeout or unknown server error).
This post from Box discusses best practices for server-side error handling and communication, such as returning an HTTP status code that closely matches the error condition, human-readable error messages, and machine-readable error codes.
Newcomers starting to implement your API face many obstacles:
They are at the beginning of a steep learning curve
They might not be familiar with the structure, domain, and ideas behind your API
It’s difficult for them to figure out where to start.
If you don’t make the learning process easier for them, they can feel overwhelmed and refrain from delving into your API.
Many developers learn best by doing, so a quickstart guide is a great option. The guide should be short and simple, aimed at newcomers, and list the minimum number of steps required to complete a meaningful task (e.g., downloading the SDK and saving one object to the platform). Quickstart guides usually have to include information about the domain and introduce domain-related expressions and methods in more detail. It’s safest to assume that the developer has never before heard of your service.
Stripe’s and Braintree’s quickstart guides are great examples; both provide an overview of the most likely tasks you’ll want to perform with the API, as well as link you to the relevant information. They also contain links to contact someone if you need help.
Tutorials are step-by-step walkthroughs covering specific functionality developers can implement with your API, like SMS notifications, account verification, etc.
Tutorials for APIs should follow the best practices for writing any kind of step-by-step help. Each step should contain all the information needed at that point—and nothing more. This way users can focus on the task at hand and won’t be overloaded with information they don’t need.
The description of steps should be easy to follow and concise. Clarity and brevity support the learning process, and are a best practice for all kinds of documentation. Avoid jargon, if possible; users will be learning domain-related language and new technology, and jargon can instill confusion. Help them by making all descriptions as easy to understand as possible.
The walkthrough should be the smallest possible chunk that lets the user finish a task. If a process is too complex, think about breaking it down into smaller chunks. This makes sure that users can get the help they need without going through steps they’re not interested in.
To implement your API, there are some larger topics that developers will need to know about, for example:
Authentication. Handled differently by each type of API, authentication (e.g., OAuth) is often a complicated and error-prone process. Explain how to get credentials, how they are passed on to the server, and show how API keys work with sample code.
Error handling. For now, error handling hasn’t been standardized, so you should help developers understand how your API passes back error information, why an error occurs, and how to fix it.
HTTP requests. You may have to document HTTP-related information as well, like content types, status codes, and caching.
Dedicate a separate section to explaining these topics, and link to this section from each related API call. This way you can make sure that developers clearly see how your API handles these topics and how API calls change behavior based on them.
Layout and navigation
Layout and navigation are essential to user experience, and although there is no universal solution for all API docs, there are some best practices that help users interact with the material.
Most good examples of API documentation use a dynamic layout as it makes navigation easier for users than static layouts when looking for specific topics in extensive documentation. Starting with a scalable dynamic layout will also make sure you can easily expand your docs, as needed.
Single page design
If your API documentation isn’t huge, go with a single page design that lets users see the overall structure at first sight. Introduce the details from there. Long, single page docs also make it possible for readers to use the browser’s search functionality.
Keep navigation visible at all times. Users don’t want to scroll looking for a navigation bar that disappeared.
2- or 3-column layouts have the navigation on the left and information and examples on the right. They make comprehension easier by showing endpoints and examples in context.
Improving the readability of samples with syntax highlighting makes the code easier to understand.
All writing that you publish should go through an editing process. This is common sense for articles and other publications, but it’s just as essential for technical documentation.
The writers of your API docs should aim for clarity and brevity, confirm that all the necessary information is there, and that the structure is logical and topics aren’t diluted with unnecessary content.
Editors should proofread your documentation to catch grammar mistakes, errors, and any parts that might be hard to read or difficult to understand. They should also check the docs against your style guide for technical documentation and suggest changes, if needed.
Once a section of documentation is ready to be published, it’s a good idea to show it to people in your target audience, especially any developers who haven’t worked on the documentation themselves. They can catch inconsistencies and provide insight into what’s missing.
Although the editing process can feel like a burden when you have to focus on so many other aspects of your API, a couple of iterations can make a huge difference in the final copy and the impression you make.
Keep it up-to-date
If your API documentation is out of date, users will get frustrated by bumping into features that aren’t there anymore and new ones that lack documentation. This can quickly diminish the trust you established by putting so much work into your documentation in the first place.
When maintaining your API docs, you should keep an eye on the following aspects:
Deprecated features. Remove documentation for deprecated features and explain why they were deprecated.
New features. Document new features before launch, and make sure there’s enough time planned for the new content to go through the editorial process.
Feedback. Useful feedback you get from support, or analytics should be reflected in your docs. Chances are you can’t make your docs perfect at the first try, but based on what users are saying, you can improve them continuously.
For all this to work, you will have to build a workflow for maintaining your documentation. Think about checkpoints and processes for the above mentioned aspects, editing, and publication. It also helps if you can set up a routine for reviewing your docs regularly (e.g. quarterly).
Following these best practices, you can build a solid foundation for your API documentation that can be continuously improved upon as you gain more insight into how users interact with them. Stay tuned for part two, where I give you some tips on how to turn good API docs into amazing ones.
This showcase rounds up a collection of the most inspiring and outstanding examples of responsive web designs. These responsive websites not only look great at full-scale monitor resolution but are designed to gracefully scale according to the user’s screen size. Resize your browser, view the site on a smartphone, tablet or netbook and you’ll see the same design in a range of well-presented formats.
What is responsive web design?
Web sites are no longer viewed only on a computer monitor. Smartphones, tablets, and netbooks throw a range of resolutions and different screen sizes into the mix for designers to now worry about. The idea of catering for various resolutions isn’t anything new. Back in the days of table based designs designers either chose the fluid or static route. Today’s responsive websites take a similar approach by using fluid widths in percentages and ems but go a step further by using scalable images and adjustable layouts depending on the browser size.
To achieve this ‘scalability’, CSS media queries are used to apply different page styling according to certain parameters, such as min-width and orientation. The first step is to create a mobile version, but you could go on to customise your design for a range of resolutions.
Showcase of responsive web designs
Ready for some examples? Here’s a roundup of 50 of the most outstanding examples of responsive web designs. Each one is displayed with a preview of both the full-size website and an example of a small resolution, but to get the full experience be sure to visit the live site and play around with it yourself.
Check out eend’s website or their portfolio. They do a great job in online services and they’ll do their best to find the best solutions for their clients, using a website building approach that looks perfect on any screen size and device.
This responsive website focuses on raising awareness on the number of remaining tigers in the world. It uses large, high-quality images displayed on a fullscreen slider which resizes perfectly on any device.
You can scroll through Jeremy Madrid’s portfolio from any device. It has a simple design, divided into different sections, each one of them resizing perfectly depending on the device the site is viewed on.
This is Ryan Merrill’s personal business card website which can be seen from any device. This ultra-minimalist responsive design is mobile-friendly and has everything needed for a client to know about Ryan before hiring him.
This website belongs to a team of experts in strategy, digital content and technology and their website presents a vast series of slideshows which showcase their portfolio. As you scroll down the page, each content section has its own mini-slideshow which starts playing automatically. Each slideshow shows specific projects related to that section category.
Boerdam comprises a slideshow made of both static images and animations which give it a more dynamic and professional look. The slideshow uses images and videos as well, plus as you scroll down the page you can see some modern, image galleries with a grid layout and other cool web elements. Check out the link above to see this slideshow in action!
This is a platform for an artificial intelligence company. They also have a slideshow on their website that explains that Idio, the AI is able to do. The design has a simple layout and uses blurred images as backgrounds, combined with high-quality computer mockups to show a preview of what the tool does.
Fuzzco uses a more sensitive approach in their slideshow. They’ve found a more creative way of presenting images and pieces of information to their readers through a vertical floating gallery. The website has a dynamic look, due to the subtle moving effect which the designer has added to the vertical gallery.
This entire website is a slideshow that showcases the work of Frederico Babina, one of the most impressive contemporary illustrators. It takes a while to load the website, but it’s worth it! Beware, it has music integrated into it, but in this case, it is a really nice touch, adding a soundtrack to the cool illustrated story in the slideshow.
Hwo-architects website design uses a slideshow on their home page as a way of introducing themselves to their readers and future clients. The format of the slideshow is quite simple, but what makes it unique is the content! The photos are fun and have a GIF-vibe added to them.
Fantasy has a series of horizontal bands that combine animation with typography and simple, but effective call to action buttons. The background is simple, minimalist and the whole site is like a one-page slideshow which reveals itself as you scroll down the page.
Printmor’s slideshow presents banners which offer available information about their services as a printing solution office. This slideshow is not as creative as the others from this list but shows another way you can use the slider for.
This website’s slideshow shows some of their newest products such as key chains and enamel pins. What’s cool about this example is the subtle and cute glitter effect which is overlayed on the images in the slideshow. Did you notice it?
One Mighty Roar uses a large horizontal background with white typography as a base for their slideshow. The images used in the slideshow are simple and follow the same theme. Also, they have a dark filter added to them which helps emphasize the white, bold font and the purple CTA button.
This website’s slideshow is right under their menu bar and they use it to point out some important questions to their readers. It has a similar style to the slideshow presented above, but this one is not fullscreen and has a different format for the CTA button.
Kelli Anderson’s slideshow shows images from her latest articles such as experiments alive! This slideshow is very colorful and has a simple arrow navigation system. The website is filled with patterns, unique fonts, and cool hover effects.
COFA Media uses a vertical slider to present information to their readers. As you scroll, another piece of information slides up, covering the other. They also use very blurred images as the backgrounds, on which the designer also added some subtle textures, to make the texts pop out even more!
Relogik has a slideshow that merges with the background, not showing any borders or margins. This slideshow presents some projects of Damjan Stankovic. It has simple, fade in and fade out effects, as transitions, and a numbered slides navigation system. It plays automatically.
Nosotros also has a slideshow that presents some of the projects they’ve worked over the time. This slideshow has bullet navigation and a lot of different slides on which the company showcases their best projects and clients.
This website’s slideshow presents images of Jax Wine community along with other information about the wine. It is a simple slideshow with fade transitions between each slide, plus a button-type navigation system.
Milky website has a nice slideshow of illustrations which give a friendly touch to their website. All in all, they’re a creative agency that focuses on innovative solutions which make their clients grow.
Dribbble is a fantastic place for designers to share their works in progress and is also a great place for designers to gain inspiration and pick out recurring trends across the design spectrum. This post rounds up a collection of snapshots of rich interface design elementsfrom both website designs and app designs. Each one has been carefully crafted for its detail, use of textures, subtle lighting effects, and various tones & colours.
This is yet another example of an interface that uses black as its background. This kind of design can seem a little rough but in this case and with the right typography you can get an interesting result.
I loved the game Tetris as a kid. I played the Game Boy version for hours. It’s easy to get wrapped up in the concept of little shapes coming together in a logical way to clear a goal. The pieces complement one another, yet they all naturally work in different ways. The game has stuck with me since I was a kid (and, no, I’m not a gamer). I now have it on my phone and iPad and find myself playing it when I’m on a flight or bored, waiting for something to happen (which is never these days). Whether I’m playing the game a lot or not, the idea of making tiny boxes fit in neatly and clearing out rows of work is ingrained in my brain. It’s the project manager in me.
But here’s the thing: What project managers do on a daily basis when it comes to managing resources or staffing is similar to Tetris, and it’s a big project management challenge that we all face. The biggest difference between resourcing and Tetris? The team members we’re trying to assign tasks to aren’t blocks. They’re human beings, and they need to be treated as such.
Your Team Are People, Too!
Let’s move away from calling people “resources,” please. We’re really just staffing projects or assigning tasks. We’re not using people to just get things done. We’re asking them to solve challenges that are presented in our projects.
Set the Stage for Organized Resource Planning
The challenge of managing a team is making sure that they stay busy and working on tasks, yet are not completely overbooked. It’s a difficult balance to find, particularly when your projects require a variety of skills at different times, which seem to change all too often.
At the most basic level, you want to set up a system for tracking your projects and your team members’ time on those projects (see Figure 6.1). A simple goal is to ensure that you can confidently commit to deadlines on projects with the knowledge that your team is actually available to do the related work. It seems like a simple goal, but it’s often a difficult one to keep up with due to changes on projects, changes in personal schedules (hey, life happens), and an influx of new work and requests. But it’s not an insurmountable challenge. In fact, a simple spreadsheet could help you, particularly if you’re managing a smaller team. At the core, you want to track these items:
Projects (List them all, even the non-billable ones, or the other things that aren’t projects but end up taking a lot of time—like business development.)
People (List every person you work with.)
Estimated time (Track hours, days, weeks, etc. Make your best guess—based on your timeline or calendar—on how much each person will spend on a project or a task.)
A couple of notes on how to use a spreadsheet to forecast team availability:
This should be set up on a week-by-week basis to minimize confusion (use tabs in your spreadsheet for each new week).
Always consider the “nonbillable” things that people must do (like stand-up meetings, internal tasks, sales, etc.).
The final cell contains a formula that tallies the hours for you; if the hours go over your typical limit (think of a 40-hour work week), it will turn red to notify you. You’ll want to have a good idea for just how “utilized” someone should be (32 hours/week is usually a good target).
You can input the actual hours logged in your time tracking system if you’d like. It could help with future estimating. (If you’re not tracking time, check in with your team on time percentages to get a gut check.)
Check your estimates with your team to make sure that the hours actually align with their assessment of the task (This might help with avoiding that red number!)
Communicate these hours to the entire team each week. Making sure that everyone “is in the know” will help on any project. Discussing it with individuals will help you understand effort, blockers, and possibly even different ways of working.
The landscape for project management tools is changing constantly. There are a number of tools in the marketplace for helping you manage and communicate this data. If you’ve working with a team of 10 or more, you might want to abandon the spreadsheet approach for something more official, organized and supported. Bonus: Many of these tools handle more than just resourcing!
Here’s the thing—it’s not just about numbers. The issue that makes estimating a team’s project hours difficult is that everyone works differently. There is no way to standardize the human factor here, and that’s what makes it tough. Forget the fact that no one on your team is a robot, and they all work at their own pace. Think about sick days, vacations, client delays, changes on projects, and so on. It’s a never-ending flow of shapes that must fit into the box that is a project. Be sure to have an ongoing dialogue about your staffing plans and challenges.
Match Resource Skills to Projects
Projects only slow down when decisions are not made. In that magical moment when things are actually going well, you want to make sure that your team can continue the pace. The only way to do that is by connecting with your team and understanding what motivates them. Here are some things to consider:
Interests: If you have a team member who loves beer, why not put that person on the beer design site? Maybe you have multiple people who want to be on the project, but they are all busy on other projects. These are the breaks. You’ve got to do what is right for the company and your budget. If you can put interests first, it’s awesome. It won’t always work out that way for everyone, but it’s a good first step to try.
Skill sets: It’s as simple as getting to know each and every team member’s work. Some people are meant to create specific types of designs or experiences. It not only has to do with interests, but it also has to do with strengths within those tasks. Sure, I may love beer, but that doesn’t mean that I am meant to design the site that caters to the audience the client is trying to reach.
Moving schedules: Projects will always change. One week you know you’re working against a firm deadline, and the next week that has changed due to the clients, the needs of the project, or some other reason someone conjured up. It’s tough to know when that change will happen, but when it does, how you’ll fill someone’s time with other work should be high on your mind.
Holidays: People always extend them. Plan for that!
Vacations: It’s great to know about these in advance. Be sure you know your company’s policies around vacations. You never ever want to be the PM who says “Well, you have a deadline on X date and that will conflict with your very expensive/exciting trip, so, um … no.” Ask people to request trips at least a month in advance so that you can plan ahead and make it work.
Illness: We’re all humans and that means we’re fine one day and bedridden the next. You’ve always got to be ready for a back-up plan. It shouldn’t fall on your client stakeholders to make up time, but sometimes it has to. Or sometimes you need to look for someone to pitch in on intermediate tasks to keep things of track while your “rock star” or “ninja” is getting better.
Align Plans with Staffing
When you’re working hard to keep up with staffing plans, you’ve got to have updated project plans. A small change in a plan could cause a change in staffing—even by a few hours—and throw everything else off.
Save Yourself and Your Team from Burnout
If you’re busy and not slowing down any time soon, you want to keep this spreadsheet (or tool) updated often. If you’re working at an agency, knowing what’s in your pipeline can also help you. Stay aligned with the person in charge of sales or assigning new projects so that you can anticipate upcoming needs and timelines. In some cases, you may even want to put some basic data in your spreadsheet or tool so that you can anticipate needs.
Good Resourcing Can Justify More Help
The value of tracking this data goes beyond your projects. It can help business owners make important decisions on growing a company.
No matter what you do, be sure to communicate about staffing as much as possible. If you’re in an organization that is constantly handling change, you’ll know that it’s a tough target to hit. In fact, your numbers will often be slightly off, but you’ll find comfort in knowing that you’re doing everything you can to stay ahead of the resource crunch. At the same time, your team will appreciate that you’re doing everything you can to protect their work-life balance.
Stakeholders Are Resources, Too
When you’re working on a team with a project, you have to consider the stakeholders as decision makers, too. Let’s face it—no one has ever been trained to be a good client, stakeholder, or project sponsor. In addition to that, they are likely to be working on several projects with several people at one time. Life as a client can be hectic! So do everything you can to help them plan their time appropriately. In general, you should let the stakeholders know they’ll have to plan for these things:
Meetings: You’ll conduct a kickoff meeting, weekly status updates, deliverable reviews, etc.
Scheduling: You’ll need stakeholders to wrangle calendars to get folks into said meetings.
Gathering feedback: This sounds easy, but it is not. You will need this person to spend time with all of the stakeholders to get their feedback and collate it for you to make sure there are no conflicting opinions.
Chasing down decisions: There are points on every project where one person will need to make sure there is agreement and decisions can be made to keep the project moving.
Daily ad hoc email, phone calls: Questions and requests will pop up, and you’ll need timely responses.
Operations: You might need invoices to be reviewed and approved or change requests to be reviewed and discussed. The stakeholders will need to make time to operate the project from their side of things.
This is a lot of work. And just like PM work, it is very hard to quantify or plan. If you’re in good hands, you’re working with someone who has good PM skills. If not, give them the list above along with a copy of this book. But seriously, if you can assist them with planning their time, it might be as simple as including action items or to-dos for them in a weekly email or in your status report. Just remember, they are busy and want the project to run smoothly as well. Help them make that happen.
Managing projects is hard enough, but being the person to manage who works on what and when can be even more difficult. However, if you don’t keep track of this basic information, you’ll likely find it hard to meet deadlines and wrap up projects without major issues. Here are some simple things you can do to make sure your that your team stays busy, yet not completely overbooked:
Set up a simple spreadsheet to forecast projects and hours per team member.
This data should be based on what’s included in your project scopes and timelines—be sure to double-check that.
You may want to check out one of the resourcing tools that are out there now.
Be sure to account for a number of factors that you can’t necessarily control in this process—for example, interests, skill sets, moving schedules, holidays, vacations, and so on.
Account for your sales process if you’re in an agency and stay ahead of new project requests.
Website designs for premium Mac application websites are amongst the most beautiful web designs on the net. Here’s an inspirational showcase of some of the best Mac app web design trends, along with a look at some common trends and features.
Espresso focuses on delivering good content mainly through huge images, screenshots of their app. They use a light grey texture that turns white as you scroll and grey typography, giving the interface an elegant touch.
Gapo uses typography, images and a pink background for their web design layout followed by a horizontal picture that tells a motto. All this makes the website look more friendly and familiar.
There’s a hand full of design features that tend to appear time and time again in the designs of Mac app websites. Some of these design trends take inspiration directly from Apple, like the well-designed features layout – a common trait of an Apple.com web page – while others are commonly used techniques in the world of website design that is taken a step further, example being the use of icons to reinforce the text with a visual clue, but these icons are much larger in size and include much more detail.
Almost every site in the showcase features a mix of vibrant colors, either in the form of an illustration or from the large icons on the page. A dark background color helps these colors ‘pop’ with a super bright appearance.
Being downloadable applications means a prominent download or buy now the link is crucial. Large and chunky buttons have become popular elements across the web design industry, but Mac app websites often feature oversized button graphics with a tactile feel created with subtle shading and highlights.
The use of icons to reinforce nearby text is nothing new in web design, but Apple’s own use of large and more detailed icons has led to icon designs becoming bigger in size; more detailed and vibrant, and generally more unique in the type of imagery they depict.
The icons in OSX are designed at extra large proportions, so the icons for the apps themselves also need to be oversized and therefore include plenty of detail. These icons act as the app’s logo and branding – It’s what people will recognize the app by when it’s sat in their dock, so it makes sense to use the supersized icon as part of the website design.
Usually, the surrounding interface of a website is designed, then the content is simply inserted and forgotten about. However, the Apple website is a great example of how the content itself is designed, as well as the surrounding page. The Mac app websites often take inspiration from this, combining imagery and text into flowing layouts.
Crisp & sharp interface design
The OSX interface is razor-sharp with tiny pixel levels and highlights giving a really crisp appearance. This design style has emerged onto the web, particularly in Mac, iPhone, and iPad related websites. Soft and subtle shadows, inset text and 1px highlighting lines all add to the theme.
If you want to show off your web design credentials to the world, then WordPress is the perfect blogging platform to use: it’s simple, accessible and highly customizable. Nevertheless, you’re not going to be able to create a professional standard WordPress blog with great work and creativity alone, you’re also going to need some rather nifty plugins.
There are literally thousands of popular plugins currently available and, believe me, sifting through them can be an arduous task: some are absolutely brilliant, but much more are mediocre or totally pointless.
The 15 essential WordPress plugins for aspiring designers, outlined below, are all perfectly suited to the aspiring web designer looking to show off their wares. They’ll boost levels of traffic to your site, integrate your blog with Facebook, increase your productivity and make for a more interactive and interesting visitor experience.
Imagely is a WordPress plugin and a provider of premium WordPress photography themes, plus managed web hosting for professionals. It offers premium themes, hosting, and plugins for WordPress, such as the popular NEXTGen plugin for creating galleries!
If NextGen occupies the more basic end of the image plugin spectrum, then FlippingBook occupies the more creative. You can use this plugin to organize images into individual interactive albums, which can be flicked through just like a book.
WP Super Cache protects your site against the huge spikes in traffic that can result from a front-page appearance on Digg for example or promotion on a social networking site. It does so by generating static HTML files from your blog, which is then served to the vast majority of your visitors.
This much-needed plugin helps to promote your design work by integrating WordPress and your Facebook page. You can login to your WordPress blog using your Facebook account, invite Facebook friends to visit your blog and send blog comments to your Facebook profile feed.
WPtouch is a plugin for WordPress that adds a mobile theme for mobile visitors to your WordPress website. It can be easily customizable and you can choose your own theme. It will also ensure your SEO rankings stay in place and even get better! Plus, the Pro version offers a variety of new themes for blogs, businesses, and WooCommerce online shops.
This plugin comes with a list builder integrated with all major email providers, a Share function, which adds social sharing buttons on your site, a Welcome Mat, heat maps, scroll box, smart bar, highlighter and even an image sharer!
This is a popular WordPress plugin that helps you keep your WordPress site secure, and also increase traffic, and engage with your readers. With this plugin you can stop worrying about data loss, downtime, and hacking, helps you add rich, beautifully-presented media to your blog and also develop a connection with your readers and keep them coming back to your site for more!
This is a popular slider plugin for building responsive sliders that will automatically adapt to any screen dimensions. Anyone can build with Smart Slider, because of the easy interface which comes with a drag&drop builder and live preview.
This plugin adds support for Instant Articles for Facebook. It will help you distribute fast, interactive stories on Facebook. When this plugin is active, a new menu will appear to facilitate the connection to your Facebook Page and start publishing your Instant Articles.
This is a WordPress plugin that turns your existing menu into a mega menu. You can then add any WordPress widget to your menu and style it as you please. All resulted mega menus are user-friendly, accessible and touch ready.
This is a free plugin that helps you create feature rich media galleries for showcasing your projects, photography, and more. It comes with built-in PrettyPhoto lightbox and it is also responsive which means it would work perfectly on desktop, tablet and mobile screen.
With this seriously cool tool, you can shrink and personalize all the links to external sites that you provide on your blog. Unlike Tinyurl and other URL shrinking services, Pretty Link shortens links using your own domain name and tracks them too.
This plugin comes in handy for creating invoices, estimates and similar elements. Use this WordPress plugin to manage your payments and reduce the time spent fielding project requests, estimating projects & getting paid.
A note from the editors: A few days ago, we announced a reimagined A List Apart, with you, our faithful readers of nearly 20 years, contributing your talents. The response from this community was humbling, thrilling, and, frankly, a bit overwhelming. If you volunteered to help A List Apart and haven’t heard back from us yet, here’s what’s up.
To the many wonderful souls who have so far volunteered to help A List Apart, thank you very, very much for your emails! And if you haven’t heard back from us yet, please excuse the delay. We’ve been inundated with messages from hundreds of potential volunteers across a wide spectrum of disciplines and potential task groups, and we are going through your messages slowly and carefully, responding personally to each one.
Some of you have written asking if we might be interested in having you write for us. Gosh, A List Apart has always welcomed articles from our community. Guidelines (plus how to submit your first draft, proposal, or outline) are available at alistapart.com/about/contribute. Please check them out—we’d love to look at any topically appropriate article you care to submit.
But writing articles is far from the only way to support and make your mark at the new (19-year-old) ALA.
Meet the groups!
If you’ve expressed an interested in organizing or hosting an ALA-themed monthly meet-up, or have other ideas that can help grow community, we’ll invite you to join our newly forming COMMUNITY group. If EDUCATION AND OUTREACH is more your thing, we are starting a group for that, as well. There are other groups to come, as well—a list of our ideas appears in the original post on the topic, and there may be more groups to come.
How these groups will work, and what they will do, is largely going to be determined by the volunteers themselves. (That’s you folks.)
As we’re starting the work of supporting and organizing these groups on Basecamp, you can’t just add yourself to a group, as you could on, say, Slack. But that’s okay, because we want to approach this somewhat methodically, adding people a few at a time, and having little written conversations with you beforehand.
Our fear was that if we launched a bunch of Slack channels all at once, without speaking with each of you first, hundreds of people might add themselves the first day, but then nobody would have any direction as to what might be expected—and we might not have the resources ready to provide guidance and support.
By adding you to Basecamps a few at a time, and hopefully identifying leaders in each new group as it begins forming, we hope to provide a lightly structured environment where you can design your own adventures. It takes a little longer this way, but that’s by design. (A List Apart started in 1997 as a 16,000-member message board. Big open channels are great for letting everyone speak, but not necessarily the best way to organize fragile new projects.)
If you are interested in contributing to those projects, or curious about a particular area, and told us so in your initial email, we will eventually get to you and assign you to the right slot. If you haven’t yet volunteered, of course, you can still do so. (See the original post for details.)
Editors, developers, and designers
But wait, there’s more. Developers: if you have standards-oriented front-end development experience and would like to help out on day-to-day site maintenance, occasional minor upgrades, and an eventual redesign, just add yourself to A List Apart’s Github front-end repo: github.com/alistapart/AListApart.
Those with backend experience (particularly in ExpressionEngine and WordPress), you will hear from us as we work our way through your emails.
Editor-in-chief Aaron Gustafson and I have also been going slowly through your mails looking for additional editorial help. We’ve already found and added a few very promising people to our volunteer editorial staff, and will introduce them to you soon. If you’re an editor and we haven’t added you yet, not to worry! It likely means we haven’t gotten to your email yet. (So. Much. Email!)
As might be expected, a majority of those who volunteered offered their services as designers, developers, or both. The number of emails we’ve received from folks with these skills is humbling, touching, and a bit overwhelming. We have not yet begun to dig through this particular pile of mail. So if you haven’t heard from us, that’s why. (But, as I just mentioned, if you’re a developer, you can add yourself to our front-end repo. So do that, if you wish, and say hi!)
We love you
Hope this helps clarify what’s up. We are grateful for every single email we’ve gotten. We will eventually speak with you all. Thank you all again.
Our recent roundup of HTML and CSS editing apps for Mac users proved to be really popular, but the Windows-based designers were feeling a little left out. This week’s roundup pulls together the most popular editing application choices for PC users.
These HTML & CSS editing apps for Windows users will help designers build standards-compliant websites with the help of powerful tools features such as live preview, validation, live editing, HTL5 support, drag and drop systems, FTP editing, troubleshooting, browser support, auto-completion features, and more.
Choose your favorite editing app from the list below.
Notepad2 is one of the most popular utilities for Windows users. It’s a fast, lightweight and simple application. Notepad2 doesn’t include fancy features of more robust editing apps, but if it’s just a program to manually write your code that you’re after, Notepad2 may be for you. This tool can be run out of the box without installation and does modify your system’s registry.
Stylizer is a web page building app with a range of unique features such as drop-and-drop functionality and ‘Bullseye’ on-page editing. Stylizer is described as a great tool to help designers learning the basics of CSS to learn better through its real time visual tool that lets you see how the pieces fit together. It comes with a live preview function, which means that your style sheets open automatically and your changes appear instantly. It also lets you switch between major browsers using side-by-side preview panes. This helps you construct responsive website designs easily.
Brackets is a lightweight modern editor focused on visual tools. It’s was specially made for web designers and front-end developer that makes it much more easier to design directly in your browser. This modern text editor is an open-source project with great features, such as live preview, preprocessor support, inline editors, and more. With Brackets you can use Quick Edit and Live Highlight with your LESS and SCSS files.
Style Master is a CSS editing app that’s available for both Windows and Mac users. It features live editing of websites vis FTP, has both design & code views and built in browser support for easy troubleshooting. Among this tool’s best features are creating style sheets based on your HTML, live CSS editing of PHP, ASP.NET, Ruby and other dynamically generated sites and editing CSS via ftp.
PSPad is a freeware editor with support for a number of file types and languages. Features such as syntax highlighting, macros, clips and templates make it a complete application for the designer confident with their coding skills. This tool helps you create web pages and supports many file types and languages, with syntax highlighting. It has an integrated HEX Editor, FTP Client, Macro Recorder, File Search/Replace, Code Explorer, and other great features.
The EngInSite CSS Editor is a complete CSS editing application with all the features you could wish for. Live preview and validation, visual editing, wizards and auto-completion features make it a great app for both beginners and veterans.
Dreamweaver is one of the most well-known page building apps. It includes a range of unique features and is a robust app allowing websites to be built via the Design or Code views. If you already have access to Dreamweaver as part of the Adobe Creative Suite, it definitely has every tool you’ll ever need, as well as some you probably never will need!
Notepad++ is another free lightweight application for Windows and is a popular choice for veteran programmers who only need a basic app to manually write their code. It has quite a few useful features such as ability to bulk edit files, syntax highlighting and much more.
So we can use animations to tap into users’ visual systems and give them a cognitive speed boost, terrific! But before animating every element of our designs, we must learn when and how to use this new tool: with great power comes great responsibility, and so forth. And as animation must vie with many other concerns for development and design time, it makes sense to spend our resources where they’ll go the farthest.
This chapter sets you up with some core animation patterns and shows you how animation applies to a greater system. Then you’ll learn how to spot cognitive bottlenecks and low-hanging fruit, maximizing the impact of the animations you do invest in.
Common Animation Patterns
If you’ve looked at as many examples of animation on the web and in app interfaces as I have, certain patterns start to emerge. These patterns are helpful for identifying and succinctly verbalizing the purpose of an animation to others. Here are the categories I’ve found myself using the most:
Transitions take users from place to place in the information space, or transition them out of one task into another. These tend to have massive impacts on the content on the page, replacing large portions of information.
Supplements bring information on or off the page, but don’t change the user’s “location” or task. They generally add or update bits of additional content on the page.
Feedback indicates causation between two or more events, often used to connect a user’s interaction with the interface’s reaction.
Demonstrations explain how something works or expose its details by showing instead of telling.
Decorations do not convey new information and are purely aesthetic.
Let’s have a look at each of them and see how they impact the user’s experience.
The web was originally designed as a series of linked documents. Clicking on a link caused the browser to wipe the screen, often causing a telltale flash of white, before painting the next page from scratch. While this made sense in the context of linked text-based documents, it makes less sense in an era where pages share many rich design elements and belong to the same domain. Not only is it wasteful of the browser’s resources to be recreating the same page layout over and over, but it also increases users’ cognitive load when they have to reorient and reevaluate the page’s content.
Animation, specifically motion, can facilitate the user’s orientation in an information space by offloading that effort to the brain’s visual cortex. Using a transition between changes in task flow or locations in information architecture ideally reinforces where the user has been, where they are going, and where they are now in one fell swoop.
For example, on Nike’s SB Dunk page, when a user clicks a navigation arrow, the current sneaker moves out of the way while the next sneaker moves in from the opposite direction (Fig 2.1). These transitions clearly show the user how they are navigating along a linear continuum of sneakers, helping them keep track of their place and reinforcing the spatial model of perusing a real-world row of sneakers.
On another shoes site, fluevog.com, transitions move the user from task to task (Fig 2.2). After a user starts typing in the search field, the results are animated on top of a darker backdrop. This transitions the user from the browsing context to refining their search results, streamlining their focus while also reassuring them that they can get back to browsing without much effort.
While transitions move the user from state to state, supplemental animations bring ancillary information to the user. Think of times when information complementary to the main content of the page appears or disappears in view: alerts, dropdowns, and tooltips are all good candidates for a supplemental animation on entry and exit.
Remember that these animations need to respect the user’s Cone of Vision: will they be looking directly at a tooltip appearing next to their cursor, or will their attention need to be directed to an alert on the side of their tablet?
When a user adds a product to their shopping cart on glossier.com, rather than taking them to a whole new shopping cart page, the site merely updates the user as to their cart’s contents by popping it out as a sidebar (Fig 2.3c). While a transition would snap the user out of browsing mode, this supplemental animation lets the user dismiss the shopping cart and continue shopping.
The shopping cart sidebar uses an additional supplemental animation to quickly and subtly attract the user’s eye: a progress meter gradually fills to show how much the user needs to spend to get free shipping (Fig 2.3d).
This shopping cart process has a third animation pattern going on: the Add to Bag button gains a spinning icon when clicked, which gives the user feedback as to its loading state (Fig 2.3b). Speaking of feedback…
Animation can give users direct feedback about their interactions. A depressed button, a swiping gesture—both link a human action to an interface’s reaction. Or the flip side: a loading spinner on a page indicates that we’re waiting on the computer. Without visual feedback, people are left wondering if they actually clicked that “pay now” button, or if the page is really loading after all.
On the Monterey Bay Aquarium’s site, hovering over a button causes its color to fade from red to blue, indicating that the element is interactive and ready to react to user input (Fig 2.4). Button hovers are classic examples for this kind of animation, partly because the gain of giving users visual feedback on buttons is so measurable and important to business.
Design studio Animal’s site uses a bar of color across the top of the page as well as an animated version of their logo to indicate the page’s loading and loaded states while providing interest and reinforcing their “wild” branding (Fig 2.5).
Demonstrations are my personal favorite use of animation. They can be both entertaining and insightful. These animations put information into perspective, show what’s happening, or how something works. This makes demonstrative animations perfect partners for infographics. One thing all demonstrative animations do is tell a story, as you’ll see.
“Processing…” pages are an opportunity to explain what’s happening to users while they wait. TurboTax makes good use of these processing pages (Fig 2.6). After users submit their US tax forms, it banishes any remaining anxiety by showing them where their information is headed and what they can expect—all while reinforcing their brand’s friendliness and accessibility. (It also helps that the animation distracts users from a rather lengthy page load with something visually engaging!)
Coin famously uses demonstrative animations to explain their consolidation card’s value proposition to curious visitors as they scroll through the site (Fig 2.7)—no need to press play and sit through a video ad or wade through paragraphs of expository content. This page is the very essence of “show, don’t tell.”
It’s not hard to mistake decorative animations for demonstrative animations. But there is a key difference: where demonstrations bring new information into the system, decorative animations do not. They are the fats and sugars of the animation food pyramid: they make great flavor enhancers, but moderation is key.
The best way to spot a purely decorative animation is to ask, “What can a user learn from this animation? Does this guide them or show them something they wouldn’t know otherwise?” If the answer is no, you might have a decorative animation on your hands.
Even though they get a bad rap, decorative animations can help turn the ordinary into the extraordinary. Revisionist History’s site uses decorative animations judiciously to bring flat illustrations to life. The animations add just enough interest to allow for the visual content on the page to be more austere, letting users focus on the podcast (Fig 2.8).
Polygon.com epically used animated illustrations to create centerpieces for a series of console reviews. These decorative animations may not have added new information, but they crucially reinforced the Polygon brand. They also helped each console review stand out from the competition, which at the time sported indistinguishable photographs of the same devices.
When it comes to web design, every designer tends to have their own favorite coding application. Luckily for Mac users, there are plenty of options to choose from, this roundup of HTML and CSS editors pulls together the most popular editing apps with a brief overview of their features.
These HTML and CSS editing apps for Mac designers have excellent features such as browser preview, FTP, SVN, terminal, writing and debugging CSS, file browsing, shortcuts to power up your workflow, auto-completion features, live validation, highlighting, project support, and more! Plus, most of these editing apps for Mac are also very lightweight, which means your projects will load fast.
Coda is the swiss army knife of CSS editing apps, it combines code editing features with FTP, SVN, Terminal and a browser preview to produce a do-it-all app. Coda is one of the most popular choices for Mac based Web Designers and is also my personal preference. There are some new features in the updated version of Coda, such as a touch bar you can use to switch instantly between editor and preview, better speed for syntax highlighting and symbol parsing is 10 times faster, as well as some editor improvements, such as vertical indentation guides, customizable column guide, color-coded traditional or visual tabs. Even more, it now comes with local indexing. plugin prefs, CSS overriding and even panic sync, so you can sync your sites, passwords, and private keys to all of your Macs and more.
CSSEdit is an editing app with a primary focus on Cascading Stylesheets. The application includes some super handy features for writing and debugging your CSS such as Live Preview and the X-Ray Inspector but being a lightweight application designed specifically for CSS edits, you will need a collection of supporting apps in your toolbox. It helps you clean up your markup with the integrated HTML Tidy support, it has support for Subversion source control management, lets you search one or many files quickly, write scripts in the language of your choice, and more.
TextMate is a comprehensive code editor with a clean and minimal interface. It includes all the common features you would expect from an editing app and has some unique shortcuts that can really speed up the workflow for power users. It creates a bridge between UNIX underpinnings and GUI so both expert scripters and novice users can benefit from it.
If you find yourself working with large quantities of files, BBEdit might be the application for you. It includes a range of powerful file browsing and search features that allow you to easily find and make edits to snippets of code buried deep in your website directories. You can use it to create and edit files directly on FTP and SFTP servers with built-in Open from FTP/SFTP.
Espresso is the sister app to CSSEdit, also created by the folks from MacRabbit. Where CSSEdit focused on CSS, Espresso has much wider support for general coding tasks and includes a range of handy navigation, snippet and auto-completion features, not to mention the built in preview engine and FTP support.
Dreamweaver includes some powerful and unique features for building websites, particularly its infamous ‘Design view’, but it can also be used purely for coding. If you do only use Dreamweaver for coding, the alternative apps mentioned in this post include pretty much the same important features, but also benefit from faster loading times due to their overall more lightweight build.
skEdit is another lightweight coding app that can be easily extended with more language support. It makes sense to limit the application down to only the languages you use to avoid bloat. Otherwise the application includes project support, code completion, snippets and live preview, so it’s definitely a good competitor to the more wider known options.
Although it’s not a code editor at heart, it’s certainly a must-have application for Web Designers. Firebug allows you to tweak and edit your HTML and CSS on your live websites, which can then be ported back to your original files. This live editing cuts out the hassle of changing and re-uploading your files to really speed up your workflow.
The use of texture is one of the important principles of good design, and the use of subtle textures is becoming more and more popular in the world of web design. These textures help give a tactile and realistic feel to the interface, which can help a website seem more familiar with things we come across in the real world. Here’s an inspirational showcase of 30 websites that are perfect examples of texture use in web design.
Giftrocket is an online gift card web site that uses a light brown subtle texture and gives a tactile feeling to its readers. This website design is a great example of how to combine cool illustrations with subtle textures in web design.
Wearableprint uses a light grey paper texture to point out 3 columns linked to their catalogs. Using a subtle paper texture throughout their website was an obvious choice, considering this is a printing company.
AmazeeLabs combines background texture and typography in a creative way to give a nice touch to their website’s layout. What seems to be a wall texture turns into a photo. The same texture is used again as background for a slideshow.
Word Refuge is based on a creative and experienced team whose aim is to find the best solutions for their clients. Their website uses different types of texture but the main one is light grey and grungy.
Five Thirty Brew will give you the impression that you’re reading someone’s journal thanks to the paper texture that they used. The colors, the illustrations, and the beer bottles also give this website a friendly vibe.
The last but not least, this website uses textures for almost everything there is on their page. Starting with the background and illustration and ending with the nice typography, this site is a really good example of using textures in a creative way.
You thought of the perfect app with the perfect name and appearance.
Well then, it is time to consider all the nitty-gritty details and to put sleeves up. Unfortunately, designing a mobile app is easier said than done, so you may start preparing for some long and challenging work.
So, which is the most important factor for the success of one app? Designers would choose UI and they would not be wrong-it is not rare for the overall impact to depend on the first impression.
1. Think of places where your app may be used
The fact that you are designing a mobile app doesn’t have to mean it is going to be used in every place and every occasion. You need to be particular about the places where users will access your app. Believe it or not; this can affect the way in which you design your app.
For example, if you designed a geo-location app which works with GPS, and it is meant to be used while walking, make sure that its basic functions are highly visible and easily accessible.
Likewise, if you have an app used for online purchase of products/services, include ‘buy’ or ‘delivery’ buttons, big enough not to be overlooked.
Apps meant to be used while sitting/travelling should focus on large, readable text; and facilitated scrolling.
2. Define your ultimate goals
A goal-orientated approach is the safest way towards mobile app success. Therefore, think about functionality and the purpose your app is going to serve.
Observe your users while they are accomplishing their tasks and make a list of the ultimate goals they might be pursuing.
Ask yourself what they are trying to achieve and make sure you provide enough functionality to take them there.
With time, you will ‘polish’ and improve your app, and you will select the most important goals. Your task then will be to provide the best possible features to serve those goals.
3. Design is all about clarity
Be clear on your features, even if you think they are modest.
Your users need to be ‘on the same page’ and to have a precise overview of what they could or couldn’t do in your app. You certainly don’t want to raise some false expectations.
Here are some clarity tips:
Keep menus simple and readable, so that even novice users will understand what your app is about. For instance, include an icon for every particular function or add labels if really necessary.
Regardless of the message you’re trying to convey, remain brief and concise. This is especially important for usage guides or onboarding sessions.
4. Don’t overlook size
The fact that a single platform is being used on different devices with very diverse screens is not a guarantee that your app will be equally functional for all of them.
Take black grayscale as an example: If you start with a black button and you make each following button slightly lighter, you’re sending the following message to your user: The most important is the first button, while each of the following is less and less important. The last one, obviously, is the least important one.
Don’t use different colors for each button and try to make a clear distinction between them and the background of your app’s pages. Additionally, think about the meaning of the colors you’re applying.
Users are very likely to avoid your orange ‘buy’ button, because the general perception about this color is that it creates urgency.
8. Label icons when you have to
Icon labeling may not be considered as the best idea for icons by some, but I’ve stumbled upon various icons in apps and dashboards and I didn’t know what they represented.
Instead of wasting the user’s time to discover what each one of those is doing, label them, so he can click directly where he needs to go.
You may want to follow Apple or Google which do that. Don’t perceive it as a a complication you don’t really need. They are creating user guidelines for a very good reason.
9. Design ergonomically
Touch and ergonomics are essential for modern mobile design, as almost all of the operations are done with tapping. Therefore, you should focus your design on ergonomics.
Take yourself as an example. Think how you hold a phone and the exact part where your thumb is positioned.
Think about your logical perceptions on the menu’s location or the items you expect to find on the bottom/top of the screen. Outstanding apps already pushed intuitive touch layouts forward and your task is to follow them.
10. Give feedback at every moment and on every occasion
It somehow comes naturally. Users are used to the ‘action-reaction’ process and they expect their devices to respond fast for an effective interaction. Due to many reasons, this is not always the case, but it is certainly the biggest drawback from using a newly introduced app.
Don’t know how to achieve that? You’re afraid it’s going to be time-consuming? Well, proper interactions take time and you have to learn at least how to fake them.
The general rule is: provide feedback for every interaction! Thanks to cute animations and short, inspiring messages, users will understand they performed well and that their actions actually mattered. As a result, they will be satisfied and they will continue using the app.
Think about few real time examples: you push a button, and it obtains a certain form. You push it back, and the form changes. This should exist in mobile design too!
You need visual cues and moving symbols. When a user taps on an item, the item should glow, bounce, slide, or change colors-whatever it takes to convince the user that his attempt was successful.
This approach can ‘buy’ some time for the system to analyze the interaction, without the user noticing it. It is exactly ‘behind the curtains’ where most of interaction design takes place.
Summing up, which are the essential tips to remember from now on?
We would advise you to keep things simple from the beginning; and to follow basic guidelines from proven design players (Android and IOS).
If you’re looking to get to grips with creating websites, one of the first skills you’ll need is to be able to create a concept website design in Photoshop. This post rounds up 35 of the best Photoshop web design tutorials on the web. Learn how simple effects and techniques are used to create detailed layouts in a range of different styles and how page elements are mocked up into complete page designs.
You can now design a stylish timeline portfolio page using Photoshop thanks to this tutorial. This example has a clean three-column page and will show you how to create custom grids, choose the right typography and how to play with colors a bit.
This detailed Photoshop tutorial will teach you some really nice tricks. It will show you what you need to do to set up before even starting designing in Photoshop, you’ll have a look at paintbrushes, shapes and many other things.
As A List Apart approaches its 20th anniversary—a milestone in independent, web-based publishing—we’re once again reimagining the magazine. We want your feedback. And most of all, we want you.
We’re getting rid of advertisers and digging back to our roots: community-based, community-built, and determinedly non-commercial. If you want to highlight local events or innovations, expand your skills, give back, or explore any other goal or idea, we’re here to support you with networking and backing from the community.
In recent years, we’ve seen our rich universe of diverse, creative blogs and sites implode—leaving fewer and fewer channels available to new voices. As more content centralizes into a handful of all-powerful networks, there’s a dreary sameness in perspective and presentation.
This creeping monopolization is a sad echo of how media worked in the 20th century. It doesn’t reflect 21st century diversity and empowerment. It’s not the web’s promise. It’s not how it’s supposed to be.
We have no beef with networks like Twitter or Facebook, or with companies like Apple and Google that currently dominate our communal digital space. We just think diversity is about expanding and speaking up—not consolidating and homogenizing.
Define the next decade with us
A List Apart has always been more than a publisher; we’re an ecosystem of practitioners who are passionate about our craft. We’ll keep finding and sharing great articles—we’re just taking it to the next level.
Two ways to pitch in
If you want to put your favorite skills to use, expand your professional experience, or have a goal or idea for A List Apart, we’re here to listen. And if you’d like to support us in some other way, we’ve made that easy, too. Currently there are two ways to pitch in:
Use the email address at the bottom of this message to let us know if you want to create or join a team that “owns” some area you’re interested in, such as:
Design & development
Community service and local meetups/events
Education and entry level/advanced resources
Book/resource coverage and reviews
Editorial: Editing, acquisitions, and email
Social media, SEO, or marketing
If you don’t have time to volunteer but still want to support us, you’ll be able to offer other forms of help—for instance, making a small, monthly donation via Patreon to help cover our expenses. This will also grant you membership benefits. (Details at Patreon.)
Sharing is caring
More about all of this will soon be revealed. Meantime, if you have feedback or questions about what we’ve shared so far, kindly fire away in the comments. (Hey, how’s that for an idea? A comments section that’s positive and not divisive.)
As we imagine the next 20 years of web design, there’s a lot we don’t know—other than a strong hunch that accessible, semantic HTML will continue to be the bedrock of it all. But one thing we do know: the web, in its reach and its potential, is too important to be left to the mercies of a few powerful companies, however well-intended they may be.
If you’ve a mind to do so, please help us keep our little corner of the indie web alive and well. Help the open web stay open. Help us build the future. To get involved, email us at firstname.lastname@example.org—or share your thoughts in the Comments section below.
The independent content producer refuses to die!
Jeffrey Zeldman, Publisher
Aaron Gustafson, Editor-in-chief
& the gang