Ultimate Guide to Flat Website Design |
- Ultimate Guide to Flat Website Design
- Are Smartphones Putting Your Data At Risk?
- Record & Edit Video On iPhone Easily With Videon
- TypeForm – Easy & Highly Customizable Form Builder
Ultimate Guide to Flat Website Design Posted: 20 Jun 2013 08:01 AM PDT The combination of bright colors and exotic typography has paved the way for unique flat interfaces. Minimalism is a big part of this design idea, and you can see how popular these trends have become in recent months. Flat website design is a brilliant concept because it focuses solely on the content. But many designers are unfamiliar with the latest trends and don’t know where to get started. In this guide I want to present the ultimate collection of articles, tutorials, free graphics, and website layouts based on flat design. Anybody who is still getting into this concept will certainly learn something new. These trends have been around for a long time but we have just recently witnessed a major rise in flat website design. And this comes with plenty of good reason! Flat design mixed with page content is easier to read and easier to interact with. Shortcuts to:
You should not expect to be using flat design in every project. Like all design trends, flat website layouts should be used exclusively when the details fit together. Otherwise it can feel jarring to force a minimalist approach into a more complicated website. But when carefully placed together I have found that flat user interfaces are brilliant, simple, and so effortlessly enticing they will captivate your visitors for years to come. Recommended Reading: Showcase of Beautiful Flat UI Design Popularity of Flat WebsitesAs mentioned in this article on Forbes, flat website design is a growing maturity within the industry. It removes a lot of the more complicated textures, patterns, shadows, bubbles, gradients, and other shiny effects to focus on simplicity. Flat buttons still look clickable and the input fields still look editable. Flat website layouts in general still look interactive but without the more exquisitely refined graphics. Flat design has been around for a while but recently picked up steam from the Microsoft mobile platform, and now Microsoft Windows 8. Metro design has started a major trend which pushed the ball forward into flat layouts. Both web and mobile interfaces have seen a major uptick in trendy new user interfaces. And with responsive websites blurring the difference between desktop and mobile devices, flat UI has bridged the gap for simplicity with a bit of cultural class. The biggest problems you will face when designing a flat website are the interactive elements. Visitors need to know which areas of the page are plain static content, while other areas are clickable and draggable and whatnot. Flat design can still use light shadows and edge effects to imply this interactivity. But subtlety is the name of the game and you can witness examples among many other flat website layouts. Helpful Designer GuidesThere are quite a few online articles which I have presented a bit lower, but I want to share a couple specific resources to help with flat design concepts. I like to think of these more as guidelines than actual rules. In a Medium blog post referencing flat design & UI problems, the author Missy Titus goes on to explain that flat UI should help to solve your problems or just make them easier to look at. By stripping away textures and stitching and box shadows you should not be removing the important content from the page. Design trends are just a certain look. Of course, flat design is not for every website. There are so many various website trends and they are all popular for a reason – people like variety. Carefully-crafted flat 2-D interfaces stand out because they look really simple to use. And it keeps visitors focused more on your content than anything else. Another great article on the principles of flat design will help you understand the more concrete interface features. Most notably you want to focus on content hierarchy within the page. Elements do not usually intersect each other and the page should flow very naturally. This includes switching between colors and box content. It is easier to think of the page being built around typography, and these various boxes of text will inform the user how to interact with the page. Some buttons may use flat background colors, while other buttons may use shapes and pictograms. Webpage text and color schemes are two vitally important design concepts to your flat website. The Metro look originally popularized by Microsoft has a great system of picking out colors. These are important because colors make your website stand out. Colors make buttons and links and headings appear not so black-and-white. But sometimes it can be difficult choosing a scheme that works well. You need to look through examples of other designs and see how professionals have been doing this in the past. Check out the outstanding FlatDesign inspiration gallery for a collection of similar website interfaces. Flattened Design ColorsDesignModo has published a very large collection of resources based around flat user interface design. While on the subject of colors I want to point out another article discussing flat design and color trends. The schemes themselves are made up by starting with one color displayed at full hue, then removing hue lower and mixing in black/grey. This method will create multiple shades for your new color palette. The most saturated and bright colors stand out amongst any light or dark background. On DesignModo they published another interesting post on retro color schemes which can relate perfectly into a flat website layout. But really the process requires some practice and intuition when building a new project. The online resource Flat UI Colors is a great place to start when attempting to focus your creative efforts on flat color schemes. Related ArticlesInstead of copying and regurgitating offbeat content into this article, I want to share other inspiring blog posts which are related to flat user interfaces. I have read countless articles on this subject and the viewpoints are exquisite. Take a few minutes to skim just 2 or 3 articles from this list and you may be surprised what you can learn.
Free ResourcesWith some of the design theory nailed down we should move into discussing other flat design resources. Both graphics and code samples are available all around the web if you know where to look. Open source codes are some of the best ways for new developers to immerse themselves into a new design trend. But graphics also play a critical role in understanding flat user interfaces. Both website design and mobile app design have grown into tremendous areas of study. Consider these free resources as learning tools for practicing your flat design ideas. GraphicsBoth designers and developers have a need for graphics. Symbols, icons, logos, and other common graphical traits can be found in almost every website layout. Thus freebie graphics using flat techniques are becoming even more popular around the Internet. This is a small collection of my personal favorite UI kits and icons created in the realm of flat design. Pixeden Flat Icons Set I simply love Pixeden for their amazing collection of freebies and premium graphics. Just recently I found a number of Dribbble shots advertising a free Flat Design Icons set. The icons have been released in 4 volumes, each containing a different set of icons. The vol1 & vol2 sets were accidentally labeled the same but you can tell this is a tremendous collection of flat icons – all free to use in any number of web projects! Pixeden: Vol #1 – Vol #2 – Vol #3 – Vol #4 Dribbble Mirror: Vol #1 – Vol #2 – Vol #3 – Vol #4 Colorful Flat Iconset Freebiesbug has a ton of great PSD files for designers. One exceptional example is their set of flat colorful icons for user interfaces. You can download this free set from their website or directly from the Dribbble page. The set includes 12 icon designs which are based on popular Internet services. And this collection may not be useful for every project, but it is nice to know there are plenty of flat freebies out there for graphic designers to play with. Flat Web Browser Icons There are more than a few reasons you might need to include browser icons in your website. Design agencies and SaaS companies will frequently need to list their features and supported clients. And these flat browser icons are the perfect companion for any new layout. You can also download this iconset from the original Dribbble shot published by Stefano Tirloni. Flatilicious Icons Flatilicious are some brand new icons released just last month on Dribbble by designer Lukas Jurik. This wonderful collection includes 48 free flat icon designs in a PSD file. You are free to use these on any web or mobile projects. What I specifically enjoy about this set is the variety of icons to choose from. Truly a creative masterpiece for designers just getting into flat UI. IconShock Flat Icons This fantastic set of flat icons released by iconShock includes over 3600 different examples. The design features a slight glossy effect on many of the icons and it stands out among other similar iconsets. And this is great because the icons have been resized into 3 various settings for big, medium, and small website elements. What a collection for these freely available flat icons! Flat Event Planning UI PSD The darker color scheme from this events input freebie really stands out using flat design features. The interface itself is built for a website to handle user input for scheduling an event, or possibly signing up for attendance. Of course you can use this freebie just for practice. But I also think the various PSD styles along with the color scheme itself provide a nice framework for learning. All credit for this freebie goes to Dylan Opet. Flat Dropdown Menu PSD When you are designing a website layout it can be tough gathering ideas for inspiration. The various page objects from image sliders, navigation links, thumbnails, and certainly dropdown menus can be difficult to brainstorm without examples. This freebie PSD contains an excellent flat website dropdown menu. The icons are easy to scale and you can duplicate many of the same box shadows using CSS3 effects. Check out the original Dribbble shot to download a copy and see another preview. Freebie Flat Website UI Kit If you are looking for a collection of web-based user interface elements then look no further! This brilliant flat UI PSD freebie released by Andreea Nicolaescu is an excellent starting point when coding your own website. Use this PSD kit not just for graphics, but also to help with color selection and matching up a full color scheme. The PSD is built around a white background which is most common among minimalist designers. You can view a full-screen preview on the original Dribbble shot. Flat UI Kit PSD #1 Along with the brilliant flat icons I also want to share a collection of user interface kits. This first PSD file was created by Riki Tanone and released for free on Dribbble. It is a small file, but it contains a number of offbeat elements such as a video player and email inbox. The colors are brilliant and they almost remind me of various pastel shades. Flat UI Kit PSD #2 Now this second UI kit was also released by Riki Tanone and focuses more on blog elements. It is just about the same size as the other PSD and contains blogging items like a subscribe box, calendar, compose textarea, tags input box, and some other neat stuff. The color scheme is more solidified yet the flat buttons/elements look almost identical. If you want to get started quickly I recommend downloading both of these kits and practicing in your own time. Flat UI Kit PSD #3 This alternative flat UI kit was designed by Devin Schulz and also released for free on Dribbble. I really like this PSD file because it focuses mostly on common website elements. Input fields, horizontal & vertical navigation, sliders, buttons, and lots of other page objects. The color scheme follows grey/green on almost every element and it looks simply fantastic. All of these free UI kits encapsulate the flat design culture perfectly. And I am certain there are many many more examples to be found online. Actually just searching through Dribbble presents a long list of results for flat UI kits. I encourage all designers to check out similar examples and see what you can build off these flat webpage elements. Flatlyfe UI Kit PSD The designer Dylan Opet who also created the Event Planning UI freebie above, also released a newer flat UI Kit. The elements are based on common website objects like sliders, buttons, switches, tags, and input fields. I definitely recommend downloading a copy and using these designs on some practice websites. Even the process of coding CSS3 styles based off this PSD would be a huge learning experience. WDD Flat UI Kit PSD Just recently there was a big post on Webdesigner Depot releasing a new flat UI kit. This set is designed more towards the metro trends with a similar color palette, interface elements, sliders, bars, and other offbeat page objects. I would think this UI kit may also be used for mobile app design as well. It is a free download after you enter your e-mail address for their newsletter signup. Open Source CodeFrontend web developers are always interested in the latest trends. Web design and development tend to overlap in many key areas, and this happens frequently when you are coding a website interface. Check out some of these free code samples which you can use in your flat design projects. Flat UI The Flat UI kit is probably the best resource for web developers getting into this trend. DesignModo has released both a free version and a pro version which includes both PSD files and HTML/CSS coded elements. But the free version is honestly astounding and it provides all of the major items you would need like input fields, switch buttons, headers, icons, and so much more. Their free version is also hosted on Github for developers who may want to fork the project and extend functionality. iCheck The jQuery iCheck plugin is a tool for enhancing your input buttons. Notably checkboxes and radio inputs are two elements which can be difficult to style using CSS. iCheck is completely free and open source, which is perfect for new developers. You can build outstanding interfaces which blend perfectly into your website layout with just a few customizations. Flat Radio Buttons Free resources which are published on Design & Code It may be used in any website project. I hadn’t heard about the site until recently when I found their flat radio buttons which simply look exquisite. The original design is based on a darker background with lime green radio circles. There is also a small animation when switching between new selections. Boxy Buttons Web developers are probably familiar with cloud-based IDEs such as jsFiddle and JSBin. Well CodePen is another example which actually catalogs and presents the latest pens in one location. Developers will practice their skills and release awesome freebie codes to the world. This example presents a common set of flat interface buttons designed in 3 varying sizes. You can obviously update the color scheme to match your own website. But I am really impressed with the hover/active states on each button. Although the design is "flat" you can still notice a shadow beneath the button as you click. It is a really nice effect and it’s awesome to find stuff like this out there for free use. Simple Button Styles These simple button styles are also found within CodePen. This is more of a bare-bones example which actually does not support an active state. The button hover uses CSS3 transitions for updating the background color in an elegant animation effect. Take this example with a grain of salt and see if you can expand on the codes to suit your own needs. Signup Form CSSFlow snippets may be one of the best online galleries for free HTML/CSS codes. This particular example is a signup form using a flat button and a couple input fields. You can actually try out the live demo example and see how this works in your own browser. The submit button has a natural hover and active state, plus the input fields also glow on focus. It is not much to start with but you can find other flat design examples from the CSSFlow snippets page. 50 Beautiful Flat design WebsitesWhat ultimate design guide would be complete without some beautiful examples? Flat design concepts are fun to discuss and debate, however talking will not always get you to the finish line. Browsing through some examples of other layouts can actually help you put together interfaces in your mind which you may not have thought about on your own. I have collected 50 luxurious flat website layouts which I hope will prove inspirational to designers all around the world. |
Are Smartphones Putting Your Data At Risk? Posted: 20 Jun 2013 06:01 AM PDT Editor’s note: This is a contributed post by Linda Waters, a blogger who is enthusiastic about cutting-edge mobile technologies, truly unique apps and cell phone tracking software. She is a marketing executive at mspy.com. With the unprecedented popularity of smartphones and other mobile devices, it is becoming increasingly easy for businesses to conduct their daily operations on a global scale. It is no longer obligatory for employees to be in the office at all times and inter-office communications can easily be conducted worldwide. Regrettably, with this increase in mobile communications comes an increase in the vulnerability of sensitive information. It would be easy to blame the mobile manufacturers, but the truth of the matter is that the majority of the blame lies with the users of such devices. It doesn’t matter how aware we are of the potential threat, it is human nature to think that it will never happen to us and as a result we are all fairly lax when it comes to our mobile device password protection and checking the credibility of apps and file downloads. This opens us up to a whole range of cyber threats. Data VulnerabilityFor the average user the threat of data being stolen from our smartphones is serious enough. It can result not only in identity theft, but also in credit card fraud, plus our smartphones may become unusable thanks to viruses and other malicious codes. However, when these threats target business users they become even more dangerous. Vital StatisticsAccording to the annual ‘State of the Net’ report, it is estimated that around 20% of 234 million active cell phones in the United States are smartphones. In the past 12 months, around 7 million of these smartphones were damaged, lost or stolen. Over 5.5 million were affected by ‘undesirable behavior’ including unauthorized text messages, intercepted data and other security threats. Given that 39% of 100 million adult phone users do not take even the most basic of security precautions this is not surprising. Data-Laden GadgetsThese figures confirm that data vulnerability relating to smartphones is a very real concern. There is a huge amount of data being stored on smartphones. And since it is becoming the norm for companies to issue employees with smartphones to allow them to stay connected wherever they go, the threat has been elevated. Employees are getting access to confidential business communications and holding onto sensitive data with their mobile devices. Without proper security in place, the data can be wrested from their hands in no time. Common Threats For SmartphonesJeff Fox, the technology editor of Consumer Reports, says that anyone who makes use of a smartphone is placing a great deal of trust not only in the manufacturer and the wireless carrier, but also in a multitude of app developers, mobile advertisers and the phone’s operating system. With so many parties involved, it is best that the users themselves take precautions to ensure that their phones remain safe from any potential threats. The three most common of these threats are:
Losing a SmartphoneWhen a smartphone is lost or stolen, there is the opportunity for whoever finds/take it to access all of the data stored on the device. This might include such information as banking details, personal information and sensitive business documentation. In the wrong hands this information can be used to commit fraud or to damage the business in question. This is why it is important to use passwords and screen-locks at a minimum, although it is also advisable to have other security measures in place. Related: Downloading Infected AppsIn terms of malicious downloads it is becoming increasingly more common for malicious codes to be embedded into apps. Even apps from trusted sources like the App Store and Google Play may present problems. For one thing, an increasing number of apps are being used to collect data and track user activity. If this activity includes logging onto any secure server, or using financial information then this can present a big problem. According to ZDNet columnist Ken Hess, the number of app-related threats is steadily increasing and threats are also becoming much smarter. One example is the increase in so-called ‘staged exploits’ which work in small stages to try and confuse anti-malware tools. These often appear to be harmless updates making them difficult to spot and even more difficult to uninstall. Phishing LinksOne of the downsides of using a smartphone to surf online is that you cannot hover over links to see where they lead, the way you can on a PC. And it is common for cyber criminals to send links in SMS, emails or even on suspicious websites in order to lure people into clicking on malicious links which are designed to harvest data or download a virus or trojan. If you do not trust it, don’t click it. While the three mentioned above are among the most common threats, but they are by no means the only ones. There are many dangers out there for those using smartphones including public wifi, malicious qr codes and data interception by hostile operator networks. Recommended Reading: Phishing Attacks And How To Prevent From Being Hooked Protecting The Data Stored On Your SmartphoneThere are a number of very basic steps that can be taken to protect data stored on your smartphone. These include:
However, since most threats are not even detectable to the average user it is also wise to take additional steps to secure your data. Recommended Reading: 5 Simple Steps To Keeping Your Smartphone (And Data) Safe Keep It TrackableFor years business owners have been using mobile phone-tracking apps to monitor employees to reduce abuse of company phones for personal calls or to catch those who are behaving inappropriately. However, these apps can also be used as an added security measure. There are many such tools which also allow remote commands to be sent via SMS to lock the target phone or even to wipe the data if the phone is lost or stolen. It is also possible to track the phone’s location through GPS. ConclusionAs long as there are Internet-enabled devices there will be those who exploit them to harm other people. However, with the help of education about best practices relating to security, and some additional security tools like mobile spy software, it is possible to reduced these threats to a minimum and keep your data from being compromised. |
Record & Edit Video On iPhone Easily With Videon Posted: 20 Jun 2013 03:01 AM PDT The iPhone has a decent built-in camera but the stock camera app has very limited functionality especially when it comes to editing video. While we wait for iOS improvements on that matter, we look to apps to help us out and we’ve found one to optimize and enhance your video recording experience on the iPhone. Videon is currently exclusive for iOS that allows you to edit, merge, trim or split your recordings. You can also take photos while video recording, a unique feature not found in other apps. However, these great features come with a small price of $2.99 but we feel it’s worth spending the small amount so here’s our take of Videon. Recommended Reading: 10 New & Fresh iPhone Photography Apps Setting-Up VideonYou’ll see a lot of buttons when you first launch the app, here is an explanation for what each button does:
In the settings, you can choose to use the front or back camera. The settings also let you change the resolution for your recordings. You can only change the resolution of the back camera, the front camera’s resolution will be maxed out. You can also change the recording frame rate to have better quality videos under low light conditions with a lower frame rate. The default camera uses the 24 – 30 frames per second option. You can also lower the video quality to save storage space on your iOS device. You can also disable recoding audio entirely or choose to use the 1 or both microphones on the iPhone. If you scroll down a little more, you’ll see the option to:
Still on the settings page, you can set the max zoom range. Next, you can set the zoom speed to slow, medium or fast. Setting the zoom speed as fast might result in a shaky video when you’re zooming. We found that the medium option will result in a steady zoom and stable recording. And lastly in settings, you can choose where you want to save your recordings, in the app or to the camera roll. Choosing to save it in app means your videos won’t get mixed up with your photos in camera roll. However, any photos taken while recording will be saved into camera roll. Start Recording with VideonAfter you’ve done setting up the app, let’s start recording by tapping on the ‘Red’ dot. When the recording starts, you will see a timer to indicate how long you have been recording. You can now start taking photos while you’re recording a video. You have to first tap on the screen to choose where you want the camera to focus on. After it says ‘Focus Lock’, tap on the ‘Camera’ icon to take the photo. If you want to the object to be nearer, just swipe on the ‘Wheel’ icon and it will start zooming. This is a cool feature because the stock camera app does not have a zoom function. When you are done, tap on the ‘Red’ dot to stop recording. Edit Your Recorded VideoThe great thing about Videon is its built-in video editor with awesome features. Just tap on your past recordings on the bottom left to access the video editor. The left column will display all of your past recordings, the right side shows a video preview. On the top of the video preview, you can see 5 icons. From left to right, the icons are effects, merge, trim/split, save and delete. EffectsThere are a total of 17 effects that you can use to edit your video. One of the effects allows you to adjust the speed of your video to make your video faster or slower. You can also adjust the exposure level of your video. The editor also lets you resize your video. We won’t go through all the effects, so here are the other 14 effects:
Merge VideosYou can also merge your video recordings, just select your videos in the order you want them to be merged and tap on the ‘Tick’ icon to merge it. You can then choose to merge and keep your original recordings or merge and delete your original recordings, the latter option saves you more storage space. There are no other merging options like adding transitions in between videos so your cuts might be a bit abrupt. Trim & SplitIf you have a recording which is too long or want to take out an unnecessary part, you can use the Trim or Split option. Trimming works like how you trim your recordings on the stock camera app. Just select the starting and ending point to trim the non-selected parts. You can save your trimmed video as a new clip or choose ‘Trim Original’ to overwrite your original recording. Splitting allows you to split a clip into multiple, shorter clips. Go to a part of a recording that you want to split and press the ‘+’ icon. You’ll then see a silver marker on the timeline that indicates a split there. You can choose to split and keep the original recording or to split and remove the original recording. Save Or Delete Your WorkWhen you are done, tap on the ‘Arrow" icon to save your work to camera roll. If you want to delete any of the recordings, just choose a recording and tap on the ‘Dustbin’ icon. Additional InfoTap once on the preview video to see details like the recording date, time, file size, number of frames per second and resolution. You can also take screenshots of a recording you’re currently previewing with the camera button. In conclusion, the many awesome features of Videon makes paying the small amount worth it. |
TypeForm – Easy & Highly Customizable Form Builder Posted: 19 Jun 2013 10:01 PM PDT Forms are a major part of our online world nowadays. There are registration forms, applications, user experience forms and lots more. Today I will show you an easy-to-use-and-customize form builder, Typeform, which brings a whole new approach to online forms. Recommended Reading: 5 Free Online HTML Form Builders Designing your formsWith Typeform your form is basically on one page with three different sections: the Welcome page, the form itself, and the Thank You page. As you fill out the forms the different sections and individual questions will fade out and slide to the next content block you added. Creating forms are super simple when using Typeform, just name a new form, build it and publish it. Once you have named your form and you are in the form builder, drag and drop a new welcome screen. Your welcome screen will be the first page your users will see and is best used for a branding effect. The other editing screens and tools will work just as good and almost the same way the welcome screen editor works. After you are all finished building your form content you can now go into the step of designing the form. There are three simple options of design: color, font and background image. You can tweak your form further by customizing the color of all the different content types like questions, titles, answers and backgrounds. You can even choose from color palettes that the people over at Typeform prepared nicely for us. With Typeform, you can also customize your fonts and your backgrounds. Choose from pre-made background images or upload your own with the background uploader. If you don’t feel like creating your form’s design on your own, there is even the option to choose from a design template called Typeform Themekit; Themekit also allows you to save your designs for forms you make in the near future. Publishing your formsWhen you are ready to publish your form you have three options. The first option you have is to use the link to your form that is given to you, which is hosted by them. Second, you can create an HTML button to put on your webpage and it will quickly open as a popup window. Third, you can embed the entire form on a webpage of your choice. When you embed the entire form you can even go with the mobile version, iframe version for desktops or just the plain old HTML code. AdvantagesDisadvantagesI can honestly tell you that Typeform has no disadvantages in my eyes. It is loaded with features and brings an entirely new approach to online forms that is simply awesomely easy to use. |
You are subscribed to email updates from hongkiat.com To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
0 comments:
Post a Comment