1: Interrogate an Interface

Froont Web Design Software Analysis by Christopher Wood

Website: www.froont.com

Capture

Index of Contents

What is Froont
About the Design
5 Multimodal Areas
Affordances
Constraints
Conclusion

What is Froont

Froont is an in browser responsive webpage builder that is focused on allowing designers to focus on designing instead of the code. The company just released the site to the public in May of 2013 and are actively adding features and support now. The site allows users to build webpages using an intuitive interface with basic features and is intended to keep the designer focused on their job without having to get bogged down in any form of programming. There is no downloadable application or software, it is all run directly in the browser at all times. Because of this, everything is saved to the cloud and all projects can be instantly shared around the web. After a project is finished it can then be exported into code and handed off to a developer for adding in more advanced features and actual release. For a demo of the software and a visual overview of what it is capable of go here.

About the Design:

When you first visit the site its clear that clean design is important to the brand. The information is all given in brief statements instead of paragraphs and everything is accentuated by whitespace using the color green or white. It gives the user a good idea of what the site is all about without clutter. According to the site, Froont.com was made entirely using Froonts webpage building tools. So, the site also speaks for itself as an example of what it can build. As you get deeper into the site the same design principles still apply. Below is a picture of the users profile screen which makes use of the colors grey and white to draw the users eyes to the important parts of the screen. Froont Main Page

From here, the user can access their projects, create new pages, view updates from Froont’s official news feed and view tutorials. This is the heart of the website for each user and the grouping of content keeps the user from being overwhelmed while still giving a decent amount of content on the page. Simple choices also help make it easier on the eyes such as having an image preview for projects for knowing what it is in a glance.

The single most important part of the site though is the web editor. This is the area that the user builds and edits all content on Froont. Below is an image of a blank workspace with nothing loaded. The layout is similar to that of a graphing board with labels at the top indicating screen resolution and a grid for a sense of scale. The toolbar on the left side and the tool box on the right also mimic the layout of other editing software’s such as Adobe Photoshop and GIMP. Both of these design choices give the user an instant level of familiarity with the software and an intuitive idea of what to do.Froont Editing Page

The next image is of a demo project that Froont provides for all new users. It shows the basics of what Froont is capable of and showcases some of the features in the toolbox and web editor as a whole. Each object in the editor such as images and text boxes are considered widgets in Froont and each carry properties that can be modified using the tool box. When mousing over different widgets their bounding box will highlight to indicate to the user what is selected and how much space is affected by the widget. Most widgets can be stretched, moved and shaped directly in the browser for easy editing and this all works similarly to other editing tools which makes it feel second nature.

workspace

It is very clear that the designers at Froont wanted users to feel at home using their software from the beginning. They clearly were inspired by other similar software and design principles that made it easy for me and I’m sure others to pick it up incredibly fast.

How Froont uses the 5 areas of Multimodal design:

Since Froont is a site about building responsive web pages, it is a very sleek and modern website. It uses all forms of Multimodal design, without an emphasis on Aural, to effectively promote its design and purpose.

  • Visual: The site is very focused on visual aesthetics. It mainly uses a play between the two main sets of colors, white and light green or white and grey to push their simple design. These two sets allow the page to focus or streamline content in an attractive format. It also uses many visual aids to help designers while they are building the site. As an example, in the web building section they use an attractive grid background to help designers keep track of the layout dimensions.
  • Linguistic: The site is centered around a modern style and linguistic features are a big part of their design. Froont uses the same style text across all pages and keeps it sleek and simple. There is no use of fancy curly fonts or excessively bold headers, it is all simple, elegant and to the point.
  • Spatial: Since this is a design website, it is also very aware of spatial arrangement. It uses colors and white space to separate sections of the site and breaks large amounts of information into long scrolling pages. It also keeps things clean by making sure everything has its own section of the page and is not overrun by other content. This makes finding content very easy and attractive.
  • Gestural: For the most part, Froont is a collection of static pages with no animations. The only part of the site that exhibits the gestural mode is the web builder itself. In the builder, most tools have animations or effects that are there to make the work feel natural. A perfect example is the bar at the top of the screen that smoothly transitions between screen resolutions to allow the user to set layouts and organization for different sized devices.
  • Aural: This is the one section of multimodal communication that is not prominent. The site does provide video tutorials, but has no built in audio for buttons or actions made by the user. So it is just barely aural.

Affordances:

While testing out Froont it was easy to come up with a list of great affordances that the software provides. This is by no means an exhaustive list, but merely highlights the main ones.

  • In Browser Designing: Since Froont is a web only application, the user designs in the medium the designs are meant to be released on. This is a great feature and guarantees that everything you make will run in the browser. It removes the extra step of having to load or export your content to test it.
  • Its Intuitive: Froont is making its name in the market by being simple and easy to use and it’s doing a great job so far. The interface and options available are all very easy to use and intuitive. The average computer user can pick up the basics in a couple minutes while less advanced users will still have a pretty easy time figuring things out.
  • Code Exporting: Instead of just packaging the design into a finished format, Froont allows you to export the design into the webs natural language of HTML. This allows a programmer to take the design and add advanced menu options and networking features. If there was something that Froont didn’t support out of the box, you can just export it and add it yourself.
  • Cross Platform: Everything built on Froont can be formatted for all types of screen sizes and platforms. This solidifies your design across all phones and laptops using only Froont.
  • Free Version: The free version has its restrictions, but is also a great place to start and learn about the software. Until more features get released, the free version offers more than enough options for users to take advantage of.

The simplicity of Froonts design is one of its major affordances, but it may also be one of it biggest weaknesses in the near future. Since the design is so simple and the interface has been intentionally kept easy to use I believe one problem is starting to arise. On Froonts main page and from all of the demos I have seen of what can be created using the software, I’m worried that the application is pigeonholing design a bit. What I mean is that all of the demos using Froont so far are very basic and similar in design. It seems as if the software is simple to the point that people are being guided into certain design choices. If one layout is easy to make are more people going to use it instead of being more creative? Below are 6 of the demo sites that are provided directly on Froonts front page which I thought were a good representation of my concern. Only time will truly tell if this software will be used to make the next big site or just another army of clones. It could turn out to be nothing, but I thought was worth noting.

Froont Demos

Constraints:

With all things in life, nothing is perfect. After all of the affordances mentioned before, there are also a handful of constraints that need to be addressed. As before, this is not an exhaustive list, but mentions some of the biggest things holding back the software.

  • Almost too simple: The simple interface is great for new users, but there are not enough options available for people that are going to use it full time. More advanced options are needed to make this software viable for full time professional use and not just hobbyists.
  • Not as powerful as coding: Since the designers are mostly limited to what Froont provides as options, they could get bottle necked quickly. Coding is only supported as a feature after you export the project and doesn’t allow you to tweak it in real time which would be a very powerful option for developers.
  • Only on Google Chrome: As of right now, Froont.com is only available on the desktop version of Google Chrome. You can access the welcome page from other browsers, but nothing else is supported. They are planning on adding more browsers soon, but there is no date set which is bad for this type of software.
  • Still in development: Froont was released in early 2013 and is still very early  in getting support and features. The software has a lot of potential, but that doesn’t mean much if they don’t start pushing updates. Anybody looking to invest in this company will have to wait a little while before it truly pays off.

With the extent of features and options that Froont provides, including the ones promised by the company soon, there is too much to extensively cover everything about the site in one article. Here are a couple features that I didn’t mention, but that are currently available with Froont and worth looking into if your seriously interested in the site.

Extra Froont Features

Conclusion

After using Froont for a little while and trying out many of its features, I believe it is a solidly designed piece of software even if it has some growing to do. It allows anybody with basic computer skills to create attractive web pages in an incredibly short time frame and effectively uses many forms of multimodal design to promote its purpose. With all of the new features coming soon, it will hopefully become a great tool for artists and designers alike. Until then, well just have to wait and see.

2 Replies to “1: Interrogate an Interface”

  1. A kitchen or table is best suited, but make certain to never scratch the table’s surface when cutting the wrapping paper.
    Make certain that their fees are reasonable for what they do.
    The donor can visit the fundraising site and make
    an online donation with their credit card at which point the donation amount
    is added to the fundraisers goal total and money is sent to the charitable organisation.

    Feel free to surf to my weblog :: google play gift card code generator

Leave a Reply

Your email address will not be published.