Design UI Mockup for Firefox addon

Contest Brief

I need to redesign my simple Firefox addon (drop down menu). I do not show current design intentionally, so be creative. The addon icon will be located here: [url removed, login to view]

The addon has drop down menu with following elements: Setup Pr*** Server, Enable Pr*** Server, Disable Pr*** Server, Import Pr*** List, Download Pr*** List, Remove Captcha. Each element should have meaningful icon on the left and shortcut (CTRL+SHIFT+#) on the right. User should be able to identify 'action' by viewing menu icon.

The first menu element has submenu (with scroll bar) with following elements: Type [icon], Flag [icon], IP:PORT, Country, City. There could be two icons for 'Type': the first one should represent Anonymity, the second one - Bypassing a Firewall. The rest elements are self-explaining.

We have a small popup with: captcha image, input for captcha text and submit button. For 'Remove Captcha' there will be another popup with: input for email, input for password and 'register account' button. Finally the popup for 'Import Pr*** Servers' - popup with text area where user can copy&paste pr*** servers and two buttons: 'browse' and 'save'. The first button will load pr*** easily from file, the second - will save results.

Special requirements - keep it simple but stylish. If you ever hold iPhone then you know what I am speaking about. I will comment each design on a public clarification board. This should help you to avoid the mistakes done by others. Feel free to ask any questions.

P.S. Please use flags which I attached. If you use your own then please take in an account that I will need at least 150 of them. You can search for some on [url removed, login to view] (I will pay for it).

Recommended Skills

Employer Feedback

“The codeunderground is ready to update UI design as many times as it will be required to get the best result. I would recommend him for design of any difficulty. ”

Profile image HIF277767, Thailand.

Top entries from this contest

View More Entries

Public Clarification Board

  • HIF277767
    HIF277767
    Contest Holder
    • 2 years ago

    #16 That was funny, I guess you do not understand english well. I said move to 'TOP LEFT' and you moved to RIGHT. I need close button in right top corner and popup's icon in top left corner. Thanks

    • 2 years ago
    1. codeunderground
      codeunderground
      • 2 years ago

      just confuse! :)

      • 2 years ago
  • HIF277767
    HIF277767
    Contest Holder
    • 2 years ago

    #15 We nearly finished the project. I have several update requests:
    1) Can you increase font size in sub menu a little bit (text is still hard read)?
    2) 'Anonymous' and 'Unlock' icons are more solid than the icons in main menu. They look more heavy. I am suggesting to remove internal filling from icons and keep only frame (with details like 'eyes' and 'key hole'), that should help.
    3) Can you change background color for 'legend' with a little bit lighter color?
    4) Can we try to move popup's icons to top left corner, the same you did with close button? (just an experiment)
    Thanks and waiting for update

    • 2 years ago
    1. codeunderground
      codeunderground
      • 2 years ago

      Do you want to replace close button with the popup's icons and use only cancel button to close the popup?

      • 2 years ago
  • HIF277767
    HIF277767
    Contest Holder
    • 2 years ago

    #14 Why did you increase space between menu elements in sub menu? It was bad idea, could you please make the same space as we had before? Also I have suggestion for sub menu: since 'Anonymous' and 'Unblock' icons have no obvious meaning, we can add legend to the bottom of submenu. We will display icons with two sentence long description. Please check this screen shot: http://screencast.com/t/mPhzxmjmU (as for random data - well done, that's what I needed)

    • 2 years ago
  • HIF277767
    HIF277767
    Contest Holder
    • 2 years ago

    #12 The issue with background color fixed. I have following requests:
    1) Please select random values for ip:port, country, city and flag.
    2) Please add 5 pixel right margin to sub menu's scroll bar.
    3) Please add icons to popups (take corresponding icons from main menu).
    I want to see how design will look in real world, with random data.

    • 2 years ago
  • HIF277767
    HIF277767
    Contest Holder
    • 2 years ago

    #12 I like new UI, well done! Huge titles, inputs and buttons will work well. The design has two issues: it is pale and country flags look strange. I may suggest to try to change background color from white to very light gray. Right now only thin frame separates popup's content from browser (you can check iOS popups to get color idea).
    #10 Text and icons looks better but the column layout you are currently suggesting is not acceptable (not user friendly). You may try following order: Country Icon, Country Name, City Name, Pr*** Server, Type Icon.
    Also you can arrange Country Name and City Name into two different way: you can put each in its own column or you can put City Name and Country Name in a single column, separated with space.
    Finally - can you suggest some better icons for submenu: key and eye. They look too big or may be 'simple'?!

    • 2 years ago
  • HIF277767
    HIF277767
    Contest Holder
    • 2 years ago

    #8 Your score is 3.5 and you the leader of contest. I like your plain style, icons, scrollbar and popup windows. There is one problem - it is pale. The text and icons are hard to read and identify. Finally, can you try move flags before 'Country Name'?
    #5 #6 #7 You should not understand my previous email directly. Of course you can use pink color but UI should look stylish and not just randomly arranged/shaped elements.

    • 2 years ago
  • MohsinRohani
    MohsinRohani
    • 2 years ago

    This can be simply done by using toggle button

    • 2 years ago
    1. MohsinRohani
      MohsinRohani
      • 2 years ago

      Yes I agree but my point is you will enable or disable pr*** server ones you set a proxy server. If you haven't set a pr*** server how can you enable or disable it and when you have set a pr*** server than there is no need to show the option of setting pr*** server

      • 2 years ago
    2. HIF277767
      HIF277767
      Contest Holder
      • 2 years ago

      I am going to disable that menu element. If you open Firefox browser for example and go to Edit menu then you will see that most of elements will be disabled because you have not selected any text. Once you select text on page, you will be able to perform 'Copy' action. I am going to do the same, you can Enable Pr*** only if it was disabled before, you can Setup Pr*** only if there is available pr*** in the list and so on.

      • 2 years ago
  • HIF277767
    HIF277767
    Contest Holder
    • 2 years ago

    WARNING: you can make any colored UI. Do not follow contest leader's color. You can make it green, orange, red, silver and etc. If someone will submit good pink colored UI I may give it higher rank than current one has. Good UI can be ANY color, it's all about style.

    • 2 years ago
  • HIF277767
    HIF277767
    Contest Holder
    • 2 years ago

    #4 OK the lock icon looks much better. Could you please remove key and rotate lock 90 degree counterclockwise? The new icon for 'Setup Pr*** Server' is much better. Moving country flags helped a little. The alternative close button seems acceptable. Currently I have no more requests for this version. I will think and get back to you shortly...
    #2 I like that your design is flat and simple. The scrollbar looks original but could you please explain why did you narrow text? Do you have such font or you did that with Photoshop? You are missing City column in submenu. The popup design were stolen from #4 and I do not tolerate such actions. The main menu's icons are OK but submenu are not. You need to improve your design.
    TO ALL: I will upload couple of different set of flags. If you want to use your own flags then I may ask you to provide me at least flags for top 150 countries out of 270. You can also find paid sets but it should not cost more than 20 USD.

    • 2 years ago
  • Zeshu2011
    Zeshu2011
    • 2 years ago

    I'll be working on it tomorrow morning. Will submit soon. :)
    thanks

    • 2 years ago
    1. HIF277767
      HIF277767
      Contest Holder
      • 2 years ago

      Thanks, I will wait for your entry

      • 2 years ago
  • jamshaidrazaCG
    jamshaidrazaCG
    • 2 years ago

    I gone give a try....

    • 2 years ago
    1. HIF277767
      HIF277767
      Contest Holder
      • 2 years ago

      Welcome to this contest, I wish you good luck. Please let me know if you have any question.

      • 2 years ago
  • HIF277767
    HIF277767
    Contest Holder
    • 2 years ago

    #1 Regarding popups - they seems to be OK at the moment. I just notice that I am missing one more simple popup for 'import pr***' - huge text are where user can copy&paste pr*** servers and two buttons 'browse' and 'save'. The first one allows to load pr*** easily from local file, the second one saves result.

    • 2 years ago
  • HIF277767
    HIF277767
    Contest Holder
    • 2 years ago

    #1 I was planning to start giving out ratings from 1 but yours deserve 3 right away. I have no complains for main menu's icons with exception - why did you decide to use cloud for first one? I am not sure if we can make borderless menu with close button like you have - I will check it with developer.
    As for submenu - the icon for 'bypass firewall' could be better. I know it is hard to find but may be this explanation will help you: this type of pr*** allows user to access blocked web sites - unblock them. May be 'a lock pick' or 'lock with a key'? The second problem which submenu has is 'country name' and 'city'. Right now it looks as mass, it is unreadable... let's try to move flag before country name, this may help a little bit.

    • 2 years ago
  • codeunderground
    codeunderground
    • 2 years ago

    thanks you to reply.
    The addon has drop down menu with following elements: Setup Pr*** Server, Enable Pr*** Server, Disable Pr*** Server, Import Pr*** List, Download Pr*** List, Remove Captcha. (I think you miss an element - List of pr*** in that line)

    • 2 years ago
    1. HIF277767
      HIF277767
      Contest Holder
      • 2 years ago

      No, I did not miss it. Actually, you list sub-menu with list of pr*** servers when users click on Setup Pr*** Server. So in other words the logic is following - user needs to setup pr*** and we are offering to pickup one from the available list.

      • 2 years ago
  • codeunderground
    codeunderground
    • 2 years ago

    There could be two icons for 'Type': the first one should represent Anonymity, the second one - Bypassing a Firewall. (can i follow icon by text: [Anonymity icon] Anonymity)

    • 2 years ago
    1. HIF277767
      HIF277767
      Contest Holder
      • 2 years ago

      No, you cannot do that. Menu should remain as simple as it is possible. By using extra text you will make it wider, plus duplication of same two words (anonymity and bypass firewall) will put negative impression on UI. I can give you tip for anonymity icon - check anonymity mode of Opera or Chrome (I do not remember exactly which had this feature). The icon was a 2d salute of man in cap and glasses - anonymity.

      • 2 years ago
  • codeunderground
    codeunderground
    • 2 years ago

    why The first menu element has submenu (with scroll bar). can i make a submenu without a scroll bar

    • 2 years ago
    1. HIF277767
      HIF277767
      Contest Holder
      • 2 years ago

      The first menu element allows user to pick up the proxy which should be installed. The list of pr*** can be from 10 up to 100 elements. One screen may not enough to display them all. The system by default allows to scroll only one element up/down at a time which is slow. That's why we need scroll bar which user may use to speed up scrolling.

      • 2 years ago

Show more comments

How to get started with contests

  • Post your contest

    Post Your Contest Quick and easy

  • Get tons of entries

    Get Tons of Entries From around the world

  • Award the best entry

    Award the best entry Download the files - Easy!

Post a Contest Now or Join us Today!