Design UI Mockup for Firefox addon

Konkurrencebeskrivelse

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).

Anbefalede færdigheder

Arbejdsgiverfeedback

“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. ”

Profilbillede HIF277767, Thailand.

Bedste indlæg fra denne konkurrence

Se flere indlæg

Offentlig præciseringstavle

  • HIF277767
    Konkurrencevært
    • 4 år siden

    #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

    • 4 år siden
    1. codeunderground
      codeunderground
      • 4 år siden

      just confuse! :)

      • 4 år siden
  • HIF277767
    Konkurrencevært
    • 4 år siden

    #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

    • 4 år siden
    1. codeunderground
      codeunderground
      • 4 år siden

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

      • 4 år siden
  • HIF277767
    Konkurrencevært
    • 4 år siden

    #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)

    • 4 år siden
  • HIF277767
    Konkurrencevært
    • 4 år siden

    #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.

    • 4 år siden
  • HIF277767
    Konkurrencevært
    • 4 år siden

    #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'?!

    • 4 år siden
  • HIF277767
    Konkurrencevært
    • 4 år siden

    #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.

    • 4 år siden
  • MohsinRohani
    MohsinRohani
    • 4 år siden

    This can be simply done by using toggle button

    • 4 år siden
    1. MohsinRohani
      MohsinRohani
      • 4 år siden

      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

      • 4 år siden
    2. HIF277767
      Konkurrencevært
      • 4 år siden

      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.

      • 4 år siden
  • HIF277767
    Konkurrencevært
    • 4 år siden

    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.

    • 4 år siden
  • HIF277767
    Konkurrencevært
    • 4 år siden

    #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.

    • 4 år siden
  • Zeshu2011
    Zeshu2011
    • 4 år siden

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

    • 4 år siden
    1. HIF277767
      Konkurrencevært
      • 4 år siden

      Thanks, I will wait for your entry

      • 4 år siden
  • jamshaidrazaCG
    jamshaidrazaCG
    • 4 år siden

    I gone give a try....

    • 4 år siden
    1. HIF277767
      Konkurrencevært
      • 4 år siden

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

      • 4 år siden
  • HIF277767
    Konkurrencevært
    • 4 år siden

    #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.

    • 4 år siden
  • HIF277767
    Konkurrencevært
    • 4 år siden

    #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.

    • 4 år siden
  • codeunderground
    codeunderground
    • 4 år siden

    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)

    • 4 år siden
    1. HIF277767
      Konkurrencevært
      • 4 år siden

      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.

      • 4 år siden
  • codeunderground
    codeunderground
    • 4 år siden

    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)

    • 4 år siden
    1. HIF277767
      Konkurrencevært
      • 4 år siden

      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.

      • 4 år siden
  • codeunderground
    codeunderground
    • 4 år siden

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

    • 4 år siden
    1. HIF277767
      Konkurrencevært
      • 4 år siden

      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.

      • 4 år siden

Vis flere kommentarer

Sådan kommer du i gang med konkurrencer

  • Opret din konkurrence

    Opret din konkurrence Hurtigt og nemt

  • Få tonsvis af indlæg

    Få tonsvis af indlæg Fra hele verden

  • Vælg det bedste indlæg

    Vælg det bedste indlæg Download filerne - Nemt!

Opret en konkurrence nu eller slut dig til os i dag!