Transcription
Magento ConnectProfile Design Guidelines
Design Guidelines 2TA BLE O F CONTENTSIntroduction 3General Extension Guidelines4Enterprise Extensions 6Featured Extensions 7Free Vs. Paid Extensions8Extension Approvals and Rejections9Design Guidelines 10Reviews 22
Design Guidelines 3I N T R ODU C T I ONIntroductionBefore your extension goes live on MagentoConnect, the Magento team reviews andapproves your extension and listing. Wemeasure your submission against theguidelines detailed in this document. Toensure timely review and approval of yourextension, we recommend that you followthese guidelines closely when creating,packaging and submitting your extension toMagento Connect.
Design Guidelines 4G E NE R AL EXT. GUIDELINESGeneral Extension GuidelinesMagento reserves the right to requestmodifications to, reject or delete anyMagento Extensions or Magento Extensioncontent, at any time, at its sole discretion.Guideline 1:Extensions are software, not servicesMagento Connect is designed as anextension marketplace, not as a generaldirectory of complimentary products andservices. Magento does not allow servicesto be listed in Connect. If you have a serviceyou would like to present to the communityof 100,000 merchants, please contact ourIndustry Partners Team.Guideline 2:Magento Branding and Logo UsageMagento and its related logos aretrademarked and owned by Magento,which is an eBay company. You may notuse the Magento name in your extension’sname (title), your domain name, or yourMagentocommerce.com web site username.Furthermore, your listing may not use anylanguage that may cause the merchantto infer that your extension is created,supported or endorsed by Magento. Forexample, including text such as “SpecialOffer From Magento” in your listing is notacceptable, and its inclusion will result inyour listing being rejected.You may use the Magento logo in yourextension listing or on your web site,provided that it is smaller than your ownbranding and that it does not create anyinference to Magento’s affiliation with yourcompany or extension.
Design Guidelines 5G E N E RAL E X T. GU I DE LI N E SGuideline 3:Guideline 7:Inappropriate ContentAccuracyMagento Connect extensions and listingsmay not include offensive or discriminatorylanguage, sexual content or nudity.Your listing must be accurate, includingMagento version compatibility, relevantcategory selection, spelling, andgrammatical errors.Guideline 4:Malicious CodeYour extension and listing may not contain anyhidden or malicious code. Futhermore, yourextension listing must accurately describe thefunctionality of your extension.Guideline 5:Privacy and SecurityYour extension may not violate the privacyrights of the merchant or its customers, andmay not access secure data without theexpress consent of the merchant.Guideline 6:Intellectual PropertyYour extension and listing may not violate thetrademarks and copyrights of any third party.Your extension listing must include a licensingagreement for the merchant.Note: Magento reserves the right to changethe categorization of your extension at itsdiscretion.Guideline 8:CSSYour listing details may not include anyCSS tags.
Design Guidelines 6E NTE R PR IS E EXT ENSIONSEnterprise ExtensionsDevelopers who are members of Magento’sIndustry Partner Program may designatetheir extensions as “Enterprise Edition”extensions.If you are not part of the Industry PartnerProgram, your extension may not be labeledas an “Enterprise Edition” extension, nor mayit include the word “Enterprise” in the title.To learn more about Magento’s IndustryPartner Program, click here.
Design Guidelines 7F E AT U R E D E X T E N S I ON SFeatured ExtensionsMagento Connect offers opportunities fordevelopers to increase the exposure oftheir extensions to the Magento Communitythrough premium placements and featuredlisting slots. To learn more about theseopportunities, please contactindustrypartners@magento.com,
Design Guidelines 8F RE E VS. PAID EXT ENSIONSFree Vs. Paid ExtensionsMagento allows developers to list for freeand for purchase extension on MagentoConnect. For paid extensions, Magentodoes not facilitate the transaction, ratherit simply provides a link from the listing tothe developer’s web site. The link that youprovide to your paid extension must bedirected to an extension details page onyour web site and not to a 3rd-party. Thispage must include detailed informationabout the extension, including price,warranty and support.All free extensions must be uploaded intoMagento Connect for merchants to downloadthrough Magento Connect Manager. Listingsmarked as paid that are free or have anominal fee may not be approved.
Design Guidelines 9E X T E N S I ON SAPPRO VA LS & R E JE C T I ON SExtension Approvals and RejectionsMagento will put forth its best efforts to review all extensions within ten business days ofsubmitting your listing. Please login to your “My Account” section on Magentocommerce.comto check whether or not your extension has been approved.Not ApprovedApprovedIf your extension is not approved, Magentowill change the status of your extension from“Submitted” to “Pending”.Once your extension is approved, it willimmediately become visible within theMagento Connect marketplace.Note: This will not trigger an email notification,you are responsible for logging in to checkyour submission’s status. Once your extensionhas not been approved, you may edit yourlisting and resubmit it to Magento.
Design Guidelines 10D E S IG NImageryIcon 1: This icon represents the developer as a skilled part of theMagento Connect community.Developer AvatarExtension IconScreenshotDeveloper AvatarA Magento Connect developer can only have ONE developeravatar. Image specifications for developer avatars are 100 px x100 px. These avatars are uploaded on the My Account page.How to Upload Your Developer Avatar1. Log in to your account2. Click “Account Settings”3. Click “Edit Avatar”4.“Browse” to select your developer avatar image fromyour computer. Image MUST be 100 px x 100 px.Max file size: 50KB.5. Once you have selected the file, click “Upload Avatar”Your developer avatar will be showcased on your DeveloperProfile, Product Detail Page(s) and on the Community Forums.
Design Guidelines 11DE S I GNIcon 2:Extension IconThis icon represents the extension produced by the developer. It will be apart of the developer’s Magento Connect portfolio. This icon will be uploadedduring the “Add New Extension” process.Image specifications for developer extension icons are 450 px x 450 px.
Design Guidelines 12D E S IG NImageryImages: Images loaded to show the extension can be any dimension.They will be resized proportionally. Each Magento Connectextenstion can feature nine (9) additional images highlightingits details. Images provided must be clear and readable. Themaximum dimension is 700 px x 680 px.Extension ScreenshotsExtension IconExtension Screenshots
Design Guidelines 13DE S I GNHow to Update Existing Extension Icons & Screenshots1. Log in to your account2. Click “Developers”3. Click “Manage Extensions”4. Click the “Edit” link under Actions5. Click on the Screenshots Tab6. “Browse” to select image from your computer.7. Select “Base Image” to make the image the Extension Icon8. Click SaveIf you have more than one extension, you will need to update eachextension individually.
Design Guidelines 14D E S IG NExtensionDetail Page Featured ImagesDeveloper AvatarSupported Tags21The Extension Detail pageis your primary real estateto tell Magento merchantsabout your extension, itscapabilities and how it willbenefit them. Your detailpage should include adetailed description of yourextension’s functionality, andlist important information suchas version compatibility anddependencies.Remember to maximize theimpact of your detail pagewith a product image andyour company’s logo.Merchants will enter yourextension’s detail page fromwithin Magento Connectthrough search results,browsing relevant categoriesor clicking on featured linksif and when your extension isfeatured.3
Design Guidelines 15DE S I GN1Featured Images2Developer Avatar3Supported TagsImages in this area are STATIC images. Images will beautomatically resized.Graphically represents the Developer on MagentoConnect.For the existing extension, the developer needs to updatethe detailed summary of the extension field. Remove all inline css The following HTMLtags are supported: a img strong b kbd u br li ul button ol div p h1 , h2 , h3 q hr s , strike i span
Design Guidelines 16D E S IG NResults PageThe results page displays allthe relevant extensions thatmatch the criteria used bythe merchant to search forextensions.When your extension isincluded on the resultspage, the listing includesyour extension’s name,your extension icon and abrief description. The listingalso includes a link to yourextension’s detail page.
Design Guidelines 17DE S I GNDeveloperProfile Page Developer AvatarExtension IconsAs an Extension Developer,Magento provides you withyour own home page withinMagento Connect. Hereyou can provide prospectivemerchants with an overviewof your company and providethem with the confidencethey need to trust addingyour extensions to their stores.In addition to your companyoverview and a listing of allof your Magento Connectextensions, your profilepage also has space foryour Developer Avatar, a100 x 100 pixel image whichcan either be your logo orsome other type of graphicalrepresentation of you.
Design Guidelines 18D E S IG NExtensionIcons StyleVector ShapesScalingSaving AssetsExtension Icon:Do’sExtension Icon:Don’t’s1.1 StyleThe icons that you create should follow the general style principlesbelow. The guidelines aren’t meant to restrict what you can do with youricons, but rather they are meant to emphasize the common approachesthat your icons can share with others in the store.CLEAN AND CONTEMPORARYSIMPLE AND ICONICTACTILE AND TEXTURED1.2 Use Vector ShapesMany image-editing programs such as Adobe Photoshop allow you touse a combination of vector shapes and raster layers as well as effects.When possible, use vector shapes so that if the need arises, assets canbe scaled up without loss of detail and edge crispness.Using vectors also makes it easy to align edges and corners to pixelboundaries at smaller resolutions.1.3 ScalingWhen scaling, redraw bitmap layers as needed. If you scaled an imageup from a bitmap layer, rather than from a vector layer, those layers willneed to be redrawn manually to appear crisp at higher densities. Forexample if a 60x60 circle was painted as a bitmap for mdpi it will needto be repainted as a 90x90 circle for hdpi.1.4 Saving AssetsWhen saving image assets, remove unnecessary metadata. To helpkeep each image asset as small as possible, make sure to remove anyunnecessary headers from the file, such as Adobe Fireworks metadataor Adobe Photoshop headers. To remove the Photoshop header, followthese steps:1.Under the File menu, choose the Save for Web & Devices command2.On the “Save for Web & Devices” panel, set the Preset pop-up to“PNG-24,” set the pop-up under Presets to “PNG-24” as well, andselect the Transparency box (if the image uses transparency)3.Select Save.
Design Guidelines 191.5 Extension Icon: DO’S DO use a simple background (*solid colors, fine patterns, gradients withinthe same color family work well)DO capitalize on your company’s logo or other types of brand imageryDO use a SINGLE focal pointDO incorporate design techniques that suggest depth and figure/groundrelationship (*light, shadow, reflection, etc.)1.6 Extension Icon: DON’T’S DO NOT use complicated images (screengrabs or image compilations become toocomplicated) DO NOT use too many colors DO NOT use a product shot (such as an angled box) DO NOT showcase paragraph text
Design Guidelines 20D E S IG NTypography HeadersScannable TextWhite SpaceConsistencyCalloutsSeparators
Design Guidelines 21DE S I GN1.1 Headers1.5 CalloutsHeaders are a key element in typography,web and print alike. As mentioned, they arepart of the text hierarchy and a major factor inscannable content.By emphasizing important information, youprovide focal points for the user. Similar toscannable text, these points and objectshelp break up monotonous text and allow theviewer to quickly scan the page.Header size is just as important as the sizeof the body text. A header that is too largecan throw the user off balance when readingand cause them to lose their spot. It willultimately ruin the flow of the content and be adistraction. Headers that are too small will ruinthe hierarchy of the article, as well. It will notdraw the user’s attention as it should.1.2 Scannable TextText is scannable text when it can begenerally understood even when the userquickly scans the body text. There are manycontributing factors to whether or not text fitsinto this category: header size and position,body text size, text line height, text contrastand the way focus points are differentiated allimpact how scannable copy is on a webpage.1.3 White SpaceWhite space helps to offset large amounts oftext and helps the user from becoming lost onthe page. By providing greater readability ofcontent, it creates a visual breathing room inbetween blocks of text and also between textand image.1.4 ConsistencyConsistency allows the user to becomefamiliar with elements on the page and morecomfortable with information provided. Inorder for elements to be consistent, certainaesthetic elements need to be the sameincluding size, color and font.1.6 Use of SeparatorsDividing blocks of text into sections isan effective way to achieve readability,create more white space, divide text tosuggest hierarchy, and make your textmore scannable. Doing this in a clean andorganized manner is generally the mostsuccessful way to break apart textualdocuments.
Design Guidelines 22R E V IE WSReviewsMagento does not censor reviews for anyreason whatsoever, except in such caseswhere the review includes inappropriatecontent or are deemed to be abusive or spam.If a merchant provides you with a negativereview, we recommend responding quicklyand openly through the extension review tool.All other guidelines are detailed in ourMagento Connect Developer’s Terms of Use,which you must agree to prior to uploading anextension.If you have any questions, please contact usat connect@magento.com.
A Magento Connect developer can only have ONE developer avatar. Image specifications for developer avatars are 100 px x 100 px. These avatars are uploaded on the My Account page. How to Upload Your Developer Avatar 1. Log in to your account 2. Click "Account Settings" 3. Click "Edit Avatar" 4."Browse" to select your developer avatar .
