Click me
Transcribed

Basic Things to Remember When Designing a Website Template

Basics to Design a WEBSITE WIRE FRAMING/STRUCTURE Known as schematic or screen blueprint.Wireframe is a visual guide that represents the skeletal framework of a website USES OF WIREFRAMES Low-fidelity & High-fidelity Elements of Wireframes Information Design Navigation design Interface design GET A PERFECT DESIGN/LAYOUT PUT YOUR THOUGHTS ONPAPER ADD AGRID TO YOUR PSD START SKETCHINGA TOP LEVEL FRAMEWORK DIVIDE THE LAYOUT SELECT YOUR COLOURTHEME CHOOSE YOUR TYPOGRAPHY RETHINK THE ESTABLISHED Challenge yourself Pay attention to the details Improve the overall work Manage PSDS for easy and quick access Design your best outline of the project Be nice to developers to get the best from your design Prepare presentation like how you explain that to a kid Love each element of the design, but be ready to change them Keep track of the design during development process Show your work in progress Make every component perfect WEB BROWSER MARKET SHARE 40°) 18.2* 16.3*X 15.4" 3.2 CHROME IE FIREFOX SAFARI OPERA SCREEN RESOLUTION STATISTICS 99 % of today's visitors have 1024X768 pixels or higher resolution screens 1366 x 768 20.80% 1024 x 768 6.77% 99 76 1920 x 1080 7.48% 1280 x 800 6.03% 768 x 1024 5.56% 1280 x 1024 45.35% 5.79 1440 x 900 4.72% 4.42 2.73 1600 x 900 4.48% 320 x 568 4.26% 360 x 640 3.58% TYPOGRAPHY Type Classifications SERIF SANS SERIF SCRIPT Serif Sans Serif Script TYPE FACES Known as font family which is include various letter types in one face. Here we can use common design features at a time or one / more font's variation. Roboto SUNGLASSES BLACK SMALL CAPS Self-driving robot ice cream truck ITALIC Fudgesicles only 25¢ BOLD ICE CREAM BOLD CONDENSED Marshmallows & almonds MEDIUM #9876543210 LIGHT BASICS OF TYPOGRAPHY Character Paragraph - Font Size Arial Regular - Leading T 18 pt A (Auto) VA Metrics - VA 60 Tracking IT 100% A Opt T 100% - Kerning Color Typography Popular Website Verticals 120 100 80 60 40 20 Business Education Entertainment Forum Shopping Sports Technology Legend : Top 10,000 Sites Top 100,000 Sites Top 1 Million Sites This chart shows the amount of websites with in the top 10k 100k and 1 million sites groups that are categorized as being in the specific vertical. RESPONSIVE DESIGN The Feature of the web Technical Ingredients of Responsive Website Design Fluid Grids Flexible Images Media Queries MOSTPOPULAR CROSS DEVICE ACTIVITIES 2013 – The Year of Responsive Design January IDIODI IDIODI 90* 81* 67* 46 43* People use multiple screens sequentially Browsing the Internet Shopping Online Managing Finances Planning a trip RESPONSIVE DESIGN USAGE STATISTICS Mobile Phones Account for 17% of Global Web Usage Percentage of page views coming from mobile devices* July 2012 July 2013 North America 9.4% 15.2% Europe 5.9% 9.7% Asia 18.8% 26.6% Worldwide 11.1% 17.4% South America 3.2% 3.2% Africa 11.3% 23.7% Oceania 8.0% 14.6% State Counter defines mobile as as a pocket - sized computing device, excluding tablets TOPPROBLEMS WITH NON RESPONSIVE WEBSITES 66% 48% 42% Web pages websites not websites difficult slow to load made for smartphones to read on devices Simple 5 Things People FLAT Associate with the Clean DESIGN FLAT DESIGN Colourful Modern Trendy ADVANTAGES OF FLAT DESIGN DISADVANTAGES OF FLAT DESIGN Ease of Use Different from what people are used to Modern Appearance Sometimes unclear what's clickable Perceived as more honest Lacks personality Efficient Responsive Design Boring Design Fast Load Times Difficult USER INTERFACE & USER EXPERIENCE Top 5 User Interface Types Types of User Experience Design User Experience Lifecycle Direct manipulation Interface Reactive design Transition > Fulfilment > Graphical User Interfaces Magnetic design Conversion > Motivation > Web-based User Interfaces Immersive design Engagement > Evaluation > Command Line Interfaces Introduction > Impression > Touch User Interface Inception. UX DESIGNER WORK DAY Wireframes Prototypes Development of Pers --> --> Navigational Elements Sitemaps Site Audits --> --> Top UI/UX Principles --> Design should focus on an experience. --> People wont have patience to read the websites but scans them --> Simple and clear Ul makes the user to fall in love with website --> Maintain balance between creativity and common design patterns --> Design to capture someone's attention above the fold rather than design everything above the fold. --> Scrolling is often faster than paging --> Build nice responsive design vs. just responsive design. DO'S AND DONT'S FOR AN PERFECT WEBSITE DESIGN Keep your page structured Just place boxes everywhere Focus on what's important Place irrelevant ads across your page Choose the right color scheme Overdo it with 20 different colors Make it easy to scan your pages Write one paragraph per page that is 1,000+ words long Keep it simple stupid Go on and on (and on) about nothing Focus on killer copywriting Stuff your pages full of keywords Set your navigation up properly Make your readers search to find something Optimize your load times Make everything on your page an image Choose the right fonts and sizes Have 5 different fonts in 10 different sizes Make your page visually appealing Throw a bunch of crap together and think you'll do well NAVIGATION USABILITY Users finding Information: Most Hated Advertising Techniques -> Simple Navigation helps the users to access their needed information quickly than the smart choices made with Navigation or interactive design.) -> Pop ups in front of your Window - 98% -> Loads Slowly - 94% -> Does not have a close button - 93% --> User Interface Engineering Inc says - 60% time on a website people cannot find the information they seek CONTENT English 68.4% Russian 1.9% Web Content by Language Stats Japanese 5.9% Italian 1,6% German Chinese 5.8% Portuguese 1,4% -> SEO gets the visitor to the door. 3.9% Korean 1.3% --> Its up to your site's content to welcome and retain that visitor French 3.0% Others 4.6% Spanish 2.4% STATISTICS THAT DEMONSTRATE THE VALUE OF SEO (GOOGLE, YAHOO, BING) Making a pig fly is not the job of Search Engine Optimization, But it Genetically boost the website, So that it become as eagle) -> Top ranking links gets more users clicks upto 42 percent, and second ranking gets 8%, and it continues to drop thereafter) --> Artificially switching the top ranking links drops the click through ratio to 34-12 % from 42-8%, Which demonstrates the importance of engaging copy in addition top rank position) --> 62% of search process to the second page. Presumably the difference between 62% and 23% stems from searchers trying either another keyword, another engine or simply giving up. --> 80% of unsuccessful searchers are followed with keyboard refinement. BASIC WEBSITE TEMPLATE STRUCTURE Template.net D:

Basic Things to Remember When Designing a Website Template

shared by Nancyhill on Dec 11
360 views
29 share
0 comments
With having knowing the fundamentals its very difficult to do any thing, so here is an interesting infographic which tells you the basic to a design a Website

Category

Technology
Did you work on this visual? Claim credit!

Get a Quote

Embed Code

For hosted site:

Click the code to copy

For wordpress.com:

Click the code to copy
Customize size