[syndicated profile] line25_feed

Posted by Iggy

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.

Ego

View the iPad app website

Ego is an iPad app website design which can help you check web statistics that matter to you, like the number of visits to your website.

Quilt

The Quilt App Creative Website Designs for iPad Apps

With this app, you can invite your closest friends and family to stitch in all your beautiful memories in an online scrapbook. Check out the way the designer has constructed this app landing page!

Things

What’s New in the all new Things Creative Website Designs for iPad Apps

This app has been completely rebuilt to meet all the requirements of a delightful experience and is well-presented on its website.

Layers

View the iPad app website

This app was built with the help of a lot of feedback from mobile artists and its website might be your next source of inspiration.

Supperclubapp

Supper Club App Creative Website Designs for iPad Apps

If you’re looking for a place to eat, then this app will come in really handy. You can enjoy good food or simply have a look on this website to get inspired.

Centralway

Centralway Creative Website Designs for iPad Apps

With a simple and unique design, Centralway’s web site surprises through good content. The navigation on this app landing page si done vertically and information appears as you scroll down the page.

Air Display

Air Display Creative Website Designs for iPad Apps

Did you know that you could easily connect to an Ipad or an Android device from your laptop? If not, you can have a look at this website to find out more.

Gethaze

Haze Creative Website Designs for iPad Apps

Haze has a warm and sensitive interface for both itself and its website. This website might a great source of inspiration for your next app website design project.

Triplagent

TriplAgent Creative Website Designs for iPad Apps

If you’re a traveler then this is the site for you. You’ll find out that with Triplagent you can find local guides for your next vacation.

Flightcard

Flight Card Designs for iPad Apps

They have a simple yet creative web design and cool app. Flight Card is a very useful application that can track your flights only by number or route.

Mosaic

Mosaic Photo Books Designs for iPad Apps

This app’s website uses a horizontal band to give readers a first insight into Mosaic, an app that can help you create photo books.

Simplebots

Simplebots Designs for iPad Apps

Simplebotss website is entirely made of horizontal bands of content and a purple palette of colours. You can have a look and get inspired by this website’s layout.

Roambi

SAP Roambi iPad Apps

Do you like the Roambi app? If so, you should also have a look on their website and their friendly interface. There are also a bunch of great web design features you can learn from.

iFontMaker

iFontMaker iPad Apps

iFontMaker is the world’s first font editor for iPad which you can use to create typography with in less than 5 minutes. Besides that, they also have a cool and friendly interface.

Flipboard

Flipboard iPad Apps

Flipboard’s website showcases an insight of the news and articles you get by using the app. This is a very popular app so you can have plenty of things to learn from this design.

Twitterific

Twitterrific iPad Apps

Twitterific’s website might be your next project’s inspiration source and you might also like to try the app and learn an easier way to tweet.

The Photo Cookbook

View the iPad app website

Their website’s layout gets its inspiration from cooking and so does their app. You can learn to cook or simply have a look at this interesting website.

djay2

DJ App for iPad iPad Apps

With a more dynamic interface, djay 2’s website introduces a more intuitive yet powerful all-in-one DJ app.

Montessorium

Learning is a lifestyle iPad Apps

This app’s motto is  ‘learning is a lifestyle’ and the website design illustrates just that! It has an overall stylish and friendly interface.

Paper

Paper & Pencil by FiftyThree iPad Apps

Their website uses horizontal bands and illustrations to make a good web design layout for their newest app.

Comic Zeal

Comic Zeal iPad Apps

Tis website design has a simple yet friendly interface that tells all you need to know about this comic library app.

StudioTrack

Sonoma Wire Works iPad Apps

StudioTrack is one of sonomawireworks’ coolest apps. You can try it out or have a look at this website that serves as a good example for a beautiful design to promote the app.

iMockups

View the iPad app website

If you’re out of time, you can now design on the go with this brilliant app whose website serves as good inspiration for app promoting website.

FLUD

The Flud iPad Apps

This is an online tech community and their website might be just the source of inspiration you’ve been looking for.

iStudiez

iStudiez Pro for Windows iPad Apps

This is a very useful app for students which promises a delightful experience. You can try it out or have a look on their website to get inspired.

Pulp

View the iPad app website

This app can become your own personalized newspaper. Their website uses a black background which in some cases might look too somber, but in this one, the interface remains friendly

Awaken

Awaken iPad Apps

This is yet another cool example of promoting your app through a good web design layout. Have a look at Awaken’s page or try the ultimate music alarm clock.

Thisissolar

SOLAR iPad Apps

This website uses a single page which provides only the needed content about their app. They use a warm background and a preview of the app.

TouchPad

TouchPad on the App Store

Did you know you could transform your iPad or iPhone in a remote control for your computer with this app? Their website is also a good example for promoting an app.

Madewithover

Over — Add beautiful text & artwork to photos iPad Apps

Their website suggests creativity such as their app will help you discover and improve it. Check out their website and find out more.

Bord

View the iPad app website

If you’re looking for another dose of creativity, this app will your device into a chalkboard. Their website also uses a chalkboard texture in a creative way that best suits their app.

Taasky

Taasky iPad Apps

Taasky has a friendly interface that focuses on using a horizontal band with an illustration and good typography. If you’ll continue scrolling you’ll notice a sensitive minimalist design.

Spaced

View the iPad app website

This is yet another good example of promoting your app through your website. This one focuses entirely on the app and the perks of using it.

The post Showcase of Creative Website Designs for iPad Apps appeared first on Line25.

[syndicated profile] line25_feed

Posted by Iggy

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.

Julia Gavrilova

Julia Gavrilova Creative Typography

This website gives info on everything there is to know about Julia Gavrilova, a singer who was born and raised in Moscow. This website features beautiful typography and professional web design.

Playing Fashion

Playing Fashion Creative Typography

Playing Fashion’s website uses typography to give a sensitive aspect to their page and to mark articles as you hover your mouse over them.

Pack

Pack Creative Typography

Pack uses different types of fonts to present a gallery of images for dog lovers. This is a nice example of using typography in a creative way.

Made by Few Conference

Made by Few Creative Typography

This website combines typography with a good choice of colors, styles and web design. All in all, this site gives you a friendly vibe as you scroll through it.

Gladeye

Gladeye Creative Typography

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.

Grain & Mortar

Grain & Mortar Web Designs with Beautiful Creative Typography

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.

1MD

One Million Dollars Web Designs with Beautiful Creative Typography

1MD uses huge white typography on a slideshow of animations to connect to their readers. They are a creative bureau that focuses on major brands and innovative startups.

Crop The Block

Crop The Block Web Designs with Beautiful Creative Typography

This website uses typography in different ways and sizes to present all the inspiring videos they’ve made until today.

Midori Aoyama

Midori Aoyama Web Designs with Beautiful Creative Typography

This website belongs to a Tokyo Based DJ and producer, Midori Aoyama. His page mixes good taste in typography, color and interesting web design.

Visionare

Visionare Web Designs with Beautiful Creative Typography

This website uses both typography and illustrations in making an interactive site that shares a lot of tips and tricks about reaching your goals.

Département Créatif

Département Créatif Web Designs with Beautiful Creative Typography

This is yet another example of huge white typography as the first thing your readers see. This website combines colors, fonts, and images to lay out important information

Antro

Antro Web Designs with Beautiful Creative Typography

Antro is a creative agency’s website that uses typography in different ways. They’re very dedicated to their work and they do their best to meet today’s challenges in innovative ways.

Cantina Valpolicella Negrar

Cantina Valpolicella Negrar Web Designs Typography

This website uses typography as the missing ingredient in a nice and sensitive web design. You’ll notice many different ways of using colors, text, and images if you’ll keep scrolling this site.

Adventure.com

Adventure. Redefined. Web Designs Typography

This website aims at presenting emerging destinations for your next trips and combines monochrome typography with image galleries and articles.

evolve wealth

evolve wealth Web Designs Typography

Evolvewealth uses huge white typography in their header to state out their motto and continues with horizontal bands of good pieces of information.

The Cut Creative

The Cut Creative Web Designs Typography

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

Giflan Design

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.

Curt’s Special Recipe

Curt's Special Recipe Web Designs Typography

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.

Luke Stephenson

Luke Stephenson Web Designs Typography

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.

The Status Bureau

The Status Bureau Web Designs Typography

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.

Mextures

Mextures Web Designs Typography

This website is yet another good example of choosing the right typography for your project. It uses simple, bold, all caps fonts as a header, on a dark, black background.

Cultivated Wit

Cultivated Wit Web Designs Typography

They use combined different fonts, colours, shapes and sizes and even animations into making a nice, clean and smooth design for their page.

Blackhouse

Blackhouse Web Designs Typography

This website is your go-to when you’re looking for a restaurant. Not only did they chose the right typography for their page but they also know all the good places you can eat.

Blank

Blank Web Designs Typography

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.

The Office of Jason James

The Office of Jason James Web Designs Typography

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.

Whoa Nelly Catering

Whoa Nelly Catering Web Designs Typography

Whoa Nelly! is a catering company serving Los Angeles and Southern California and whose website shows not only a good taste for food but also for typography and web design.

Bay Street Biergarten

Bay Street Biergarten Web Designs Typography

They’re craft beer lovers and their website best shows their love for beer. They use a dark blue background with illustrations and white typography.

Electric Mainline

Electric Mainline Web Design Typography

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!

Dataveyes

Dataveyes Web Design Typography

This animated website uses typography in its header but this time in a creative way. Find out more about Dataeyes from their vertical slideshow.

Knuckles Industries

Knuckles Industries Web Design Typography

This is yet another good example of choosing the right typography to express and connect to your readers. It has a vintage vibe and the fonts are very well chosen and paired together.

Miss Mary’s Morning Elixir

Miss Mary's Morning Elixir Web Design Typography

This website combines illustrations with typography to present this gluten free drink. It has a 60s vibe with a pinup girl theme. Check out more on their site!

New Zealand Opera

New Zealand Opera Web Design Typography

On this website, you’ll find out everything you ever wanted to know about the opera. All in all, this website uses typography in a clean and elegant way.

Oli Lisher

Oli Lisher Web Design Typography

This is the portfolio of Oli Lisher, a freelance writer, graphic designer and illustrator. On his site, you’ll notice interesting ways of using typography in web design.

Planet Propaganda

Planet Propaganda Web Design Typography

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.

RSQ

An award-winning digital agency Web Design Typography

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.

Thobeck

Thobeck Web Design Typography

Thobeck presents laser cut furniture and items. This website has a simple and clean design and uses nice, unique typography.

Studio Otwarte Agencja Brandingowa

Studio Otwarte Agencja Brandingowa Web Design Typography

This website also uses huge typography on a horizontal band to emphasize on their team and their web design experience.

Bacchica Barbearia

Bacchica Barbearia Web Design Typography

This is yet another example of a clean design that uses the right typography and palette of colours. It has a hipster-vibe and a vintage color palette with a modern-aged look.

Fresh Design Studio

Fresh Design Agency _ Development of digital products

They use an animated horizontal band on which the logo and name are cutout. You’ll notice a clean design and a good choice in typography.

Spintank

Communication corporate Web Design Typography

They use image, colours and illustrations as horizontal bands to lay out important information through typography.

Flandria

Flandria Web Design Typography

Flandria is a website that focuses on confortable reading. They use white typography that shrinks as you continue reading their page.

Jeff and Megan at the Beach

Jeff and Megan at the Beach Web Design Typography

Jeff and Megan use typography on a light grey background with grey blue images which gives their website a calm and friendly look.

Ante Meridiem

Ante Meridiem Web Design Typography

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.

Dickson Fong

Dickson Fong Web Design Typography

Dickson Fong combines typography with horizontal bands to give their website an unique touch. The blurred image background makes the statement text on the homepage stand out even more.

Another Pony

Another Pony Web Design Typography

Another Pony shows a great taste for letters and minimalist design throughout their website. This website design has a very interesting concept and layout worth checking out.

delaBanda

delaBanda Web Design Typography

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.

The Prince Ink Company

The Prince Ink Company Web Design Typography

Thhis is the presentation website of a printing service and their website shows a good taste in web design and typography.

Wild Blue

Wild Blue Web Design Typography

Wild Blue has a cool way of presenting themselves. They have a dynamic and creative web design layout that uses typography in many different ways.

The Basics

The Basics Web Design Typography

Here’s another great website design with a smooth and clean layout that merges perfectly with their choice in typography.

Michael D’Ambrosio

Ambrosio Web Design Typography

This website works as a digital portfolio that combines creativity with a good taste in webdesign and typography. Images and fonts blend perfectly together.

Brice

Brice Web Design Typography

This website has a dynamic touch thanks to the typography they choose. They only lay out important information through key words and images.

Design for Good

Design for Good Web Design Typography

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.

American Advertising Awards

American Advertising Awards - American Advertising Federation

American Advertising Awards has a unique way of using typography on their website. This monochrome website design uses both images and fonts to deliver the information. Check out this nice example!

H. Creative Group

-Non-Profit Marketing Agency In Atlanta Web Design Typography

This website uses typography in different ways using a violet-toned palette of colours that give a sensitive touch to the design layout.

Caleb Sylvest

The furious endeavours of Caleb Sylvest Web Design Typography

This is yet another good example of creative use of typography in your next project. You can get inspired to use different sizes of the same font or highlight some key words with a different colour.

WEBARQ

WEBARQ Web Design Typography

Their website stands out through personality and a taste geometry that merges with a great choice of typography.

The post 50 Web Designs with Beautiful Creative Typography appeared first on Line25.

[syndicated profile] alistapart_feed

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. 

Developers

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

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.

Other audiences

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.

Context-based structure

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.

Examples

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
  • sample responses

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”.

Error messages

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.

Quickstart guide

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

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.

Screenshot of Twilio's tutorials page
Twilio’s tutorials explain the most-likely use cases with sample apps in a wide variety of programming languages and frameworks.

Universal topics

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.

Dynamic layout

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.

Screenshot of Stripe's API reference page
Stripe managed to present extensive documentation in an easy to navigate single page.

Persistent navigation

Keep navigation visible at all times. Users don’t want to scroll looking for a navigation bar that disappeared.

Multi-column layout

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.

Screenshot of Clearbit's API reference page
Clearbit’s three-column layout displays persistent navigation (table of contents) on the left, references in the middle, and code examples on the right.

Syntax highlighter

Improving the readability of samples with syntax highlighting makes the code easier to understand.

Screenshot of Plaid's API documentation page
The syntax highlighter in action on Plaid’s API documentation site.

If you’d like to start experimenting with a layout for your docs, you might want to check out some free and open source API documentation generators.

To learn about the pros and cons of different approaches to organizing your API docs in the context of developer portals, this is an excellent article by Nordic APIs.

Editing

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.

[syndicated profile] line25_feed

Posted by Iggy

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?

Screen resolutions responsive web designs

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.

Alsacréations

Agence web de qualité _ Alsacréations responsive web designs

Alsacreations focuses on imagining and building ergonomic sites and quality web apps. Have a look on their responsive web designed site.

Sasquatch Festival

Sasquatch responsive web designs

Up for something cool? Check out this music festival’s responsive website! it uses fullscreen images, has a unique layout with different box content elements and makes use of great font combinations!

Earth Hour

EarthHour responsive web designs

Say goodbye to procrastination and check out at any time and on any device Earth Hour’s events. It has a full screen layout and a completely responsive design.

Cognition

Cognition The blog of web design & development firm Happy Cog responsive web designs

This website covers a large range of content. You can read about fighting stage fright or a recent case study for responsive web designs.

Seegno

Seegno responsive web designs

Seegno is made of a creative and straightforward team specialized in building digital products and with a cool and responsive website.

Boorbool

Boorbool responsive web designs

They help conceive and develop brands and they engage in a series of multidisciplinary activities. They like meaningful visual and linguistic signs and their responsive website surely expresses that.

Flambette

Flambette responsive web designs

In the mood for buying some candles? With their responsive site, you can do that any time and from all your devices.

Ribot

ribot — A digital design studio

They focus on digital experience and innovation. If you want to find out more, you can check out their cool and responsive website.

Life in Greenville

Life in Greenville responsive web

Ever thought of visiting Greenville? If yes, then this very responsive website be your guide. It has a large slideshow on the homepage, which perfectly resizes to any screen size.

Laufbild Werkstatt

Laufbild Werkstatt responsive web

They’re an interdisciplinary design office with a simple yet cool responsive website. This site has an interesting layout which was made entirely responsive and mobile-friendly!

Sweet Hat Club

View the responsive website design

Sweet Hat Club, as the name implies, is an online place hat lovers can call home. This site has a responsive design and a simple layout.

Clearairchallenge

Clean Air Communte Challenge responsive web

Find out exactly how clean the air you breathe is and how you can help reduce air pollution with this cool and responsive website.

Andrew Revitt

Andrew Revitt - Freelance design responsive web

This website belongs to a freelance web designer who’s looking for new projects. Check out his responsive website.

Stijlroyal

Stijlroyal Design & Strategie

This website design is a presentation site of a company that focuses on design and strategy. This responsive and creative website fits perfectly on any screen size.

Sleepstreet

View the responsive website design

Wanna rent a house in Ghent? You can easily do that from any device with their responsive website! This mobile-friendly site also has a vintage design and uses retro vector illustrations perfectly.

eend

eend responsive web

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.

Converge SE

ConvergeSE responsive website

This business card website works fine on any device. It has a simple, dark website design with a fullscreen layout that adapts responsively.

Elje-group

elje - Group responsive website

Eljie-group has a cool mobile friendly animated website that works well on any device.

Joni Korpi

Joni Korpi responsive website

This responsive website presents the portfolio of Joni Korpi. It has a purple layout and a friendly interface.

Jason Weaver

Jason Weaver Interactive Designer - Homepage responsive website

Want your site to be interactive? Check out Jason Weaver’s responsive website and the services he’s offering.

Pentagram

Pentagram responsive website

Pentagram is a multidisciplinary team that encompasses everything from graphics and identity to exhibitions and installations and they have a very responsive website.

Tree House

Treehouse Blog - Learn to code responsive website

If you want to learn how to code or improve your skills, Treehouse is you go-to with their services and their highly responsive website design.

Anakin

ANAKIN responsive website

With a responsive and sensitive web design, Anakin has a vast experience in design and creative use of digital technology.

3200 Tigres

Tigres responsive website

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.

Prophets

Prophets responsive website

This is another presentation website of a company that focuses on innovative design and that can be seen on their cool and responsive website.

Jeremy Madrid

Jeremy Madrid - Web Developer responsive website

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.

Zzzach

Zach Miller responsive website

Have you met Zach? If not, you should definitely check out his responsive website. This is a business card website / portfolio website with a super-minimalist responsive design.

Ryan Merrill

Ryan Clark Merrill responsive website

 

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.

Elitefingers

Architecture Agency responsive website

This website is an architecture portfolio and has a responsive web design. It features a large slider on the homepage, but it resizes perfectly to be viewed on any device.

Electric Pulp

Electric Pulp responsive website

This is the presentation website of Electric Pulp. It has a friendly interface and a very responsive web design. Check it out, it might be the source of inspiration for your next project.

Tee Gallery

View the responsive website design

Check out this responsive website design with a simple, photo grid layout which can also be seen from a mobile or a tablet device. They have some really cool T-shirts on the Tee Gallery.

Appico

Appico

With a responsive and minimalist web design, Appico manages to impress readers through their content. The fonts are also very well chosen and the vector elements blend perfectly with the theme.

Entropiefestival

entropie

If you’re in the mood for some fun, you should check out this festival’s website which works fine on any device. It also has a creative design which may get you inspired.

Sliders

SLIDERS Copenhagen responsive website

This is yet another good example of a responsive web design. It could be a source of inspiration for your next project or your next go-to restaurant.

A Different Design

A Different Design - Kristof Orts responsive website

This is a website for a company which creates beautiful and responsive interfaces and their site proves that they can follow the responsive trend to a T.

This is Texido

THIS IS TEIXIDÓ responsive website

With a friendly interface and a responsive web layout, Texido shows a great experience in branding and ability to do whatever they propose to do.

Edge of my Seat

View the responsive website design

This is a more content-driven website design. The blocks of text were coded very well in order to be responsive and easy to read from any device.

Hardboiled Web Design

Hardboiled Web Design Fifth Anniversary Edition responsive website

If you’re looking for something new to read you should try out this book about web design or simply have a look on this responsive website.

St Paul’s School

St. Paul's School responsive website

St Paul’s School’s website is another example of responsive web design you should check out. It uses large images which can be seen very well from any device, be it mobile or desktop.

Robot… or Not?

Robot…or Not responsive website

Are you a robot or are you not? This is the question asked by this site. Either way, you should have a look at this responsive website example worth checking out.

Handcrafted Pixels

View the responsive website design

‘One website, many devices’ is their motto and their site proves it! This studio is specialized in creating responsive, mobile-friendly web designs and their site is the perfect work example.

Purpose Branding

Purpose Branding responsive website

Looking for branding company? they have a lot of experience in this line of work and they also have a cool and responsive website.

Sparkbox

Sparkbox Web Design and Development

This company’s purpose is making the web a better place and so does their responsive website. Check it out as it is a great source of inspiration.

SimpleBits

SimpleBits responsive website

Check out SimpleBits’ responsive website and maybe have a look through their articles. This is another content-focused website design with perfectly-responsive content blocks.

UX London

UX London responsive website

Book a spot at this unique 3-day event for user experience designers or simply check out their responsive website.

CSS-Tricks

CSS-Tricks responsive website

Last but not least, CSS-Tricks, run by Chris Coyier, is another good example of web responsive design and he constantly posts good content.

The post Showcase of Outstanding Responsive Web Designs appeared first on Line25.

[syndicated profile] line25_feed

Posted by Iggy

Slideshows are a great way of displaying your featured content in a compact space. The use of Javascript has enabled designers to enhance these slideshows with cool animations and effects. This post rounds up a collection of the most creative slideshows in web design, each one takes the core idea of the slideshow and adds extra elements and features to make it stand out as an inspirational design feature.

Mighty

Mighty in the Midwest Digital strategy, design, and technology Slideshows in Web Design

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

Boerdam digital happiness Slideshows in Web Design

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!

Idioplatform

Idio - Artificial Intelligence Slideshows in Web Design

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

Fuzzco Fuzzco is a creative agency in Charleston and Portland Slideshows in Web Design

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.

Archidirectors

Archidirectors Slideshows in Web Design

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

HWO Architects Slideshows in Web Design

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

Fantasy Slideshows in Web Design

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

High Quality Printing NYC, NYC Print Shop, Custom Printing Slideshows in Web Design

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.

Thesearethings

THESE ARE THINGS Slideshows in Web

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

One Mighty Roar A Digital Product Company Slideshows in Web

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.

Team Excellence

Team Excellence Slideshows in Web

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.

Designroyale

Digital Creative Agency Slideshows in Web

Designroyale’s slideshow presents projects they’ve work on over the time. It takes a while to load, but the loader icon has a unique design. You can also click the images to find out more about them.

Kellianderson

Kelli Anderson Slideshows in Web

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.

Ecoforms

Ecoforms

On this website, you’ll find a lot of information about sustainability. They also have a slideshow that present concepts of a healthy life. The slideshow has a simple arrow type navigation system.

COFA Media

Website Design Company, San Diego Web Design

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

relogik.com Slideshows in Web

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

View the website Slideshows in Web

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.

Jaxvineyards

Boutique winery in Calistoga Slideshows in Web

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.

Paper-leaf

Paper Leaf Slideshows in Web

This website’s slideshow is smaller and positioned somewhere at the middle of the homepage but lays out important information about Paper Leaf. Check it out!

Icon Designer

 icon and user interface design

This website showcases the work of an icon designer in a vertical gallery of his latest pictograms. This is a vertical slideshow in which the designer showcases his best pictograms and icon sets.

Milky

Milky Slideshows in Web

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.

The post 20 Examples of Creative Slideshows in Web Design appeared first on Line25.

[syndicated profile] line25_feed

Posted by Iggy

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 elements from 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.

Searching on Universal Subtitles (web app interface UI UX)

 Detailed Interface Design Elements

This web app interface uses a light blue palette and a green search button for its interface design.

Planner app

 Detailed Interface Design Elements Dribbble shot

This planner app is only a small detail in a cool interface design. This is a good example of choosing the right textures, fonts and colours for your project.

New Flyosity Design: Contact Page

Contact Page Dribbble shot

This is another example I find interesting through its neutral yet also friendly interface.

Web Stuff

Web Stuff Dribbble shot

Sarah Mick chose a dark and light grey palette of colour for project’s interface design.

Dashboard Design

Dashboard Design

This is an example of a light grey dashboard design that also shows a great interest in choosing the right typography.

A Theme

A Theme Dribbble shot

This is a much more creative example thanks to the textures and colours it uses for its design.

Web Store Mock

Web Store Mock Dribbble shot

This is a sneak peek at a web store project that uses grungy greys and bold green texture for its interface.

Web Interface

Web Interface

This light blue interface might be your next source of inspiration as it uses a classy and clean design.

Vintage

Vintage Dribbble shot

This example has a vintage theme for its interface design that uses light brown as its dominant colour.

We Need Web Heroes Today

interface design Dribbble shot

Check out this bold interface design that uses colours, textures, images and so much more for its web design layout.

Design Notes

Design Notes Dribbble shot

Design Notes has a sensitive touch thanks to the mathematics paper it uses as background texture.

Search

View the Dribbble shot

This innovative yellow search button might serve as a source of inspiration for your next project.

Blog Page Design for Marketing Website

Blog Page Design for Marketing Website

If you’re in the mood for a bold coloured interface inspiration then you might want to check out this blog page design.

Photoshop Browser UI Action

Photoshop Browser UI Action

Who says red is no longer trendy? check out this cool Photoshop browser.

Ubiquity.

View the Dribbble shot

Or maybe you’re in the mood for design layout that uses darker colours, if so you should check out this sneak peek from Ubiquity.

Dashboard Web App Product UI Design: Job Summary

Dashboard Web App Product UI Design

If you like dark blue themes, this dashboard design might be a good source of inspiration for your project.

Wood Navigation

Wood Navigation

This is another good example of mixing the right textures and colours. The dark and grungy green blends well with the wood texture and the pale pink.

Slider Caption

Slider Caption

This is yet another example that mixed the right textures for its interface design.

Website Design

Website Design

This interface’s colours blend really well with the chosen texture that makes images stand out.

dashboard UI

dashboard UI by uixNinja

This is another example of a dashboard UI this time with a much more girlier interface design thanks to the pink colours.

Freebie PSD: Flat UI Kit 2 (Blog)

Freebie PSD Flat UI Kit 2

This is a great set that also comes with a free PSD included. Feel free to try it out!

Ui Kit Rainy Season

Ui Kit Rainy Season by Sunbzy

If you’re up for a rainy season theme then you might want to have a look at this UI Kit.

Splash of red

UI Kit Dribbble shot

Or maybe you’re in the mood for a splash of red in which case this design might be exactly what you’re looking for.

Zora Dash – Properties (WIPs)

Zora Dash Properties (WIPs)

This example has a friendlier look and mixes bold orange colours with light grey tones.

Dellustrations New Look

Dellustrations New Look Dribbble shot

And if you like bold ideas you could also check out Dellustrations’ black and red interface design.

Sanithouse

red interface design

This is another inspiring example that uses grey tones and textures for its interface design.

eBay Redesign

Ebay Redesign by Tintins

This eBay Redesign is another good example of choosing the right palette and style for interface design.

Resources

style for interface design

Have a look at the orange themed interface design and their choice of textures.

CRM Search & Widget

CRM Search

Check out Ivo Mynttinen’s search widget.

Joomla – Leopard Theme 3.

Joomla - Leopard Theme 3

Joomla’s purple palette gives the interface a warm touch. You can also check the layout in full size.

Beta invite

Beta invite

This is yet another cool example of a black and red theme that could serve well as inspiration

Toy store – home

Toy store - home

Or how about this classy interface design that uses all the right textures.

Almost There

classy interface design

Almost there is combines a light grey palette with a letterpress effect in an interesting and innovative design.

Sanithouse Part II

Sanithouse Part II

This the second part of the Sanithouse project and has a neat interface design.

Buttons!

 neat interface design

Buttons can give you lots of troubles and headaches so maybe this example might come in really handy the next time you’re looking for some inspiration.

Vrb

View the Dribbble shot

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.

Dropdown Menu UI

Dropdown Menu UI by Matt

This Dropdown Menu UI is only a small piece of a project for Love.ly. It uses a nice palette of colours and all the right textures.

Life on Prime UI

Life on Prime UI

This is yet another example of an interface that uses dark tones of blue, this time, with white typography.

Aviathemes

Aviathemes

This one has a much more dynamic touch thanks to its colours and typography.

D for Deploy

D for Deploy

Check out this sneak peek for Deploy and see whether you like the mix of colours, textures, images and typography.

AC redesign – old

AC redesign - old

This is a much more creative example thanks to the textures and the doodles it uses for its interface design.

StudioTwentyEight v7

interface design Dribbble shot

This project for StudioTwentyEight has a neat and clear design that uses blue tones and nice typography.

Search Animated

Search Animated by Kerem Suer

You might also want to check out this sneak peek for it may be a good source of inspiration in the future.

Navigation Treatment

Navigation Treatment Dribbble shot

This is a much more detailed interface. It uses leader and wood textures which give a neat and classy look of the interface.

Plans & Pricing

View the Dribbble shot

This one uses light blue textures which make content stand out and a green colour for the Plans and Pricing button.

Working on a new downloading UI for Miro

Plans and Pricing button

This is a sneak peek from 

Checkout Interface

Checkout Interface

This is yet another good example of mixing the right textures and colours into a nice interface design.

Web Interface

Web Interface

This web interface uses a light blue grey palette with only a bit of red at its menu bar.

Game on…

menu bar Dribbble shot

Check out these details from Josh Hemsley’s project that also uses grey tones.

Admin Interface

Admin Interface

This one mixes a purple palette with warm colours like orange and red but only in small quantities.

Webapp interface excerpt

Webapp interface excerpt

This is yet another example that has a clean and neat design and uses grey tones.

Forum Interface

Forum Interface

This forum interface design uses dark tones of grey and black with only a bit of blue.

Interface Design Elements

Interface Design Elements

This a creative example of how you can mix colours textures and typography into a nice interface design.

Social interface

Social interface

This is a much more playful example that uses bold colours like pink, green and purple.

Spot web app interface

Spot web app interface

This one uses a side bar menu and light colours for its interface design layout.

Dark CMS – Dashboard

Dark CMS - Dashboard

This dark dashboard interface mixes all the right textures and colour tones into its design.

Soon.

dashboard interface

This is yet another good example of choosing all the right textures for your next project.

Theme Builder V2

Theme Builder

This black grungy texture that this project’s interface uses makes all the other colours stand out.

Iconbox

Iconbox

If you’re looking for some icon ideas or ways to uses them this project might be your next inspiration.

Candy Cane Loader

Candy Cane Loader

This is another example of a playful interface that has a candy cane as a loader.

iPad UI for cookbook

iPad UI for cookbook

This interface also mixes the right texture and typography into a cool design.

Big Green Button

Big Green Button

This big green button might just be your next source of inspiration for your project

Vintage Play Button

Vintage Play Button

Or you could always have a look at this vintage purple play button. This is also a good example of mixing colours with textures into a good interface design.

Homepage Mashup

Homepage Mashup

This is yet another bold interface design that mixes textures with striking colours and white typography.

A Big White Button

Big White Button

This neat and clear button might be just what was missing from your design layout.

Button

Button

Or you could always get inspired by this bolder red button.

Sign In Button

Sign In Button

You might also want to check out this green sign in button and the way it blends in this interface design.

Big ‘ol button

Big 'ol button

This is yet another cool example of mixing colours with textures into a neat interface design.

Stable.io Login button

Login button

This textured thematic log in button could be your next source of inspiration.

MOJO Themes redesign

MOJO Themes redesign

This is a cool theme redesign by Brian Hoff that uses a black background and makes all the other colours stand out.

Mkb SRP

cool theme redesign

Mkb SRP is a small insight on Jonatan Flores project which has a neat interface design.

[Redacted] Quality Service

neat interface design

This interface design mixes textures with neat and clear designs making this example a good source of inspiration for futures projets.

Home Button

Home Button

If you’re in the mood for something more elegant than this home button is just what you’ve been looking for.

Upload button

Upload button

This orange upload button blends in really well with the light blue grungy texture in the background.

Download Button

Download Button

This is yet another example of a black background that makes typography and colours stand out.

Chunky Button

Chunky Button

This chunky sign-up button gives a much friendly look to a monochrome interface.

Wines Menu

Wines Menu

This example mixes textures and a vast range of colours for its interface design.

Trappe Door Menu

Trappe Door Menu

This themed vertical menu is another sneak peek from one of Matthew Smith’s projects.

bS

View the Dribbble shot

This example uses a blue palette and gives a friendly and familiar touch to the interface.

Short cut

Short cut

A shortcut example for a menu bar that uses grey tones in its interface design.

Coming together

interface design

This is a sneak peek at an online food menu by Matthew Smith that uses warm colours and white typography.

Still working on it…

white typography

This is Danny’s sneak peek of a project he’s been working on. It uses smooth textures and huge typography.

Theme Menu

Theme Menu

This is yet another project that uses orange and other warm colours in its interface and the background texture is something you don’t see every day in website designs.

Expanded menu

Expanded menu

This expanded menu an insight from one of Mike Precious’ projects.

Management Control Panel

Management Control Panel

This management control panel has a good choice of colours and texture in its design.

Pricing Welcu: UPDATE

Pricing Dribbble shot

The Pricing Welcu example uses a blue-grey palette and has a more formal interface.

Web Design

Web Design by Mike

This one uses warm colours and the right typography which give the interface an elegant touch.

Any Menu

Any Menu

This a much more colourful example from ‘Any Menu’ that gives the interface a much friendly design.

The post Huge Showcase of 85+ Detailed Interface Design Elements appeared first on Line25.

Project Management for Humans

Sep. 14th, 2017 06:40 pm
[syndicated profile] alistapart_feed

A note from the editors: We’re pleased to share an excerpt from Chapter 6 of Brett Harned's new book, Project Management for Humans, available now from Rosenfeld Media.

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.)
Spreadsheet showing each person as a column header, with rows corresponding to different tasks, all totaled at the bottom.
Figure 6.1: Use a Google Spreadsheet, Numbers, or Excel to input your project and team data.

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.

Tools

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.

TL; DR

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.
  • Remember that you’re dealing with people here.

Want to read more?

This excerpt from Project Management for Humans will help you get started. Order the full copy today, as well as other excellent titles from Rosenfeld Media.

Project Management for Humans
[syndicated profile] line25_feed

Posted by Iggy

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.

Kaleidoscope

Kaleidoscope Mac app web design

Check out Kaleidoscope, for example, it uses vibrant colors for their logo, typography in all shapes and sizes and a neutral purple texture for its background.

iMazing 2.3

iMazing 2.3 Mac app web design

This new iMazing app version comes with a lot of cool features and improved backup. This website uses a minimalist design that keeps it simple and cool and uses lots of screenshots.

Transmit

Transmit 5 Mac app web design

Transmit’s website presents their app through a lot of content. They use huge animated icons and typography and if you’ll continue scrolling you will also notice many explanatory screenshots.

RapidWeaver

The Best Mac Web Design Software RapidWeaver

This app will help you build the website you’ve always dreamed of. RapidWeaver 7’s website uses a lot of good content to present their app’s features. They use videos, slideshows and so much more.

Delibar

View the website Mac app web design

Delibar focuses and on managing bookmarks and this app’s website has a friendly interface thanks to the oversized icon and buttons and its light blue textured background.

Versions

View the website Mac app web design

Versions’ website uses a black background on which their green logo and white typography stand out.

Silverback

Silverback 3 Mac app web design

Silverback also has a friendly interface that uses a light green background and has the perfect mix of typography and color.

Espionage 3

Tao Effect Espionage 3 Mac app web design

They have a sharp and neat web design layout that focuses on presenting the perks of using Espionage 3. You can even watch a video tour of their app.

Flume 2.7

Flume 2.7 Mac app web design

Flume 2.7 is a photo editing and sharing app for Mac users that has plenty new features. Their app’s website uses a neat and elegant design layout.

Cornerstone

Cornerstone Mac app web design

Cornerstone has a much more minimalist web design layout. The first thing you’ll see is their logo followed by horizontal bands of screenshots and other content.

Spark

Spark for Mac 1.3 Mac app web design

Spark is your go-to email app for Mac with a very aesthetic interface and it is also easy to manage. Their website also uses a minimalist design with lots of typography and screenshots.

Postbox

The Power Email App Postbox

This is yet another email app for Mac. Their website also uses horizontal bands and bright colours in the header followed by a minimalist design and good content.

Espresso

Espresso The Web Editor for Mac

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.

Capo

Capo Learn More Songs in Less Time Mac app web design

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.

Common features

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.

Vibrant colours

 Mac app web design

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.

Large buttons

Tao Effect Espionage 3 Mac app web design

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.

Features icons

Transmit 5 Mac app web design

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.

Oversized icons

 Mac app web designs

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.

Designed layouts

 Mac app web designs

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.

Modal windows

Transmit 5 Mac app web design

Javascript Lightboxes and modal windows have become pretty much standard in today’s web, but this particular style of the window appears time and time again in Apple-related site designs. These lightbox windows are great for showing off screenshots of the app, or an introductory video.

Crisp & sharp interface design

Cornerstone for Mac

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.

The post Best Mac App Design: Showcase & Trends appeared first on Line25.

[syndicated profile] line25_feed

Posted by Tom Walker

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

imagely wordpress plugin for designers

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!

FlippingBook

FlippingBook wordpress plugin for web designers

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

Download WordPress plugin for graphic designers

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.

Facebook Connect

Download WordPress plugin for designers

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 Mobile Plugin

wptouch wordpress plugins designers

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.

Free Tools to Automate Your Site Growth

-Free Tools to Automate Your Site Growth — WordPress Plugins

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!

Jetpack 

jetpack wordpress plugins designers

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!

Smart Slider 3 

Smart-Slider-3-—-WordPress-Plugins

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.

Easy Testimonials

Easy Testimonials WordPress Plugin

Easy Testimonials is an easy-to-use WordPress plugin for adding testimonials to the sidebar, as a widget or embedding them into your site. Testimonials can also include an image, not just text.

Instant Articles for WP

instant-articles-for-wp-wordpress-plugins-

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.

Max Mega Menu

Max-Mega-Menu

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.

Envira Gallery

envira gallery wordpress plugins designers

If you want to create responsive photo & video galleries Envira Gallery is the plugin you want to use. This is a WordPress gallery plugin that is both powerful and user-friendly.

WordPress Picture / Portfolio / Media Gallery

portfolio wordpress plugins for designers

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.

Pretty Link

Download wordpress plugins for designers

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.

Sprout Invoices WordPress plugin

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.

Sprout-Invoices---Client-Invoicing-&-Estimates-_-Quotes-—-WordPress-Plugins

The post 15 Essential WordPress Plugins for Aspiring Designers appeared first on Line25.

A List Apart volunteer update

Sep. 13th, 2017 01:08 pm
[syndicated profile] alistapart_feed

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.




Jeffrey

 

[syndicated profile] line25_feed

Posted by Iggy

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.

TopStyle

TopStyle Editing Apps For Windows

TopStyle for Windows contains powerful tools for building standards-compliant web sites. It includes useful features such as live preview, built in validation, live editing, and HTML5 support.

Screenshot

Application screenshot

Notepad2 (FREE)

 Editing Apps For Windows

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.

Screenshot

Application screenshot

Stylizer

Stylizer Editing Apps For Windows

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.

Screenshot

Application screenshot

Brackets

Brackets - A modern, open source code editor

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

Style Master CSS Editor

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.

Screenshot

Application screenshot

PSPad (FREE)

Editor PSPad Editing Apps For Windows

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.

Screenshot

Application screenshot

Rapid CSS

Style Master CSS Editor

Rapid CSS features both manual editing capabilities and the option of having a stylesheet automatically created. Other features such as auto-completion, code inspection and validation make it a good competitor. This comes with CSS checker and instant built-in multi-browser preview. It also loads much faster than any other CSS editors, supports HTML, CSS, LESS, SASS, JavaScript, PHP, XML, ASP, Perl and more, lets you edit directly on your web server or publish local development copy updates with a single click and even has a built-in multi-browser preview.

Screenshot

Application screenshot

Responsive Site Designer

Responsive Site Designer Editing Apps For Windows

RSD has a lot of new features that can come in really handy, such as a width slider, custom breakpoints and also comes with a large library of pre-built items and symbols.

EngInSite CSS Editor

Visit the app website Editing Apps For Windows

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.

Screenshot

Application screenshot

Komodo Edit

Download Komodo Edit Editing Apps For Windows

Komodo Edit can be used for editing HTML, XML, and other text files and comes with a lot of features. You can also add some extensions available for languages and special characters.

Dreamweaver

Buy Adobe Dreamweaver Editing Apps For Windows

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!

Screenshot

Application screenshot

Notepad++

Notepad++ Home Editing Apps For Windows

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.

Screenshot

Application screenshot

The post HTML & CSS Editing Apps For Windows Designers appeared first on Line25.

[syndicated profile] alistapart_feed

A note from the editors: We’re pleased to share an excerpt from Chapter 2 of Rachel Nabors's new book, Animation at Work, available now from A Book Apart.

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.

Transitions

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.

Fig 2.1: On this Nike page, transitions are used to navigate forwards and backwards along a linear continuum of sneakers. (Watch the accompanying video.)

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.

Fig 2.2: On Fluevog’s website, transitions move users from the browsing context to the searching context. (Watch the accompanying video.)

Supplements

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).

Fig 2.3: Glossier.com uses supplemental animation to show and hide the user’s shopping cart, keeping them in the shopping context longer without forcing them into the purchasing context. (Watch the accompanying video.)

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…

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.

Fig 2.4: On the Monterey Bay Aquarium’s site, hovering on a button triggers an animation that gives the user feedback that the element is interactive. (Watch the accompanying video.)

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).

Fig 2.5: Design studio Animal uses a progress to let users know how much of the page has loaded, and an animated logo to indicate when it’s fully loaded. (Watch the accompanying video.)

Demonstrations

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!)

Fig 2.6: TurboTax both informs their users and masks long page loads by demonstrating what’s going on after the user submits their US tax forms. (Watch the accompanying video.)

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.”

Fig 2.7: As visitors scroll through Coin’s site, the company’s value proposition plays out in front of them. (Watch the accompanying video.)

Decorations

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).

Fig 2.8: Revisionist History’s site uses decorative animations to add visual interest to non-visual media. (Watch the accompanying video.)

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.

Fig 2.9: Polygon uses decorative animations as a showstopping feature to stand out from the competition. (Watch the accompanying video.)

Want to read more?

This excerpt from Animation at Work will help you get started. Order the full copy today, as well as other excellent titles from A Book Apart.

Animation at Work by Rachel Nabors
[syndicated profile] line25_feed

Posted by Iggy

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.

We have gathered here some top HTML and CSS editing apps for Mac designers.  These super lightweight coding applications have all the required features needed for coding awesome web projects and offer support for HTML, CSS, Javascript, and PHP. Check out all of their powerful features, along with some screenshots, to see how they look like.

Coda 

Coda Editing Apps For Mac Designers

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.

Screenshots

Application screenshot

Application screenshot

CSSEdit 

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.

Screenshots

Application screenshot

Application screenshot

TextMate 

textmate Editing Apps For Mac Designers

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.

Screenshots

Application screenshot

Application screenshot

BBEdit 

Bare Bones Software BBEdit Editing Apps For Mac Designers

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.

Screenshots

Application screenshot

Application screenshot

Espresso 

Espresso The Web Editor for Mac Editing Apps For Mac Designers

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.

Screenshots

Application screenshot

Application screenshot

Dreamweaver

Buy Adobe Dreamweaver Editing Apps For Mac Designers

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.

Screenshots

Application screenshot

Application screenshot

HyperEdit

hyperedit Editing Apps For Mac Designers

HyperEdit is a super lightweight coding application that combines the edit pane with a Safari powered preview window which allows for fast and easy page building. With the key features of code highlighting, snippets, live validation and support for HTML, CSS, Javascript and PHP it includes everything you need in a small package.

Screenshots

Application screenshot

Application screenshot

skEdit

skEdit Mac HTML and Text Editor Editing Apps For Mac Designers

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.

Screenshots

Application screenshot

Application screenshot

Firebug

firebug Editing Apps For Mac Designers

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.

Screenshots

Application screenshot

Application screenshot

The post Top HTML & CSS Editing Apps For Mac Designers appeared first on Line25.

[syndicated profile] line25_feed

Posted by Iggy

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

Online Gift Cards and Printable E-gift Cards 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

Printed Work Wear Texture Use 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.

Retin Art

Retinart Reflections Texture Use in Web Design

Retin Art has a background made out of horizontal bands in blue tones. Some of them are clear backgrounds while the middle one has a texture added to it.

Besupercharged

Fueled by Design Supercharged Texture Use in Web Design

This website successfully combines typography with texture into a nice web design layout. It uses subtle textures all over the design, from logo to other web elements on the page.

Simon Collison

Simon Collison Texture Use in Web Design

Simon Collison’s website uses a math paper texture as background. Furthermore, he uses a grid-like gallery to showcase his articles.

AmazeeLabs

amazeelabs Texture Use in Web Design

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.

Intellisult

Intellisult Texture Use in Web Design

Intellisult uses texture to give the website a more familiar look for its users. This is an interactive website where you can play with your friends in an intelligent way.

Headlampcreative

Adobe Photoshop CS6

Headlampcreative uses horizontal bands of concrete texture as its background which gives a realistic feel to the interface. Subtle textures are present throughout the design.

Vestfrost

Vestfrost Texture Use in Web Design

Vestfrost uses a series of ‘icy’ textures to give the impression of an animated site as you scroll. It is winter-themed and the chosen textures match the branding perfectly.

The Box

The Box - Episode 2

The Box uses a simple dark blue texture with vertical lines as the background to present their episodes on.

Wheres-lolly

Where's Lolly Texture Use in Web Design

This interactive website uses different textures to create a background for an exploration game. All you have to do is guess where the plane is taking you.

Marie Catribs

 Texture Use in Web Design

Marie Catribs’s website uses textures to give readers a friendly and familiar vibe. It has a colorful and playful web layout that makes you want to try out her dishes immediately.

Ecoki

Ecoki The Eco-Lifestlye Texture web

This website’s aim is to raise awareness on a sustainable way of living. It uses grungy textures to give the site a tactile and realistic touch.

Lucasbigot

Lucas B. Texture web

This is an example of using texture and animations to make your website look more dynamic. It uses different types of textures with vibrant color and cool transition effects.

Kaleidoscope

 Texture web

This website uses a large range of textures in its layout design. Its purpose is to present a very useful app that sports differences on sight.

Deconstructing first families

Deconstructing First Families Texture web

This is yet another good example of a website that uses paper texture in its background. The font style is also really well chosen and matches the design.

Chord Surfer

Chordsurfer Texture web

Chord Surfer is also an interactive website that lets you play a really cool game. All in all, this website has a friendly and familiar touch thanks to the pink texture.

Studiokraftwerk

Studio Kraftwerk Texture web

Their background texture changes as you move your mouse. It can get a white trail or it can get blurry, either way, they found a creative and cool way to use it.

La Piece

La Pièce Texture web

La Piece uses a series of textures that either has a repetitive geometric motif to either turn into an illustration or a faded map. This is yet another cool example of using texture in a creative way.

Revelation Concept

Revelation Concept San Diego Web Design & Development Texture web

Their website uses textures with warm colors like light ochres and red to give offer their readers a more tactile and familiar experience with the interface.

Designeers

Designeers Design agency Texture web

Designeers’s website uses a slideshow of textures and images with a powerful background and meaning to present themselves as a design agency. This web design has a grungy look.

Daveruizdesign

Dave Ruiz Digital Product Designer Texture web

Dave Ruiz’s website is another example of using horizontal bands with different textures or colors. They make the page look friendly and joyful.

Moritzwelker

Moritz Welker Texture web

This site uses a dark grungy texture that makes every project done by Moritz Welker stand out in his online gallery. It combines cool vector illustrations with unique typefaces.

Creative Soapbox

Home Creative Soapbox Texture web

With a simple design and some warm coloured textures, you can go a long way like Creative Soapbox’s website which focuses on designing user experiences.

Jacob Joins

Jacob Joins - Global Cooking Texture web

This website represents Jacob Joins’ project regarding different eating habits and cultures all over the world. It uses textures and warm colours that gives the site a sensitive touch.

Lorena Orraca

Lorena Orraca Film Director

Lorena Orraca is a film director as her business card website points out. This site combines texture and typography in a very creative way. It uses paper textures as well, as the background.

Word Refuge

 Texture website

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.

Fringe Development

fringe development Texture website

With their elegant design, Fringe Development uses a light ochre texture with grey typography to offer a warm and tactile feeling to their readers.

Five Thirty Brew

Five Thirty Brew by blenderbox Texture website

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.

In Motion

In Motion Mobile Massage, London Texture website

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.

The post 30 Inspiring Examples of Texture Use in Web Design appeared first on Line25.

[syndicated profile] line25_feed

Posted by Iggy

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.

Places where your app may be used

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.

Define your app goals

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

App design is 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:

Useful tips for designing apps

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.

Screen size/resolution can differ even under the same brand.

What you need is an app with equally scalable graphics and UI elements, which will preserve consistency on all devices.

5. The ‘multi-user’ and the ‘multi-device’ cases are obligatory parts of your work

Take into consideration that a single user may use various devices, the same way as a device may be used by more than one user.

It is essential to create a registration process, where each user will have an account he/she could use on every device containing your application.

Designing mobile apps

An additional advantage of creating accounts is that syncing between devices becomes much easier.

Also, make sure you create an easy to use register and login process. Many apps make it difficult to register. If it takes more than 1 minute, you’ve already lost a good percentage of potential users.

Some UX designers advise that you should leave certain parts of your app open to non-registered users. In this way, they can tell if they need your app or not.

 6. The platform can make it or break it

Don’t be tempted by the pile of platforms on the web. Your task is to choose the best one (best ones) among them; and to be careful when transferring your app from one platform to another.

Best app platform to use

Think which is the most suitable platform for your app-you certainly don’t want your app to be dysfunctional because you displayed it on Meteor instead of React.

Make sure you’re using the best generic codes and source products for your type of app; and that they correspond to the platform you’re planning to use.

7. Use color to indicate purpose

Colors are either applied to indicate purpose, or ordered in a gradual manner to highlight importance.

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

App design tips

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

App design overview

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!

Example of great app design

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.

Ending thoughts

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).

The post 10 Things to Know When Designing Mobile Apps appeared first on Line25.

[syndicated profile] line25_feed

Posted by Iggy

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.

Design a Stylish Timeline Portfolio Page Using Photoshop

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.

Create an Elegant Patterned Web Design in Photoshop

View the web design tutorial

This tutorial is made by Eric Hoffman who will teach you how to create elegant patterns in Photoshop. This is only one of his tutorials, if you’re interested then have a look!

Designing an Elegant Blog Layout in Photoshop

If you want your project to have an elegant touch this tutorial will definitely do the trick. You’ll have to find an image that sends a strong message and a motto.

How to Create a Grunge Web Design Using Photoshop

How to Create a Grunge Web Design Using Photoshop

This easy tutorial comes in really handy if you’re ever in need of a catchy grunge-themed web layout and you don’t even have to be experienced in Photoshop.

Design a Textured Outdoors Website in Photoshop

View the web design tutorial

This tutorial will teach you how to design a textured outdoor website using only Photoshop. This is an easy step by step tutorial.

Designing a Simple Instagram Based Portfolio in Photoshop

Have you thought about designing an Instagram-based portfolio tutorial for yourself or your clients? In this tutorial, you’ll learn to use a clean color palette and some smooth typefaces.

How to Design a Clean Business Website with Photoshop

How to Design a Clean Business Website with Photoshop

If you’re trying to design a web page that focuses on promoting a business you might want to have a look at this tutorial and find out some new tricks throughout the process.

How to make a website template

Photoshop Web Design Tutorial How to make a website template

This video tutorial will teach you how to make a website template from scratch using Photoshop. You will be guided through each step of the process.

How to Design Creative Website Header in Photoshop

How to Design Creative Website Header in Photoshop

If you were having trouble with designing your website’s header, then this tutorial might come to your rescue.

The Most Detailed PSD to HTML Tutorial

The Most Detailed PSD to HTML Tutorial

This detailed tutorial covers nearly everything you need to know starting with wire framing to converting your PSD into a working and responsive HTML page.

Create A Basic Web For Beginners

Web Design In Photoshop Tutorials_ Create A Basic Web For Beginers

This easy tutorial will teach you the how to create a basic web using Photoshop. You’ll find all the resources you need, below the video.

How to Create A Professional Website (Part 1)

How to Create A Professional Website

And if you’re looking for an advanced tutorial that will teach you how to create a professional looking website you might want to stop what you’re doing and have a look at this example.

Simple web page template design in photoshop

Photoshop tutorial Simple webpage template design in photoshop

For this tutorial, you only need some basic knowledge on Photoshop and web design. It will teach you how to make a simple web page template from scratch using Photoshop.

How To Make A Single Page Web Design In Photoshop

How To Make A Single Page Web Design In Photoshop

This is yet another useful tutorial that will show you each step of the process required to create a single page web design in Photoshop.

Photoshop Webdesign – Booking Travel Site

Photoshop Webdesign

If your project is more specific, like a site for a traveling agency, you could have a look at this example that teaches you how to design a booking travel site.

Afro Portfolio Website Design In Photoshop – Photoshop CC Tutorial

Afro Portfolio Website Design In Photoshop - Photoshop CC Tutorial

Learn to design a cool website with help from this video tutorial. This template mixes bold colors, huge handwriting typography, and powerful images.

Create a Clean and Classy Web Design in Photoshop

View the web design tutorial

Six Studios will walk us through every step of making a clean and classy web design in Photoshop. You can also see a working demo which can be downloaded at the bottom of the page.

Design a Minimal and Modern Portfolio Layout with Photoshop

View the web design tutorial

This tutorial is exactly what you need to create a modern portfolio layout with Photoshop. You can also check some of their other tutorials, they’ve got plenty of them.

Create a Theme Store Website Layout in Photoshop

View the web design tutorial

This is yet another easy step by step tutorial that will come in really handy. It also comes with a PSD available for download.

Stylish Portfolio With Grain Texture

Photoshop Website Design Tutorial - Stylish Portfolio With Grain Texture

Check out this cool video tutorial and see how many cool things you can learn. It uses dark gray colors and a texture film grain to give it an elegant touch.

Simplistic Black and White Portfolio Layout in Photoshop

View the web design tutorial

If you’re in the mood for a monochrome clean design layout then you should read this Photoshop tutorial. This one also comes with a PSD available for download.

Beautiful Music Streaming Website Design in Photoshop

View the web design tutorial

With this tutorial, it has become even easier to stream music on your website. Check out this PS tutorial to find out how to can make a beautiful music streaming design in Photoshop.

Design a Sleek Textured Blue Portfolio

View the web design tutorial

Improve your project with this Photoshop tutorial about how to design a sleek textured blue portfolio and find out some of new tips and tricks.

How To Create a Website Layout With Photoshop From Wireframe

How To Create a Website Layout With Photoshop From Wireframe [Part 2]

Transfer your wife frame to Photoshop so you can focus on the small details such as buttons and text headings and find the right position and size for them with help from this tutorial.

Photoshop Website Design Tutorial

Photoshop Website Design Tutorial

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.

How to Make a Light and Sleek Web Layout in Photoshop

View the web design tutorial

With the use of Photoshop and 960 grid, this tutorial will teach you how to make a light and sleek web layout.

Web Development Basics of web design process and theory

Web Development Basics of web design process and theory

This is an excellent video tutorial about web development and design process for you, especially if you’re at the beginning of your career.

Create a Web Layout with 3D Elements using Photoshop

View the web design tutorial

If you’re in the mood for a change in your website, check out this tutorial which will teach you how to make a sleek and professional web layout with 3D elements.

Create a Clean Modern Website Design in Photoshop

View the web design tutorial

This is a really helpful tutorial which will teach you how to make a modern, crisp and clean web page layout ready for coding.

Make a Stylishly Elegant Portfolio Web Design in Photoshop

View the web design tutorial

This is another helpful Photoshop tutorial from Six Studios which will teach how to make a stylish and elegant portfolio design. Feel free to check it out.

Create an Elegant Portfolio Web Design in Photoshop

View the web design tutorial

Give your portfolio an elegant touch with this Photoshop tutorial and learn some of the tips and tricks that come along with it.

The Ultimate Guide to Converting a PSD to HTML and CSS

The Ultimate Guide to Converting a PSD to HTML and CSS

Last but not least, this tutorial is yet another example of a detailed Photoshop tutorial that will walk you through every step of making your Photoshop template into a working HTML.

The post 35 High Quality Photoshop Web Design Tutorials appeared first on Line25.

New A List Apart wants you!

Sep. 7th, 2017 02:00 pm
[syndicated profile] alistapart_feed

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:

Teams

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
  • Project management
  • Your suggestions!

Membership

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 contact@alistapart.com—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

 

 

July 2009

S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728293031 

Style Credit

Page generated Sep. 21st, 2017 10:33 am
Powered by Dreamwidth Studios

Expand Cut Tags

No cut tags

Most Popular Tags