This action might not be possible to undo. Are you sure you want to continue?
As a proposal to TBY Fashion Services Portal Interface Design
Jan Daryl Castrence Designer
Note: These are based on discussion during the presentation, net meetings, and research and analysis of the author.:)
Related Concepts: Layout the use of guides to lay the different elements of the design, and the website itself. The Grid Systems A system used to layout websites’ interface and contents. These include the 960px GS, 978px GS, etc. It serves as a margin in width, and as a guide for placing indentions for content, as well as the interface, etc. Creativity of course, it is basically the manifestation of ideas by extending the standards/ limits of the elements of designing, including the layout, the interface, content, background, etc.
Website design elements Definition: elements that make up the website itself. VISUAL: Interface – the controller, carrier or container of different contents. It includes menus, bars, buttons, pop-ups, etc. Content – the foreground element. It includes images, animations, texts, etc. Background – the backmost object, it usually an image, and sometimes animations, videos are used. It is optional though.
Menus 2.g. Interface (Controller/Carrier/ Container) 1. Texts: a. Paragraphs b. etc. Logos (Internal. Gallery. Headers – words d. social networking. these were pre-determined just by knowing what it the type of the website. Labels: a. Effects – hover. entrance.features. Applications/services (e. Dressing Room) ii. Bars 3.FUNCTIONALITY: Type. sign-up.g. on-click. For example. VISUAL: i. pop-ups/ scroll-downs 5. E-commerce) 1. Applications.g. dressing room. Objects: a. For example. Buttons 4.determined by the purpose of the website. Type/s (e. links 3. etc CONCLUSIONS: GENERAL: . External) iii. Animations 2. media browsing. exit. FUNCTIONALITY: i. Images b. etc. Content (Foreground) 1. divisions (e. Website Design Elements Hierarchy: a. gallery. portfolio. Background --Optional b. Lines c. usually. text boxes) ii. store. e-commerce.
Another is that. remember and visit again.The visual designing of the website is the very foreground of the website. for example. going beyond from standards of designing may result to issues such as cluttered layout. which determines the purpose. It gives the visitors a sense of interest. may they be computer-savvy/ netizens. Visual VS. use creativity and standards separately. To make it even clear. something very different will be something unfamiliar. use. easy-to-use and organized. the website. they learn its functions. FASHION E-COMMERCE: Fashion is like a genre/type. friendly. as of the project. Yes. They eventually learn what type of site it is. and follow standards in sections that really need to be familiar. As they explore. So as a straightforward solution. CREATIVITY VS. But on the other hand. Functionality Do we need to concentrate more on the visualization aspect? Or should we rather go for functionality? Fashion VS. But. As they use the website. we have this as a fashion e-commerce website. This captures them and make them stay on and explore. STANDARDS: The use of grid systems is widely used. as they explore. but we need to consider it as a sub-category. the use of grid systems can be a border for designers to manifest creativity. an interface with a unfamiliarly different header menu can cause confusion. Visitors tend to become used to the website. So what is the matter between fashion and e-commerce? We can represent it as a “match” here. Functions are meant to be later discovered by the visitors as they view and subsequently. just with not following standards. therefore. So basically. an interface with a vertherefore. it makes layouting easier. etc. or not. E-commerce . What lies beyond is the backbone type. the design can be a mess. for example. we need to take it to 4 levels of “matches”. they may consider to sign-up and be a member. all we need to do is to make them stay. Every visitor is a potential member of the website. an e-commerce website. Use creativity in sections that needs to be unique and interesting. non-friendly interface. And that connects to the functions the site have.
Profit Do we just need to target their eyes and mind. basically it is the MASK. LOADER General Thought: The visitor waits for it to finish. and grab their interest? Or do we need to target their pockets and wallets. being both of fashion and selling? Use FASHION. A fashion lookbook is just for the loyalists’ eyes. Situation: The loader is not as fast. So what is the target scheme as to make it effective. and an e-commerce site needs to bring the service of a store. So let’s create some situations of a visitor in the initial pages. fashionable and creative. with too much texts. and an e-commerce site may bring boredom or such issues. not just the face of the site. What we need first to think of is the first impression on site. etc. we are learning that a fashion site needs to showcase the brand/company/product. Because. simple. HOMEPAGE General Thought: The visitor gets a general feel of the site. We actually need to unite them for the best results. while maintaining what’s beyond. . the visual aspect as MASK. when they discover that the site is not just a lookbook. a store that is easy to use. Potential problem: Visit another site while waiting. Potential Problem: (the visitor is NOT computer-savvy/netizen). and grab their money? Yes. We need to create a design that looks fun. or close the site and do other things. Tries to hover the mouse cursor to different images. and contain the functionality of the site beyond. but an actual store.Should we make it more a fashion lookbook for the eyes of loyalists of the brand/company? Or should we make it more of e-commerce to grab opportunity for inviting potential buyers? Show VS. From that. links and unnecessary stuff. that’s right. Sell Should we show more of the products and the models to give people something for their heart’s content? Or should we get them to buy these products? Interest VS. 2. and a good solution: 1. an E-COMMERCE. efficient on functions and applications. to be able to start accessing the site. Solution: Give the loader an interactive entertainment to make her stay on it. This can bring surprise or even excitement to visitors. We do not need to have these “matches”. and relevant. Situation: The homepage looks cluttered. due to the low-speed internet connection. the first impression that will grab the interest of visitors.
Make the applications easy to use. Give the homepage a light and fun feel. and effective at their own purposes. all we need next is to make the applications relevant and useful. etc. and gives an element of surprise to what is beyond. Make the homepage the very first page after the loader. It CAN get as simple as that. make it look fun and bring the thought that the site is easy to use. A design can be light yet complete. and even make them look more special. fun. Give the interface a look that will control/carry/contain the content just to the point that it does not “eat” the content. Functionality should be easy to use to make every visitor a potential member. Technical: Give the loader an interactive entertainment. links. as the MASK. screen and buttons is the visual. A mask is different from a face: a face shows it all at first impression. easy to use. . the chips and etc inside is the functionality. PROPOSED REQUIREMENTS: Conceptual: Give the loader something to make it worth-waiting for. heavy but empty. and eventually a buyer. the main focus. Standard. To illustrate. the functionality. SUMMARY: THEORY: A visitor will evolve.She may tend to just close the site. and which will brought her to stuff she doesn’t know about at all. or end up clicking. or a user/buyer. yet very effective. Include notes/instructions if needed. or both.different/unique. a cellphone’s cover. o A computer savvy will get a sense of organization (order) that the different sections are divided and are accessible through the homepage. free of too much texts. Functionality is carried by the visualization of the website. Make the content the showcase. It’s something that will push a visitor to explore. complete is different from heavy. a mask shows visual creativity for impression. It is the MASK.familiar. Empty is different from light. Solution: Give the homepage a light yet complete feel. Creative. to a frequent viewer.
etc.) o My account (sign-up. dressing room. etc. o Shop – where to find. etc selection Add to bag Wear it with/ complete the look .) o Company (includes history. Application/ parts of the diff. branches. o Use both icon and text for important buttons/links. Give it a wonderful look just containing: Logo A button/link for sections: o online store (includes shop. etc. Do not compress contents. info Size. o Use white space. buy products. color. and maintain standards in distinct sections that need to be familiar and easy to use. create a spacious environment to make them light yet complete.) o Community (includes social networks. Compressed/ closed contents should be limited and observed for a valid purpose. Search box Item categories Items thumbnail list Item expanded viewer Diff views of product Gen. my bag) o Media (includes galleries. blogs. videos. search. o A usual computer user will get a feeling of surprise and excitement that the site is actually both a lookbook and a store. o Do not use long texts paragraphs/ lines if possible. and to create a sense of contrast and focus for important elements. specific for the purpose of the section itself. o Use a grid system for all sections. view. sign-in) Fun looking images/animations Minimal texts Layout: o Each section has a different header which contains different applications. except for the homepage and loader: We need to show creativity on initial pages. for example: my bag. sections: Online store o My account button/link o Choose Country (optional) – the initial page for online store.
mission and vision. etc. info pictures o Contact information My account o Sign-in o Sign-up POTENTIAL INSPIRATIONS: Gucci Guess Calvin Klein Mango . o Dressing Room – where to fit and mix and match items. branches. Paper doll What are you wearing Selection – to add items to bag o My bag – where to check the items chosen. and proceed to purchase. Items thumbnail list Proceed to purchase functions.g. and blog o Blog Viewer Archive Reply/ comment o Links to social networking sites Company – history. contact. Media o Gallery/collections – contains pictures Categories viewer o Videos Categories Viewer Community – social networks. etc. Equations – such as totals. about o Background history o About: (e. etc) o Store branches List Gen.
Prada Pepe Jeans .