WEBSITE DESIGN:

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

Theory:
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.

FUNCTIONALITY: Type- determined by the purpose of the website. For example, e-commerce, social networking, portfolio, media browsing, etc. Applications- features, usually, these were pre-determined just by knowing what it the type of the website. For example, gallery, sign-up, dressing room, store, etc. Website Design Elements Hierarchy: a. VISUAL: i. Interface (Controller/Carrier/ Container) 1. Menus 2. Bars 3. Buttons 4. pop-ups/ scroll-downs 5. divisions (e.g. text boxes) ii. Content (Foreground) 1. Objects: a. Images b. Animations 2. Texts: a. Paragraphs b. Lines c. Headers words d. links 3. Labels: a. Logos (Internal, External) iii. Background --Optional b. FUNCTIONALITY: i. Type/s (e.g. E-commerce) 1. Applications/services (e.g. Gallery, Dressing Room) ii. Effects hover, on-click, entrance, exit, etc

CONCLUSIONS:
GENERAL:

The visual designing of the website is the very foreground of the website. It gives the visitors a sense of interest. This captures them and make them stay on and explore, remember and visit again. They eventually learn what type of site it is. And that connects to the functions the site have. As they explore, they learn its functions. Functions are meant to be later discovered by the visitors as they view and subsequently, use, the website. As they use the website, they may consider to sign-up and be a member. Every visitor is a potential member of the website. Visitors tend to become used to the website, as they explore, may they be computer-savvy/ netizens, or not, all we need to do is to make them stay. CREATIVITY VS. STANDARDS: The use of grid systems is widely used, it makes layouting easier. But, the use of grid systems can be a border for designers to manifest creativity. But on the other hand, going beyond from standards of designing may result to issues such as cluttered layout, non-friendly interface, etc. Another is that, something very different will be something unfamiliar, therefore, for example, an interface with a vertherefore, for example, an interface with a unfamiliarly different header menu can cause confusion. Yes, just with not following standards, the design can be a mess. So as a straightforward solution, use creativity and standards separately. Use creativity in sections that needs to be unique and interesting, and follow standards in sections that really need to be familiar, friendly, easy-to-use and organized. FASHION E-COMMERCE: Fashion is like a genre/type, but we need to consider it as a sub-category. What lies beyond is the backbone type, which determines the purpose, as of the project, an e-commerce website. So basically, we have this as a fashion e-commerce website. So what is the matter between fashion and e-commerce? We can represent it as a match here. To make it even clear, we need to take it to 4 levels of matches. Visual VS. Functionality Do we need to concentrate more on the visualization aspect? Or should we rather go for functionality? Fashion VS. E-commerce

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. Sell Should we show more of the products and the models to give people something for their hearts content? Or should we get them to buy these products? Interest VS. Profit Do we just need to target their eyes and mind, and grab their interest? Or do we need to target their pockets and wallets, and grab their money? Yes, thats right. We do not need to have these matches. We actually need to unite them for the best results. From that, we are learning that a fashion site needs to showcase the brand/company/product, and an e-commerce site needs to bring the service of a store. A fashion lookbook is just for the loyalists eyes, and an e-commerce site may bring boredom or such issues. So what is the target scheme as to make it effective, being both of fashion and selling? Use FASHION, the visual aspect as MASK, not just the face of the site, and contain the functionality of the site beyond, an E-COMMERCE. This can bring surprise or even excitement to visitors, when they discover that the site is not just a lookbook, but an actual store. We need to create a design that looks fun, fashionable and creative, while maintaining whats beyond, a store that is easy to use, simple, and relevant, efficient on functions and applications. What we need first to think of is the first impression on site. Because, basically it is the MASK, the first impression that will grab the interest of visitors. So lets create some situations of a visitor in the initial pages, and a good solution: 1. LOADER General Thought: The visitor waits for it to finish, to be able to start accessing the site. Situation: The loader is not as fast, due to the low-speed internet connection. Potential problem: Visit another site while waiting, or close the site and do other things. Solution: Give the loader an interactive entertainment to make her stay on it. 2. HOMEPAGE General Thought: The visitor gets a general feel of the site. Tries to hover the mouse cursor to different images, etc. Situation: The homepage looks cluttered, with too much texts, links and unnecessary stuff. Potential Problem: (the visitor is NOT computer-savvy/netizen);

She may tend to just close the site, or end up clicking, and which will brought her to stuff she doesnt know about at all. Solution: Give the homepage a light yet complete feel, free of too much texts, links, etc; make it look fun and bring the thought that the site is easy to use. Functionality should be easy to use to make every visitor a potential member, and eventually a buyer. Its something that will push a visitor to explore. It CAN get as simple as that, all we need next is to make the applications relevant and useful, and effective at their own purposes. SUMMARY: THEORY: A visitor will evolve, to a frequent viewer, or a user/buyer, or both. Standard- familiar, easy to use; Creative- different/unique, fun. Functionality is carried by the visualization of the website. To illustrate, a cellphones cover, screen and buttons is the visual, the chips and etc inside is the functionality. A mask is different from a face: a face shows it all at first impression, a mask shows visual creativity for impression, and gives an element of surprise to what is beyond, the functionality. Empty is different from light, complete is different from heavy. A design can be light yet complete; heavy but empty. PROPOSED REQUIREMENTS: Conceptual: Give the loader something to make it worth-waiting for. Give the homepage a light and fun feel, as the MASK. Make the applications easy to use, yet very effective. Include notes/instructions if needed. Make the content the showcase, the main focus. Give the interface a look that will control/carry/contain the content just to the point that it does not eat the content, and even make them look more special. Technical: Give the loader an interactive entertainment. Make the homepage the very first page after the loader. It is the MASK. o A computer savvy will get a sense of organization (order) that the different sections are divided and are accessible through the homepage.

o A usual computer user will get a feeling of surprise and excitement that the site is actually both a lookbook and a store. Give it a wonderful look just containing: Logo A button/link for sections: o online store (includes shop, dressing room, my bag) o Media (includes galleries, videos, etc.) o Community (includes social networks, blogs, etc.) o Company (includes history, branches, etc.) o My account (sign-up, sign-in) Fun looking images/animations Minimal texts Layout: o Each section has a different header which contains different applications, specific for the purpose of the section itself. o Use a grid system for all sections, except for the homepage and loader: We need to show creativity on initial pages, and maintain standards in distinct sections that need to be familiar and easy to use. o Do not use long texts paragraphs/ lines if possible. o Use both icon and text for important buttons/links, for example: my bag. o Use white space. Do not compress contents, create a spacious environment to make them light yet complete, and to create a sense of contrast and focus for important elements. Compressed/ closed contents should be limited and observed for a valid purpose. Application/ parts of the diff. sections: Online store o My account button/link o Choose Country (optional) the initial page for online store. o Shop where to find, search, view, buy products. Search box Item categories Items thumbnail list Item expanded viewer Diff views of product Gen. info Size, color, etc selection Add to bag Wear it with/ complete the look

o Dressing Room where to fit and mix and match items. 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. Equations such as totals, etc. Items thumbnail list Proceed to purchase functions, etc. Media o Gallery/collections contains pictures Categories viewer o Videos Categories Viewer Community social networks, and blog o Blog Viewer Archive Reply/ comment o Links to social networking sites Company history, branches, contact, about o Background history o About: (e.g. mission and vision, etc) o Store branches List Gen. info pictures o Contact information My account o Sign-in o Sign-up

POTENTIAL INSPIRATIONS: Gucci Guess Calvin Klein Mango

Prada Pepe Jeans