Showing posts with label Designing. Show all posts
Showing posts with label Designing. Show all posts

Saturday, May 16, 2015

Tools & Web-Based Apps for Designing Creative Resumes



In many fields, a standard resume is sufficient. Listing your strengths, experience, memberships and qualifications lets potential employers evaluate whether or not you’re a good fit for a company, and whether or not to bring you in for an interview. It’s a fairly straightforward process.


For professionals in more creative industries the competition to get noticed can be intense. As an employer sorts resumes into “yes,” “no,” and “maybe” piles, you have just seconds to speak to that hiring manager or recruiter and impress them with your accomplishments.


One of the ways you want to make your resume stand out is by visually highlighting your innovations and capabilities. Have you designed popular infographics or websites for interesting clients? Are you a photography master who will hang from trees upside-down to get a killer shot? If the answer is yes, how you present these projects and skills on your resume is the way you can shine.


More employers than ever – 77% of employers to be exact – are searching for candidates online prior to scheduling interviews. Even if you’re likely to stick with a hardcopy resume format, hiring managers will appreciate a little something extra. In the creative field, if you’re not representing yourself online or at least creating a resume that clearly articulates your skills, you’re missing out on opportunities.


Check out the tools below for creating a complete creative resume that will help to get you noticed:


Represent


Created with designers in mind, Represent allows users to create minimalist, responsive portfolios that function like webpages. Think of it as an online visualization of everything you’re capable of and what your potential clients – or employers – could be looking for.



For .99 per year, users can create simple yet striking professional webpages that highlight professional experience and link out to social networks, online portfolios, and more. Unlike other online resumes that take design to the extreme, Represent focuses on the basics. Online profiles take little effort to build and can be modified easily at any time. Users can test a demo prior to making any purchase decisions.


Kickresume


In just 4 easy steps, Kickresume helps you create a “kick-ass” resume. The site offers about 8 ready-to-go templates and promises to add more. It’s a good option if your focus is more on organizing all your accolades into a standard format with just a little bit of style.



To start, pick the template of your choice and go through their quick sign-up process. If you already have an established LinkedIn profile with all your work history details, this step is even easier – Kickresume offers an import data option. Once you’ve added everything you’ll be able to review it as well as save it to your computer. There’s also an option to download it as a PDF. Sign up takes less than 30 seconds and the service is free.


Krop


Krop is a California-based business that offers a couple different services all combined into one. They host their own creative job board, as well as online candidate portfolios and resumes.



There are a few options when it comes to Krop – their pro account costs .25 a month, but lets you create a stunning online portfolio using a wide-variety of eye-catching themes, including ones with video backgrounds. They also offer a free resume only option, where you can organize your accolades and then post your resume within their online database. If you’re interested in getting your resume up and running, as well as discoverable, the free option is a great place to start.


Easel.ly


Also utilizing the infographic trend, Easel.ly has been designed to allow users to create informative and fun graphics “easily.” This free service can also be used to create unique resumes.



By registering on the homepage, a user can select from thousands of templates, insert his or her professional information, and share the resulting graphic across the web. While it does not link to social profiles or autofill, the application is a great resource for someone looking for more creative control over the infographic components, right from their browser.


With a good eye and some patience you can pull together a nice infographic style resume using their templates and tools.


Accredible


Maybe you’ve taken so many CE courses or other professional coursework that they could fill your resume on their own. If this sounds familiar, don’t worry. There’s a tool for you.


Accredible has been designed to highlight these courses, in addition to your professional attributes, using a portfolio format. This allows potential employers to browse your qualifications or dig as deep as they’d like into what you have to offer. The tool has been designed to allow users to create online portfolios that bring those skills to life.



For each qualification or key competency listed, users may include photographs, official documents, videos and other facts to back it up. The easy-to-use site and the resulting portfolio allows employers to make hiring decisions based on demonstrated facts, rather than employee claims alone. The site requires some effort from the user to produce nice results, but the price of free makes it well worth the time.


Visualize.me


If your LinkedIn account is current, the resulting resume is created in seconds with Visualize.me. With six free templates and multiple style options, users have complete control over the creation process without becoming overwhelmed with too many options.



Users can manage which information is shared and which topics are eliminated from the final product. This tool is especially effective for those who have extensive project experience and would like to demonstrate expertise without overwhelming with lists and bullet points.


VisualCV


VisualCV offers over 8,800 resume samples and touts that over 450,000 high-level applicants have utilized their services. They have samples and templates from many industries and roles, including graphic design.


resume_08


Samples offer the option to include small images of your projects alongside where they appear in text, or tie everything together with a bold full-screen background. Instead of clicking and navigating away, or having to look elsewhere in a folder, managers can easily see samples of your work as they skim through your qualifications.


After choosing your design and signing up, you’ll be able to publish your resume online (it will look great on both web and mobile) or print as a PDF for more traditional job applications. Another really strong feature is the tracking and analytics – VisualCV offers you metrics so you can see how often your resume is viewed and where the visits came from. The starter kit is free and has some feature limitations, while the professional pricing model is per month and grants you access to all features.


Get Creative and Explore Your Options


In many fields, a standard resume is sufficient. Listing your strengths, experiences, memberships, and qualifications lets potential employers evaluate whether or not you’re a good fit for a company, and whether or not to bring you in for an interview. Some employers even look down on a flashy resume, wondering what those frills are trying to make up for.


But if you are in a creative or more image-centric industry like design or marketing, a creative resume can really help you stand out when competition is fierce. Take the time to explore the options above and think about which features will best showcase your skills. The important point to remember about any resume is not just the content on there, but how you organize and present your industry accomplishments so that you stand out in your industry.


There are many online options for creating design-worthy resumes. Whether you’re looking to build out your digital portfolio or organize your creative accomplishments into a mobile-friendly format, the time to highlight your abilities online – in addition to on paper – is now.




The post Tools & Web-Based Apps for Designing Creative Resumes appeared first on Speckyboy Web Design Magazine.



Tools & Web-Based Apps for Designing Creative Resumes

Monday, March 9, 2015

The Essentials of Designing Hotel Reservation Interfaces



Much like the shopping cart and checkout processes for e-commerce, the room reservation process is a critical part of any hotel’s online presence. Due to the key role it plays, the reservations process has the power to influence the overall impression that guests form about a hotel brand and the type of experience that they can expect from the brand (both online and offline).


Unfortunately, the reservations process has historically been – and for many hotels, still is – the part of the website that often suffers the most from poor design and user experience. And in many cases the contrast between this part and the rest of the website can be quite stark, resulting in a sort of Jekyll and Hyde user experience.


In this article I’ll look at how hotel reservations has traditionally been implemented, and then I’ll present the 3 main components of a reservations process, along with essential items to keep in mind during design and implementation so as to provide guests with a positive experience.


The Legacy of Hotel Reservations Systems


Several months ago, as my team and I researched digital design trends in the travel industry, we observed that while some hotel brands are setting designs trends of their own, many others are still playing catchup. Very basic and dated reservations designs are still very commonplace.


To put things in context, here’s an example of what I consider basic and dated:



Henry Jones Art Hotel


The above screen displays after the users has submitted a reservation request for a specific set of dates. Most of the key information that the user needs is there. All the necessary call-to-actions are present. But overall, there is a certain amount of visual weight and general drawbacks, such as:


  • One has to invest time into dissecting the various part of the interface: the breadcrumb at the top, the search fields directly below, the room and price listings (along with the two types of categories contained within that section), and so on.

  • The buttons, fonts and colors are quite prominent and loud which adds more visual weight to the interface.

  • Less pertinent information – such as the 4 rooms that are not available for the selected dates – are presented in the same style as the available rooms. By presenting less relevant information in the same style as the relevant information, the user’s attention is distracted by content that is ultimately, not helpful.

  • Long descriptions of the hotel are presented here and this seems odd. While there is certainly the business need to engage the user and upsell, the reservations interface is primarily a “workspace” for guests, and has a very specific function. So any extensive storytelling that relates to the hotel’s history, ambiance, and the like is best left to more suitable pages of the website.

When other industries seem to be breaking new ground every day in the domains of design an user experience, why is it that the hotel industry is still delivering such sub-optimal experiences? Well, it’s not that the hotel industry is hiring bad designers. It’s in part due to the industry’s general slowness to evolve and adapt (as pointed out by this hotel group CEO). And it’s also due to another major catch, specifically in the hotel reservations world: 3rd party reservations system.


Historically, these backend reservation systems were conceived as administrative tools that allow hoteliers to manage room availabilities and rates, blackout dates, etc. Look and feel was never a major priority. According to Jean-Yves Simon, CPO of Product at Fastbooking, “Generally booking engine vendors do provide a certain level of personalization and customization, but it’s limited to colors and text for the “out of the box” or SaaS version”.


However, as digital identity, design and user experience are becoming more of a priority for the hotel industry, vendors are making it easier for designers to unleash their creativity. “More and more vendors, particularly those targeting hotel chains, provide fully customizable versions of their tools”, Mr. Simon says. “At Fastbooking, for example, we have development partnerships and APIs and in-house development services that allow customers to address their need for full customization”.


These sort of evolutions are a great step forward that allows designers and product managers to focus on creating digital experiences that really represent the hotel brand and the needs of their guests, rather than just working around the limitations of the reservation system.


With this background in mind, let’s move forward by examining the 3 components of a hotel reservation process and the checklist of items you should always keep in mind when designing this process.


The 3 Components of Hotel Reservations


When designing a hotel reservation process, it is helpful to break it up into 3 basic components:


  1. Search.

  2. Results.

  3. Booking Validation.

The idea of these 3 components is to approach things from guest’s point of view, which in story form can be formulated as such:


“I need a room (Search), that is [of a certain size, costs a certain amount, comes with free breakfast, etc.] (Results) which I can book for my next trip (Confirmation)”

By breaking up the process into 3 components you can then evaluate what is needed for each and subsequently, decide how they whole things fits together into a seamless process.


Let’s take a look at each component and some general pointers to keep in mind as you work on design and implementation of a reservations process.


1) Search


The first step in the reservations process is all about collecting basic information from the guest so that you can propose room options that they will explore and evaluate (in components 2 and 3) of the process. This initial Search phase needs to be quick and easy, ideally requiring little investment of time and effort on the guest’s part.


Things to keep in mind:


  • Display search fields on homepage: While it is traditional to have a Reservations button that leads to a dedicated page, consider having the search fields immediately available on the homepage. This small change can be a time-saver for busy travelers who are evaluating their options. Of course, by placing the search fields on the homepage, you want to make sure that they work with the overall design and don’t come across as an element that is being forced on to the user for the sake of conversion.

Do display search fields directly on the homepage
Hotel G: Do display search fields directly on the homepage.


A nice alternative to displaying the search fields on the homepage is to have them permanently displayed in a sidebar or top header. The benefit here is that you give users the flexibility of searching for rooms from any page of the website. They don’t have to go back to the homepage when they get the urge to make a reservation.


Do consider using a fixed sidebar to give access to the search fields
Art Series Hotel: Do consider using a fixed sidebar to give access to the search fields.


Do place search options in a fixed top bar if it works with the layout
Vault Karakoy – House Hotel: Do place search options in a fixed top bar if it works with the layout.


  • Limit the number of search fields: Save guests some time by limiting the number of fields they have to fill. The point is to get them on to the Results phase where they can explore the various rooms available. The absolute minimum information one really needs in order to search for rooms is: check-in and check-out dates; number of guests.

Do place search options in a fixed top bar if it works with the layout
Lobagola: Date and guest information is sufficient to kick off a Search.


If you’re designing for a hotel with multiple geographical locations, then this is also a good time to collect the destination information.


Do ask for the minimum information such as dates and destination
Autograph Collection Hotels: Do ask for the minimum information such as dates and destination.


  • Auto update check-out date: This one is a pet peeve we can all relate to…once the guest has selected their check-in date make sure that the check-out date field updates accordingly. So if I am on your site in April and I select a June check-in date, don’t insist on still displaying April in the check-out date field.

  • Discount code fields should be optional: If the hotel you are designing for offers promotional or discount codes, make sure that these fields don’t feature very prominently amongst the search fields. They should be optional, usable via the selection of a checkbox that activates them or by making them expandable/collapsible.

optional promotional code fields
Ace Hotel: Do “hide” optional promotional code fields.


  • Only ask for information that is used in search algorithm: This is another pet peeve that many can surely relate to…be absolutely certain that every piece of information you collect from users will be used to filter the search results. That means if you ask users to submit the number of children they will be traveling with, then that information should be used in the search algorithm. Otherwise, the search and the subsequent results become irrelevant for the user (more on this in the section about the 2nd component, Results).

2) Results


You’ve collected information from the guest about their travel dates and it’s time to show them what you got. Entice them to move forward with finalizing their reservation.


Things to keep in mind:


  • Make sure results match search criteria: As I mentioned in the last point from the previous section, make sure that the results list is relevant in relation to the search criteria submitted by the user. In the example below the search criteria was 1 room for 2 adults and 2 children. Of the 7 rooms listed in the results:
    • 2 were for a maximum of 2 adults.

    • 1 was for a maximum of 2 adults and 1 child.

    .


dont display irrelevant results; this can lead to wrong bookings and guest frustration
Amba Hotels: Don’t display irrelevant results; this can lead to wrong bookings and guest frustration.


That’s 3 out of 7 items items in the results list that definitely do not suit the search criteria. If a guest doesn’t pay close attention to this and assumes the search algorithm took all their criteria into account, they run the risk of booking the wrong room and having lots of frustrations upon arriving at their hotel.


  • Use big pictures and highlight key information: Make it easy for guests to take that final purchase decision (and maybe even splurge on a room that they wouldn’t normally consider). This means all items that influence purchase decision (total cost, room size, amenities, items included in cost vs. extra cost items) should stand out in the design.

This also means using big, good quality images to entice the guest. This is particularly important in the case where the guest hasn’t visited the Rooms section of your site before submitting the reservation request. The Results interface is the first time they will be encountering what you have to offer, so use good images to help make the sell.


Do include a slideshow of room pictures and highlight important information
Hotel Negresco: Do include a slideshow of room pictures and highlight important information.


Do make results visual and easy to read
Art Series Hotel: Do make results visual and easy to read.


  • Keep room descriptions very brief: Avoid the urge to include very lengthy room descriptions in the Results. Include just a few bullet points or better yet, make the information hidden, available via a “learn more” button or a mouse over action. This will go a long way towards reducing the visual weight of the results interface.

  • Show original search criteria: Always make sure to clearly redisplay the search criteria the guest submitted and make it easy for them launch a new search without having to go back to a specific starting page.

Do recap the search criteria and make it easy to launch a new search
Thompson: Do recap the search criteria and make it easy to launch a new search.


  • Be upfront about price breakdown: It is always a good idea to give guests the price breakdown information, so that they are aware of any possible rate variances during the course of their stay. Hiding may lead to a raised eyebrow or two, creating some doubt or mistrust in the guest’s mind. Make the display of the information optional to save screen space.

  • Use icons and grids to facilitate rate comparison: And while you are displaying the various rates for a particular room, make it easy for guests to compare and evaluate them. As the example below shows, a smart design using columns and rows gives guests a quick way of understanding what they are getting with each rate.

Do give users access to payment and cancellation policies to avoid misunderstandings
Hotel Negresco: Do make it easy to compare payment rules and items included in rate.


  • Be upfront about cancellation and payments policies: Depending on your design you can either display the information permanently in the default view or make it an optional item that can be viewed on mouse over or by expanding an item.

Do give users access to payment and cancellation policies to avoid misunderstandings
Lobagola: Do give users access to payment and cancellation policies to avoid misunderstandings.


3) Booking


So you’ve collected information from the guest, you’ve given them relevant and enticing room options and they’ve decided to reserve one of the rooms. Now it’s time to secure their booking and convert them into a new (or returning) guest.


Things to keep in mind:


  • Reassure the guest: Since this part of the process requires guests to give away personal information such as address and banking details, it’s a good idea to provide a recap of the reservation cost, dates, number of guests, room selected, etc. Yes, that information was already presented in the previous step but a final recap gives the guest one last chance to double check that everything is in order before making a financial commitment.

Do summarize the reservation details, highlighting key dates and costs
The Hoxton: Do summarize the reservation details, highlighting key dates and costs.


Do summarize the reservation details, highlighting key dates and costs
Graduate Hotels: Do provide the flexibility of seeing reservation summary and details.


  • Spell out all booking terms and conditions: Make sure to point out all payment conditions (e.g. deposit required, full payment required, special fees), terms & conditions (particularly in the case of non-refundable rates), and just like in the Results component, include a reminder for the cancellation and/or reservations policy.

Do highlight deposit fees and surcharges
Dean Hotel Dublin: Do highlight deposit fees and surcharges.


Do indicate fees associated with specific payment methods
Hotel Hotel: Do indicate fees associated with specific payment methods.


  • Confirm, confirm, confirm: After the guest has submitted their personal and payment details, always provide a confirmation message indicating that the reservation has been secured. Once again, quickly recap the details of the reservation and make sure to send a final email and/or text message to the guest.

Conclusion


While the 3 components listed in this article will apply to any reservations process, the details of what goes into each component will vary from one brand to another. As with any design project, a clear understanding of the brand’s positioning, value proposition, objectives, target audience, and other key defining elements will allow you to determine what should ultimately be included in your design.


Regardless of the brand, however, you always want to prioritize flexibility and convenience for guests. This means, for example, that guests can access the search from any page. This also means that guests who are viewing the dedicated page for a given room can reserve that room directly without having to go through the main booking process.


Do include direct reservation from room description pages
Lobagola: Do include direct reservation from room description pages.


While I’m on the topic of convenience and flexibility, let’s not forget the biggie: making sure that the website is responsive. Studies show that 94% of leisure travelers (and 97% of business travelers) have at least one mobile device on them. Reservations made via mobile devices are accounting for more than 20% of hotel bookings, and compared to reservations made via desktops, are growing exponentially. Apps such as Hotel Tonight are catering to the needs of on-the-go, mobile-only travelers while also redefining the hotel market with unique features and memorable mobile design. So the hotel website is no longer something that is done just for the sake of checking off an item on one’s to-do list for brand marketing. It’s existence is necessary for the connected world in which traveler’s live and operate.


As I mentioned earlier the reservations interface is a “workspace” of sorts for guests. This means that even if your user research shows that the hotel’s target audience is technologically sophisticated, you want to avoid having lots of bells and whistles in this particular part of the website. Brands like Rooms Hotel and Pendry Hotels, for example, target modern and tech savvy audience, and their websites are fun, full-on experiences that reflect this. Such experiential and exploratory designs are excellent for many parts of the site, and while some of these elements can be incorporated into the reservations, it’s important to strike the right balance.


Slideshows, music, mouseover effects and other interactive elements are best kept for pages such as the homepage
Rooms Hotel Tbilisi: Slideshows, music, mouseover effects and other interactive elements are best kept for pages such as the homepage.


Resources


As with all projects, the best source of inspiration is the target user. Many factors impact the decision-making process of travelers: budget, life stage, previous travel experiences, and more. The more clarity you have regarding the travelers, the better your chances of putting together a reservations process that is aligned with their needs.


For insights and analyses into societal trends that are shaping the hotel (and the wider travel) industry as well as an understanding of positioning and design trends in the industry, this report put together my team and I, digs into everything from UI patterns, to color choices, and online communication style of various brands.


In addition, look to hospitality and travel-specific resources such as Hotel Chatter, Skift, and Tnooz to get an understanding of how the hospitality and travel business is being shaped.




The post The Essentials of Designing Hotel Reservation Interfaces appeared first on Speckyboy Web Design Magazine.



The Essentials of Designing Hotel Reservation Interfaces

Tuesday, February 24, 2015

Designing Prototypes: 5 Apps That Do It Better Than Photoshop

Photoshop is a popular tool with designers and its extensions such as CSS3Ps and FontAwesomePS make it it a good tool for creating web design prototypes as well. Nonetheless, it wasn’t really created for this purpose and as current trends push forward with responsive design, CSS Pre-processors, CSS Frameworks, and resolution-independent graphics (SVG), Photoshop is becoming less relevant for web design.


Not to worry though as there are plenty of alternative apps built by independent developers to help fill in the gaps. In this post we will take a look at these apps, and find out how far their features excel when compared to Photoshop for creating web design prototypes.



1. Webflow


Webflow lets you design websites by drag-and-drop. Webflow creates the layout based on a Bootstrap grid so your website design is responsive-ready. Webflow also comes with a set of standard web components such as blocks, lists, and text formatting which you can add to the Webflow workspace.


Styles can be easily added from a sidepanel and you can further adjust the properties of the elements as well. Once the design is complete, you can export the results of the design into code HTML and CSS. You also can share your work with a team.



2. Avocode


Avocode supports PSD files and allows you to immediately edit and transform it into a workable website with HTML and CSS. Avocode will extract all the assets in your project including the CSS, Images, and SVG (if any). You can easily extract CSS, in a form of Less, SASS or Stylus for any selected layer, as it has been integrated with CSSHat.


Furthermore, Avocode is equipped with revision control which lets you revert to your previous designs, just in case anything goes wrong.



3. Macaw


Macaw lets you design web layouts and web elements aas if you are working on an image editor like Adobe Photoshop. You can create a columns or block areas, adjust their positioning, and set typography as required. Macaw allows you to change the styles of multiple elements all in one place. You also can use the library to store all the elements for later use.


To create a responsive design, Macaw lets you set breakpoints and optimize your site for all devices. When the design process is completed, Macaw can generate proper HTML and CSS for you.



4. Sketch


Sketch is ideal for designing interfaces and websites. It creates vector-based objects instead of in bitmap. Thus when you resize the canvas size, your design does not lose quality. Features like the ‘built-in grid’ will help you better arrange the object or a web layout placement.


In addition, Sketch renders fonts similar to what is shown on Webkit (think Chrome, Opera, and Safari). So you do not have to worry about the results of the text in the image not being as sharp and accurate as the original text displayed on the browser. Sketch can also export the CSS for each element in the layer.



5. Antetype


Antetype is a vector-based application which is focused on visual design, great for creating interface elements such as gradient, drop shadow, inner shadow, text shadow, border style and rounded corners. Antetype also provides hundreds of widgets that you can use directly in your project.


To create a responsive design, you can set breakpoints that will adjust the screen size. You can also export each element in the form of an Image or CSS.




Designing Prototypes: 5 Apps That Do It Better Than Photoshop

Designing Prototypes: 5 Apps That Do It Better Than Photoshop

Photoshop is a popular tool with designers and its extensions such as CSS3Ps and FontAwesomePS make it it a good tool for creating web design prototypes as well. Nonetheless, it wasn’t really created for this purpose and as current trends push forward with responsive design, CSS Pre-processors, CSS Frameworks, and resolution-independent graphics (SVG), Photoshop is becoming less relevant for web design.


Not to worry though as there are plenty of alternative apps built by independent developers to help fill in the gaps. In this post we will take a look at these apps, and find out how far their features excel when compared to Photoshop for creating web design prototypes.



1. Webflow


Webflow lets you design websites by drag-and-drop. Webflow creates the layout based on a Bootstrap grid so your website design is responsive-ready. Webflow also comes with a set of standard web components such as blocks, lists, and text formatting which you can add to the Webflow workspace.


Styles can be easily added from a sidepanel and you can further adjust the properties of the elements as well. Once the design is complete, you can export the results of the design into code HTML and CSS. You also can share your work with a team.



2. Avocode


Avocode supports PSD files and allows you to immediately edit and transform it into a workable website with HTML and CSS. Avocode will extract all the assets in your project including the CSS, Images, and SVG (if any). You can easily extract CSS, in a form of Less, SASS or Stylus for any selected layer, as it has been integrated with CSSHat.


Furthermore, Avocode is equipped with revision control which lets you revert to your previous designs, just in case anything goes wrong.



3. Macaw


Macaw lets you design web layouts and web elements aas if you are working on an image editor like Adobe Photoshop. You can create a columns or block areas, adjust their positioning, and set typography as required. Macaw allows you to change the styles of multiple elements all in one place. You also can use the library to store all the elements for later use.


To create a responsive design, Macaw lets you set breakpoints and optimize your site for all devices. When the design process is completed, Macaw can generate proper HTML and CSS for you.



4. Sketch


Sketch is ideal for designing interfaces and websites. It creates vector-based objects instead of in bitmap. Thus when you resize the canvas size, your design does not lose quality. Features like the ‘built-in grid’ will help you better arrange the object or a web layout placement.


In addition, Sketch renders fonts similar to what is shown on Webkit (think Chrome, Opera, and Safari). So you do not have to worry about the results of the text in the image not being as sharp and accurate as the original text displayed on the browser. Sketch can also export the CSS for each element in the layer.



5. Antetype


Antetype is a vector-based application which is focused on visual design, great for creating interface elements such as gradient, drop shadow, inner shadow, text shadow, border style and rounded corners. Antetype also provides hundreds of widgets that you can use directly in your project.


To create a responsive design, you can set breakpoints that will adjust the screen size. You can also export each element in the form of an Image or CSS.




Designing Prototypes: 5 Apps That Do It Better Than Photoshop

Monday, February 23, 2015

Designing Prototypes: 5 Apps That Do It Better Than Photoshop

Photoshop is a popular tool with designers and its extensions such as CSS3Ps and FontAwesomePS make it it a good tool for creating web design prototypes as well. Nonetheless, it wasn’t really created for this purpose and as current trends push forward with responsive design, CSS Pre-processors, CSS Frameworks, and resolution-independent graphics (SVG), Photoshop is becoming less relevant for web design.


Not to worry though as there are plenty of alternative apps built by independent developers to help fill in the gaps. In this post we will take a look at these apps, and find out how far their features excel when compared to Photoshop for creating web design prototypes.



1. Webflow


Webflow lets you design websites by drag-and-drop. Webflow creates the layout based on a Bootstrap grid so your website design is responsive-ready. Webflow also comes with a set of standard web components such as blocks, lists, and text formatting which you can add to the Webflow workspace.


Styles can be easily added from a sidepanel and you can further adjust the properties of the elements as well. Once the design is complete, you can export the results of the design into code HTML and CSS. You also can share your work with a team.



2. Avocode


Avocode supports PSD files and allows you to immediately edit and transform it into a workable website with HTML and CSS. Avocode will extract all the assets in your project including the CSS, Images, and SVG (if any). You can easily extract CSS, in a form of Less, SASS or Stylus for any selected layer, as it has been integrated with CSSHat.


Furthermore, Avocode is equipped with revision control which lets you revert to your previous designs, just in case anything goes wrong.



3. Macaw


Macaw lets you design web layouts and web elements aas if you are working on an image editor like Adobe Photoshop. You can create a columns or block areas, adjust their positioning, and set typography as required. Macaw allows you to change the styles of multiple elements all in one place. You also can use the library to store all the elements for later use.


To create a responsive design, Macaw lets you set breakpoints and optimize your site for all devices. When the design process is completed, Macaw can generate proper HTML and CSS for you.



4. Sketch


Sketch is ideal for designing interfaces and websites. It creates vector-based objects instead of in bitmap. Thus when you resize the canvas size, your design does not lose quality. Features like the ‘built-in grid’ will help you better arrange the object or a web layout placement.


In addition, Sketch renders fonts similar to what is shown on Webkit (think Chrome, Opera, and Safari). So you do not have to worry about the results of the text in the image not being as sharp and accurate as the original text displayed on the browser. Sketch can also export the CSS for each element in the layer.



5. Antetype


Antetype is a vector-based application which is focused on visual design, great for creating interface elements such as gradient, drop shadow, inner shadow, text shadow, border style and rounded corners. Antetype also provides hundreds of widgets that you can use directly in your project.


To create a responsive design, you can set breakpoints that will adjust the screen size. You can also export each element in the form of an Image or CSS.












Designing Prototypes: 5 Apps That Do It Better Than Photoshop