The design techniques for administration panels are not as openly shared as website layouts. This is because you do not always find examples of admin designs open on the web. To gain access you would need a user/password combo, so designers are often left building with trends found in other examples. But the dashboard interface has grown very quickly as a popular layout style for administrators. In this article I want to look into various styles and ideas for creating administration dashboard pages. These are typical website layouts built using HTML5/CSS3/JS. Except users will not ever see these designs because the admin CP is only needed for website settings, templates, or updating posts/pages. But there are still lots of exceptional designs for admin dashboards and I hope to showcase a number of trends in this article.

管理员控制面板的设计没有像网页前台设计那样共享通用,因为一般管理员的控制面板都不会暴露在外。要进入管理面板,你必须有帐号和密码,所以设计师在设计时总是趋于其他参考的例子。但是作为十分流行的管理员页面控制面板的界面设计发展是十分迅速的。 在本文中,我想尝试深入了解员控制面板页面的几种风格和创意。这些都是经典的使用HTML5/CSS3/JS的网站布局。普通用户是不会看到这些界面的,因为这是给网站设置,模版管理或者页面更新的控制面板。不过也有很多管理版面例外的设计,我希望在本文中展示一下这些设计的趋势。

Tabbed Navigation 标签导航

Utilizing tab buttons for page navigation has been a common trend for years. The reason it works so well in dashboard pages is because you often need to organize a lot of similar tools under the same umbrella. Using both horizontal and vertical tab menus can offer related sub-menu positions for including tons of links.


top dashboard tab navigation ui interface design

Any form of tabbed link design can work for a navbar. You do not need to handle the typical rounded corners and button interface design. More often it helps to make very simple tabs which behave as links, also using background images for icon artwork. This helps users to determine which links go to which section of the administration panel. Tabbed designs also offer a very flashy interface, using big text and bold letters will help the links stand out among other text.


top grey tabs user interface design tabbed icons

I can’t make the claim that every control panel navigation should be using tabs. If we look at WordPress’ dashboard it certainly looks more like blocks of list items compared to a tabbed navbar. And WordPress is an extremely popular CMS which goes to show any navigation can work. A good strategy is to plan out a sitemap of links and then follow those ideas to a core group of link items.

我不能说每个控制面板都要用导航标签。看看WordPress的控制面板,对比标签式的导航条,他更是模块式的项目列表。WordPress是一套很流行的内容管理系统, 可以配置显示任意的有效导航。一个较好的策略是列出网站左右的链接,然后将他们分类。

Toolbar Icons 图标工具条

I had briefly mentioned icons earlier but I think this design trend is important even outside of navigation. Icons are a picture symbolising the content of a link or some page information. Text requires more time for the brain to read and process what it all means, but pictures are clear and concise. I think icons should be included as interface elements on buttons, tables, headers, input fields, and really any potentially confusing areas on the page.

上面我只简单提到图标,不过我认为图标设计是一个趋势,而且这不仅仅对于导航条来说。图标是链接内容或者页面信息的象征性图片。相对来说,大脑需要更多的时间来阅读和处理文字的意思,而图片则清楚和简洁。我认为,图标应该包括这些界面元素:按钮,表格,标题,输入框,以及页面上任何可能会导致混淆的地方。 dashboard dark ui interface designs website admin panel


Modern designers have a much easier time building these interfaces because of the many freebie icon releases to be found online. There are so many collections built using various themes, techniques, and design styles, that you should have no problem locating a set for your admin interface. You can determine good icon placements by scanning the page for content which seems overbearing and might benefit from visual graphics.


Popover Hover Menus 泡泡提示菜单

There will not always be enough space on the page to include all the inputs and details you need. Sometimes a good way of handling this problem is to initially hide some features, and then display them later using a popup menu. This could be triggered on hover or by clicking a button/link on the page.


caldenar admin date popover menu jquery


You may also include popover menus for hidden input fields related to some data on the page. Administrators are often busy editing pages or adding new content into the website. This requires a lot of work and patience to put everything together. Obviously a popup block may contain a lot of data – even including modal windows using a lightbox or shadowbox effect.



mango dashboard responsive website template theme


I really like the example above labeled Mango Admin. You can hover the messages link block and it’ll display some of the messages within the inbox. This trend could be expanded for new posts, drafts, user comments, and tons of other queue systems. Any typical CMS generally requires some content management to keep everything running smoothly. By reorganizing some of this content to appear hidden on the page, it can alleviate room for a more relaxed interface.


Content Display Styles 数据显示样式

All the various administration panels do share one thing in common – their purpose is to display information. We may also use the word “content” which can include tables, lists, buttons, graphs, really anything. The entire layout is generally focused to encapsulate this content where is it easy to read and easy to edit.


admin dashboard website layout graphics charts data


I like the small icons you can see in the table which would appear to be quick access buttons. You may quickly add, edit, or delete content from within a row of the table. And the icons are colored so you will be able to tell from a distance what they do. Of course, this is just one simple example but trends like these are hard to find. Always keep thinking of new ideas or techniques which would make your administration powers easier and simplified.



charts shopgate admin dashboard icon dribbble shit layout


It is notable that not all administration interfaces will have graphs and charts and statistics. Sometimes you will just be dealing with straight information. And even though this may seem boring, you have to think about how you will be interacting with all this data. Then you will be looking at the challenge from a user’s perception. No matter how many ideas you try out they are all worth it, because nobody has the perfect design UI and there are always new trends on the horizon.



Showcase Gallery 样本集

All of the trends listed in this article provide a nice starting point for designers. But I think you can learn a lot by studying other common examples for admin dashboards. I have put together a small collection of screenshot pages from Dribbble shots. I hope you will notice some of the trends I have listed, plus some fresh ideas to use in your own designs. And if you have questions or resources in relation to admin dashboards feel free to share with us in the discussion area.



Device Dashboard

mobile ipad device admin dashboard photo

Admin Tools

dashboard icons photo user profile designs

Admin Charts

red toolbar title webpage admin charts information

Wood Control Panel

wooden control admin webpage layout inspiration

Responsive Dashboard

mobile responsive clean crisp retina display admin panel

Datatable Content

content rows datatable dashboard admin panel

Ultramarine Admin

blue admin control panel dashboard interface

Flyout Menu

white administrator flyout menu links panel

Administration Panel

website layout admin postlayout homepage

Minimalist Admin

minimalist wordpress simple white admin dashboard

Dashboard Charts

tan bright colors navigation administration panel

Sidebar Navigation

vertical navbar interface website design ning

Dashboard Link Icons

dark icons link vertical menu dropdown ideas

Dark Admin Tabs

administration panel blue tabs icons interface

Dashboard Management

dashboard interface layout themes websitelayout

Flat Admin Design

webapp pro dashboard interface inspiriation

A New Project

projects website admin dashboard charts interface statistics

Data Tables Admin

table charts information data administration dashboard

Admin Panel Layout

featured icons horizontal navigation menu links blocks

Dashboard UI

harts graphics dashboard user interface effects

Contacts Listing

color icons interface dashboard admin cp

A Web Service

web application admin panel navigation links

Analytics Dashboard

analytics charts data resources design interface

Colorful Admin Dashboard

flat colorful administration dashboard user interface

Analytics Traffic Charts

ppm analytics dashboard website ui interface management

MyPage Dashboard

user profile interface website dashboard management
ArSui 译自 http://webdesignledger.com/

1.00 平均分 (26%) - 6

1 Comment

  1. Thank you for sharing your info. I really appreciate your efforts and I am waiting for your next
    write ups thanks once again.